Chart (WebFX) 的 jsgraphics 版本

原创作品,转载请注明出处。 上个月在 WebFX 上看到 Emil A Eklund 写了一个非常棒的 Chart 组件,这个组件棒就棒在它提供了一个 AbstractChartPainter 的抽象类,然后用 Canvas 技术实现了一个 CanvasChartPainter 类,用 SVG 技术实现了另一个 SVGChartPainter 类,只要在使用 Chart 类的实例绘制图表前,用setPainterFactory 方法来指定一个 PainterFactory,就可以用指定的 Painter 实现来进行绘图表了。 但是这个 Chart 组件中所实现的两个 ChartPainter 类所使用的技术过于前卫,因此只有最新的浏览器才支持。用 Canvas 实现的 Painter,只能在 Mozilla Firefox 1.5+ 和 Opera 9+ 上完美运行,在 IE 6.0 上通过 Emil A Eklund 编写的 IECanvas 也能够勉强运行,但因为 iecanvas.htc 加载速度慢的原因,常常会因为没有加载完就开始执行后面的代码而出现错误。而对于较低版本的浏览器和其它尚未支持 Canvas 的浏览器来说就不能执行了。而另一个 SVG 实现的 Painter,能够执行的浏览器则更少。 为了支持更多的浏览器,我找到了 High Performance JavaScript Vector Graphics Library 这个好东西,这个东西的跨平台和跨浏览器性能相当好,但是这里我们要用它来做 Chart 组件的 ChartPainter 类的话,需要用它的在页面完全调入后画入 DIV 元素的方式来创建对象,因此在 Netscape 4 和 Opera < 7 的版本上不能运行,但是目前大部分浏览器还是都支持的。因此我用它实现了一个 JsGraphicsChartPainter 类,有了它,现在 Chart 组件可以在目前几乎所有的浏览器上都可以使用了。 另外,为了兼容更老版本的浏览器,我将 chart.js 也作了修改。取消了数组 push 方法的调用,用其他方式来实现相同的功能。去掉了加载延时处理代码,这段代码主要是为避免 IECanvas 加载不完而出错设计的,但是这个设计本身不完善,还是无法避免这个问题,而且导致 IE 上显示速度变慢,因此去掉了。我认为 IE 上没必要使用 IECanvas,用 JsGraphics 适用范围更广。并且根据浏览器来判断初始化时该加载 CanvasChartPainter 还是 JsGraphicsChartPainter 。 点击此处下载该程序。 下面是演示实例,你也可以点击此处观看单独的演示程序。

堆叠区域图,线状图和棒状图

一个带有完整标签和图例的堆叠区域图,同时包含了一个线状图和两个棒状图。

较小的堆叠区域图和线状图

上面图表的较小版本,去掉了柱状图,同时减小了栅格密度。

线状图

没有图例的线状图。

棒状图

没有图例和标签的棒状图。
原创作品,转载请注明出处。

标签: JavaScript

« 上一篇 | 下一篇 »

只显示10条记录相关文章

发表评论

评论 (必须):