江右东流

关于

JSChart

[ 有道  Javascript  Chart  前端  ]

15 Dec 2006

网易的搜索“有道”终于也出现,包含了网页和博客搜索。昨天夜里上去看的时候,其“博客档案”页的几个图表颇为有趣。今天白天无意中想在图表上点右键时,才发现原来图表并不是图像文件。莫非是Flash的?看看却又不是,于是把页面存下来了仔细查看,在页面代码最后的地方发现了一个Chart.js的引用。

本地打开后,Chart.js的首行赫然有着Dojo字样,想起前段时间Dojo的新版确实带了一个Chart Engine,不过我并未发现有画饼图的方法,难道是有道自己扩展了?再看下面几行,有些晕乎乎的,因为我看到了“MochiKit”。基于MochiKit确实是有一个JS Chart的,PlotKit。恩,再看看代码,看来这下对了,果然是PlotKit。网易似乎对PlotKit做了一些扩展,包括Render()的Option参数增加了barWidth属性,以控制柱状图的宽度;修改了饼状图的Ticks显示等。

不过可惜的是有道似乎没有完全发挥PlotKit的性能,众所周知,现有的JS Chart无非是Canvas或者SVG实现。而IE本身是不支持这两种的任何一种的,对于Canvas,有一个js的不完全实现版本,变相的让IE支持了Canvas;对于SVG,可以通过安装Adobe的组件来实现支持。PlotKit使用excanvas.js来实现IE对Canvas的支持,使得在IE上也能看到JS Chart创建的图表。不过有道的这个Chart.js生成的图表却只能在Firefox上看到,IE下无法生成,为了解决这个问题有道又使用了VML来生成了一遍图表,这产生了大量的垃圾代码。

我不知道有道使用JS Chart来创建图表的用意。不过对于更新相对频繁的博客的博客档案图表来说,似乎动态创建图像图表有些占用系统资源。而使用JS Chart的确不失为一种好的解决方案,要是js实现文件再小一点就好了,我个人在本地使用未经优化精简的MochiKit + PlotKit实现类似的图表时,js文件就有200多K,呵呵,希望JS编译时代早点来临吧。

列出一些我所知道的JS Chart供大家参考:

  1. Dojo,很强大,支持IE、FF、Opera等主流浏览器,不过似乎无法绘制饼图。
  2. 基于MochiKit的Plotkit,文档相对易懂,功能也不错,支持主流浏览器,支持常见的图表。
  3. webfx的Chart组件,是excanvas.js的作者的作品,功能也不错的,IE是自然支持的,不过似乎也不支持饼图。