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

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

 

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

• JavaScript绘图简易类库

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

• VML (Vector Markup Language) 矢量标记语言

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

 

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

• SGV (Scalable Vector Graphics) 可伸缩向量图形技术

        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  

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

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

• Canvas W3C主导的Html 5 Canvas绘图接口技术

       <canvas> 标记由 Apple 在 Safari 1.3 Web 浏览器中引入。对 HTML 的这一根本扩展的原因是Apple 希望有一种方式在 Dashboard 中支持脚本化的图形。

       Firefox 1.5 和 Opera 9 都跟随了 Safari 的设计，这两个浏览器都支持 <canvas> 标记。

目前在IE 还没有正式支持 <canvas> 标记，但我们只需要需要引入一个Google开发的excanvas.js扩展Js类库，或者从这里下载http://excanvas.sourceforge.net ；或者使用另外一个扩展脚本http://html5shiv.googlecode.com/svn/trunk/html5.js 开发者就可以在IE下应用Canvas接口了。

       Canvas当前仍然以2D图形为主，后期可能会引入OpenGL ES做为3D图形接口；对于canvas技术规范的描述可以参考以下网站

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 SWF Adobe公司提出的RAI交互客户端图形技术

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的原因；另外其主题多，动画炫，交互性好，响应速度也快。

 

• Sliverlight

        MS公司推出与Flash具有类似功能的RIA交互客户端技术，市场占有率不高。Visifire 是一个基于SilverLight的有限开源Chart组件。

http://www.visifire.com/silverlight_3d_column_charts_gallery.php

• Web图形技术选型总结

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

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

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