Web图形解决方案

Web 项目开发过程中,我们常常会使用到各类图形,如流程图，饼图，甘特图，散列图，趋势图等等，然而在浏览器中绘制这些图形却存在着一定的困难,本文就是针对这些问题，提供一些可供参考的解决方案。

Web 图表一般有以下几种做法：
1.使用客户端控件技术
2.使用服务器端生成图片
3.使用富客户端技术

[b]使用客户端控件技术[/b]
应用微软的ActiveX 控件以及Java的applet技术对图形的支持来显示一个图表 。
这种方式显然对于客户端要求太高，插件的开发相对麻烦,随着现在主流浏览器放弃对控件的支持后，这种方式只适合一些局域网的应用，而对于因特网的环境就显得不太适合。被我们所放弃。

[b]使用服务器端生成图片[/b]
直接在web服务器端生成好图表图片文件后发送给浏览器。

图片技术(JfreeChart)

[img]http://i5tt.com/blog/uploads/200905/08_135338_1.jpg[/img]

由于浏览器绘制图形存在一定困难, 所以在服务端动态生成图片是一种较好的解决方案。
JFreeChart是JAVA平台上的一个开放的图表绘制类库。可以绘制多种图表，并且可以产生PNG和JPEG格式的输出，基本能够解决目前的图形方面的需求。

优点: 纯JAVA代码编写,服务端生成图形,减轻客户端负担。
缺点: Web 应用时,特别是动态生成图片,会产生大量的冗余图片数据。

[b]使用富客户端技术[/b]
根据服务器返回数据在浏览器端绘制图表，一般有以下几种方案：

[b]VML技术[/b]
[img]http://i5tt.com/blog/uploads/200905/08_135435_2.jpg[/img]
VML相当于IE里面的画笔，能实现你所想要的图形，而且结合脚本，可以让图形产生动态的效果。VML是微软1999年9月附带IE5。0发布的 VML其实是Word和HTML结合的产物。微软把Word里面的图形控件结合到IE里面，使IE也具备了绘图功能。
优点: 基于XML标准，支持高质量的矢量图形显示。 结合脚本,可以让图形产生动态的效果
缺点: 只能在IE浏览器或以IE为内核的浏览器才能用VML。

[b]SVG 技术[/b]
[img]http://i5tt.com/blog/uploads/200905/08_135455_3.jpg[/img]
SVG(可放缩的矢量图形)是W3C在2000年8月制定的一种新的二维矢量图形格式，
优点: 基于XML标准，采用文本来描述对象，具有交互X和动态X, 完全支持DOM
缺点: IE则依赖Adobe Systems的一款插件支持SVG。用户必须下载、安装这款插件才能够在IE中显示SVG格式图像。

[b]Flash 技术 （Open Flash Chart）[/b]
[img]http://i5tt.com/blog/uploads/200905/08_135530_4.jpg[/img]
Open Flash Chart 是一个 Flash 图表组件，很容易安装，提供以下语言的API： PHP, Perl, Python, Java, Ruby on Rails, and 。Net 来控制图表。
优点: 图形效果好,根据服务器数据生成相应的图形,可以适当编写事件处理。
缺点: 需要Flash插件支持,绘制特定的图形需要专业的flash技术支持。

[b]Canvas 技术（Flotr）[/b]
[img]http://i5tt.com/blog/uploads/200905/08_135547_5.jpg[/img]
<canvas>是一个新的HTML元素，这个元素可以被Script语言(通常是JavaScript)用来绘制图形。例如可以用它来画图、合成图象、或做简单的(和不那么简单的)动画。
<canvas>最先在苹果公司(Apple)的Mac OS X Dashboard上被引入，而后被应用于Safari。基于Gecko1。8的浏览器， Firefox 1。5，也支持这个新元素。元素<canvas>是WhatWG Web applications 1。0也就是大家都知道的HTML 5标准规范的一部分

优点: 基于标准规范,灵活绘制各类图形。
缺点: IE需要使用canvas.js 类支持图形的扩展。

[b]JavaScript图形库技术 （jsgraphics）[/b]
[img]http://i5tt.com/blog/uploads/200905/08_135602_6.jpg[/img]
JavaScript图形库可在网页上动态绘制圆、椭圆、斜线、折线、多边形（包括三角形、矩形）。底层通过创建大量1px*1px的DIV实现，同时对于连续的像素进行了优化，尽量地减少所需的DIV，因此有较好的性能，当然和Java2D、GDI+、OpenGL、DirectX、Flash、SVG、VML及HTML Canvas是无法相比较的。

优点: 使用 Web 的基本技术实现图形化,不需要任何的扩展或者支持。
缺点: 图形非矢量，曲线情况下平滑度不够，图形较多时性能存在一定的问题。

针对上面的提供各类方案的优缺点,以及现有掌握的技术，本人选择了 Canvas 技术，作为目前Web图形的解决方案。