用TWaver实现组合的Chart

阅读更多

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

 

 

 

你可能感兴趣的:(Bar,Chart,Line,Chart,曲线图,柱状图,组合图)