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