用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里，我们来看看具体的代码实现：

 

public void paintChart(Graphics2D g2d, int width, int height) {
	super.paintChart(g2d, width, height);
	Rectangle rect = this.getBackgroundBounds();
	double xScaleGap = rect.getWidth()/(xScaleCount*2+1);
	double yPixelGap = this.toValidHeight(rect.getHeight())/ this.lineRange;
	for(int i = 0; i< lineDatas.size(); i++){
		Data data = (Data)lineDatas.get(i);
		paintData(g2d,data,rect,xScaleGap,yPixelGap);
	}
}

 

private void paintData(Graphics2D g2d,Data data,Rectangle rect,double xScaleGap, double yPixelGap){
		List dataValues = data.getValues();
		Point2D lastPoint = null;
		Point2D currentPoint = null;
		g2d.setColor(data.getColor());
		g2d.setStroke(new BasicStroke(data.getLineWidth()));
		if(dataValues != null && dataValues.size() >0){
			for(int i=0 ;i < xScaleCount; i++){
				double value = ((Double) dataValues.get(i)).doubleValue();
				double x = rect.getX() - this.shadowOffset + xScaleGap * (2*(i+1)-0.5);
				double y = rect.getY() + this.toValidHeight(rect.height) - value*yPixelGap;
				currentPoint = new Point2D.Double(x,y);
				if(lastPoint != null){
					Line2D line = new Line2D.Double(lastPoint,currentPoint);
					g2d.draw(line);
				}
				Shape shape = new Rectangle2D.Double(x-2, y-2,4,4);
				g2d.fill(shape);
				g2d.drawString(formatLineValue(value), ((Double)x).floatValue(), ((Double)y).floatValue());
				lastPoint = currentPoint;
			}
		}
	}

 

paint方法中主要是通过获取Bar Chart的背景大小，来计算出x轴刻度的间隙和Y轴像素的间隙，这样在绘制Line Chart上每个值的具体坐标时就比较容易了。其中我们还定义了Data这样一个实体bean，用于存放line chart上显示的数值，主要给出了line chart每条线的颜色和粗细以及具体的值这些参数，我们可以根据实际需求加上自己所需的参数，比如是否显示lineChart上的值，值的颜色，字体，大小，当然还可以实现双Y坐标轴，在右方draw出lineChart的坐标轴等。

 

最后给出上图实现效果的具体代码：

lineAndBarChart