用TWaver实现组合的Chart
TWaver组件中提供了一些通用的Chart,比如Line Chart,Bar Chart,Bubble Chart,Percent Chart等,对于一些复杂的Chart我们也可以通过定制的方式来实现,如前面所给出的用swing制作精美ERP图表,仔细看来这些Chart都是单个图,有客户要实现多个Chart的整合,比如Line Chart和Bar Chart组合显示,这改如何来实现?通常我们想到的方式是通过叠加来显示,将TWaver的这两个组件叠加起来,但这会带来很多不必要的麻烦,下面我们通过定制Chart的方式来实现,先看看最终的实现效果:
![](http://twaver.servasoft.com/wp-content/uploads/2013/01/weather.png)
这个图展示的是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
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 }
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