Web 下的绘图技术体系和常见Ajax Chart插件
Web 下的绘图技术体系和常见Ajax Chart插件

因公司的项目需要在Web下做柱状图和折线图，所以花了些时间研究了下目前2010年12月前主流的Web绘图技术和开源的Ajax Chart插件。为了方便自己以后查找，特别整理成篇，以便自己和同道参考。

?

??? 总的来说Web下的绘图技术体系发展相对于C/S类应用程序还不够成熟，对于Web的图形开发者来讲需要，在应用方面的往往需要考虑很多兼容问题。下面先看一下Web绘图的技术体系。

JavaScript绘图简易类库

????? 广大的JavaScript爱好者模拟其他计算机语言的图形技术和基本算法在Html上绘制图形的一种方法。例如把Html基本元素，比如<div>缩成一个像素点，而后用基本算法模拟绘出点、线、矩形等其他图形，感觉绘制简单的点线，柱状图还勉强凑和，但对付复杂的图形时，有占用字节过多的缺点，美观性易用性也不好控制，实用性不够好，没有形成技术标准。

???? 由MS推出，VML支持广泛的矢量图形特征，它基于由相连接的直线和曲线描述路径。VML中主要使用两个基本的元素：shape和group。这两个元素定义了VML 的全部结构；shape描述一个矢量图形元素，而group用来将这些图形结合起来，这样它们可以作为一个整体进行处理。

?

???? 目前只有IE5以上浏览器对VML支持较好，Firefox浏览器不支持VML。网上比较全面而且详细VML教程是《VML极道教程》这里有个转载；本站的《雪豹VML教程》也不错。

??????? SVG是XML来描述二维图形的语言。SVG可以构造3种类型的图形对象：矢量图形、位图图象和文字。图形对象可被组化、样式化、变形和重组，包括图象嵌套、变形处理、剪辑路径、Alpha蒙板、滤镜特效和模板对象。

?

对SGV支持很好，目前微软已经参加了SVG小组，但IE还没有宣称对SGV进行支持。IE下需要下载专门的SVG插件才能显示SVG图形。安装Adobe SVG Viewer插件的地址：http://www.adobe.com/svg/viewer/install/

?????? Firefox

????????????? http://www.chinasvg.com/ 网站上对SGV的应用有全面且系统的介绍。

VML和SVG结合应用 SVG-VML-3D 1.3 Lib

????? 在SVG和VML的基础上，有人结合两者特点封装开发了在Html页面上操作3D对象的类库，出发点不错，但目前还没有看到比较广泛的应用。

类库发布地址：http://www.lutanho.net/svgvml3d/index.html

Prototype Graphic Framework

??????? Prototype对SVG和VML进行了二次封装，形成了一套html上作图的框架，易用性不错，可以参考以下网址：http://prototype-graphic.xilinus.com/ ；

????? 从该类库提供的例子可以看到各种技术的绘图速度，

????? 测试网址：http://prototype-graphic.xilinus.com/samples/shape.html??

?
SGV的绘图速度是最快的；Canvas速度第二，这里对Canvas的处理可能有问题，首次绘图速度较快，每刷新一次，时间消耗显示增加了一倍，估计是刷新处理不当造成的；VML速度第三；

??????????????? 速度方面估计和浏览器对JavaScript的支持也有一定关系。

1）? http://www.w3school.com.cn/html5/html5_canvas.asp

2）? https://developer.mozilla.org/cn/Canvas_tutorial

3）? http://kb.operachina.com/node/190

Flash升级为Flex后，开发者可以通过AS脚本开发出交互富客户交互界面，用户体验性极好，对其他语言有丰富的接口支持。但它有个缺点笔者不太喜欢，就是占用浏览器资源比较多，初始化过程较慢。

以Flash为基础的Chart插件：

1）? Open-Flash-Chart???
http://teethgrinder.co.uk/open-flash-chart/
http://teethgrinder.co.uk/open-flash-chart-2/

????? 所有作图都以open-flash-chart.swf为基础，通过调用不同的Json格式文件的配置数据及显示图形，美观，交互性好，加载稍慢，图形主题需要自己配置；

2）? Fusion Chart Free 其最新版宣布支持html5
http://www.fusioncharts.com/
????? 不同类型的图形有不同的swf文件，使用Xml作为数据配置文件显示图形，多swf文件可能是其速度快于OFC的原因；另外其主题多，动画炫，交互性好，响应速度也快。

?

如果你要自己尝试开发Web Ajax Chart， 笔者推荐SVG和canvas，一是可以做到多浏览器兼容，二是速度较快，三是技术标准开放；Vml兼容性不广，不考虑也罢。

对于Flex和Sliverlight，我个人更倾向于Flex，从市场占有率来讲Flash更流行，大家更习惯于接受Flash。

以上仅仅是一家之言，对Web前端图形认识也很有限，仅供大家参考吧。

?