Posted on 2013-01-21 10:38
TWaver 阅读(1783)
评论(0) 编辑 收藏
TWaver组件中提供了一些通用的Chart，比如Line Chart，Bar Chart，Bubble Chart，Percent Chart等，对于一些复杂的Chart我们也可以通过定制的方式来实现，如前面所给出的用swing制作精美ERP图表，仔细看来这些Chart都是单个图，有客户要实现多个Chart的整合，比如Line Chart和Bar Chart组合显示，这改如何来实现？通常我们想到的方式是通过叠加来显示，将TWaver的这两个组件叠加起来，但这会带来很多不必要的麻烦，下面我们通过定制Chart的方式来实现，先看看最终的实现效果：
这个图展示的是2012年下半年的降雨量和温度走势，这就是一个很简单的Line Chart和Bar Chart叠加的图，这里采取的实现方式是定制Chart，首先创建一个类继承于Bar Chart，在Bar Chart上draw出Line Chart，主要的实现代码也就是在PaintChart里，我们来看看具体的代码实现：
1 public void paintChart(Graphics2D g2d, int width, int height) {
2 super.paintChart(g2d, width, height);
3 Rectangle rect = this.getBackgroundBounds();
4 double xScaleGap = rect.getWidth()/(xScaleCount*2+1);
5 double yPixelGap = this.toValidHeight(rect.getHeight())/ this.lineRange;
6 for(int i = 0; i< lineDatas.size(); i++){
7 Data data = (Data)lineDatas.get(i);
8 paintData(g2d,data,rect,xScaleGap,yPixelGap);
9 }
10 }
11
1 private void paintData(Graphics2D g2d,Data data,Rectangle rect,double xScaleGap, double yPixelGap){
2 List dataValues = data.getValues();
3 Point2D lastPoint = null;
4 Point2D currentPoint = null;
5 g2d.setColor(data.getColor());
6 g2d.setStroke(new BasicStroke(data.getLineWidth()));
7 if(dataValues != null && dataValues.size() >0){
8 for(int i=0 ;i < xScaleCount; i++){
9 double value = ((Double) dataValues.get(i)).doubleValue();
10 double x = rect.getX() - this.shadowOffset + xScaleGap * (2*(i+1)-0.5);
11 double y = rect.getY() + this.toValidHeight(rect.height) - value*yPixelGap;
12 currentPoint = new Point2D.Double(x,y);
13 if(lastPoint != null){
14 Line2D line = new Line2D.Double(lastPoint,currentPoint);
15 g2d.draw(line);
16 }
17 Shape shape = new Rectangle2D.Double(x-2, y-2,4,4);
18 g2d.fill(shape);
19 g2d.drawString(formatLineValue(value), ((Double)x).floatValue(), ((Double)y).floatValue());
20 lastPoint = currentPoint;
21 }
22 }
23 }
paint方法中主要是通过获取Bar Chart的背景大小，来计算出x轴刻度的间隙和Y轴像素的间隙，这样在绘制Line Chart上每个值的具体坐标时就比较容易了。其中我们还定义了Data这样一个实体bean，用于存放line chart上显示的数值，主要给出了line chart每条线的颜色和粗细以及具体的值这些参数，我们可以根据实际需求加上自己所需的参数，比如是否显示lineChart上的值，值的颜色，字体，大小，当然还可以实现双Y坐标轴，在右方draw出lineChart的坐标轴等。
最后给出上图实现效果的具体代码：
lineAndBarChart