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的坐标轴等。
最后给出上图实现效果的具体代码:
相关推荐
TWaver是基于WebGL3D一个框架,可以使用其框架进行web3d的开发,这里贴上官方的一个小案例,可以参照使用。
twaver示例可直接放到jetty下运行,含twaver.js alarm.html资源。
使用TWaver前,需熟悉几个基本概念:图元(Element)、容器(DataBox)和画布(Network)。 图元:图形中的各种基本元素,如节点(Node)、连线(Link)等; 容器:图元都统一放置在一个容器(DataBox)中进行管理...
最新的TWaver可视化学习开发包,用TWaver做出更炫更美的界面。
TWaver-flex的库TWaver.swc
TWaver是美国Serva Software公司的产品,是应用最为广泛的电信专业图形界面开发工具包,在电信行业应用非常广泛。TWaver关注于数据的图形展示,它是面向开发人员的,需要进行二次开发。 TWaver的图形组件库中提供了...
twaver for flex 开发手册
twaver-java-3.7 文档
自己整理的关于Twaver组件在Flex中的使用,不对的地方忘多提意见
Twaver学习案例的例子
有下的可以弄弄 电信行业基本都用 TWAVER.SWC
twaver web结合extjs源码学习资料
Twaver java开发帮助文档,英文版的。
是twaver学习的最佳资料,大家快来下巴
TWaver-java的库TWaver.jar
twaver-flex-3.6.5 官方demo
TWAVER FLEX 使用手册 用户画拓扑图
很好的twaver教程。包含demo,各种图形,极好的电信客户端
Twaver java 最新版本开发指导