用TWaver实现组合的Chart

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