web画图技术（svg、canvas、fusioncharts、anychart）简介

前言

       如题，此处主要讨论网页上实现画图的技术，像java的swing，.net的chart不在今天的讨论范围。

       下文中所有代码，在chrome 29.0测试通过。

        代码下载：http://download.csdn.net/detail/daxiang12092205/6496059

讲啥

•SVG简介

•主流的画图方式？

•各方式之间的差异？

SVG

3.1 SVG简介

  定义

ScalableVector Graphics，可伸缩矢量图形；
它是使用 XML来描述二维图形和绘图程序的语言；

它是一种与分辨率无关的矢量图形格式；

  历史

SVG于2003年1月14日成为W3C推荐标准。

注：

1、XML，它遵循严格的XML格式定义，如在svg文件头部xml版本定义及编码定义代码上方加空行，浏览器访问时报错，提示xml定义必须在文档首部。

二维图形：svg更适合于处理平面图形。

绘图程序：建筑图，工程图，电路图，放大而不失真，这个应用是它最大的优势。是其它几种画图方式无法取代的。

2、来历，2000年的时候，网页上显示图形没有统一的标准，各个厂家的协议互不兼容，在这种情况下W3C就发起建立图像显示的标准，参加的公司有许多，包括一些大公司，比如SUN、Adobe、苹果。经过几年的努力，2011年9月，1.0版，2013年1月，1.1版，该版本正式被确立为标准。最新的是SVG2.0，草稿在今年6月份已经发布。

3、它是一个开放的标准，不仅仅是一个标签或者语言或者API，这些都是它的子集。

开放，即自由、免费地使用，与flash不同，flash是私有技术。

矢量，有大小、方向，位图，仅有大小。

位图与矢量图比较：

注：

简要说明位图、矢量的区别。

这张图片展示了位图和矢量图的区别。位图是由点构成的，矢量图则是由一些形状元素构成。

放大位图可以看到点，而放大矢量图看到的仍然是形状。演示svg illustrate效果。

3.2 为什么要用SVG

SVG代码示例：

分辨率无关；

基于DOM节点的API；

无须必要的HTTP请求；

注：

1、 SVG实现不管什么大小的屏幕，缩放比例或着分辨率，都不影响图形的质量。直到SVG出现之前，我们只能通过CSS和文本渲染看到清晰的元素样式。在SVG里我们可以创建各种矢量形状。

下图是它的代码，无论屏幕分辨率是多少，只要向客户端传递这些文本就可以了，比image方式节省流量。过渡到第三点。

2、每个img，都是一个需要请求的文件。如果图像用一组DOM节点来代替，可以减少额外的HTTP请求，使你的网站速度更快，对用户更加友好。一部分图表型网站，如股票、基金，采用此方案。

3、svg里每个元素都是一个对象，是DOM树的一个节点，对于其它标签通用的属性或事件，对svg包含的标签同样适用。

4、其它优点，简单交互脚本，与第二点相关，可以用JavaScript进行交互，控制某个元素的样式等。D3.js、Raphael.js库辅助。

3.3 如何入门

主流的画图方式

4.1 画图方式

    SVG、Canvas、Fusioncharts、Anychart

注：

1、web画图主要可以分为两类：

Flash：

    Fusion Charts：让数据亮瞎你的眼睛；

    AnyCharts：跨平台的数据可视化解决方案，6.0以前，flash+js，最新的6.0版加入svg，实现支持html5，flash+svg；

Html5：

    canvas：html5新标签；svg：html老标签；

下面四个都是采用flash+js技术，fusioncharts，anychart收费，open flash chart开源且免费，有2个java版的api，其中一个是中国人写的。

JFreeChart是JAVA平台上的一个开放的图表绘制类库。

4.2 Canvas

  定义

 是一个标签，用来定义图形；

 只是一个图形容器，必须使用脚本绘制图形；

  历史

 Apple公司为了客户端矢量图形而设计；

 Safari中绘图能力为Dashboard组件所用；

注：

1、canvas帆布、画布之意；

2、定义中的第二点大大限制了它的受欢迎程度；

3、对HTML扩展的根本原因在于，HTML 在Safari 中的绘图能力也为 Mac OS X 桌面的Dashboard 组件所使用，并且Apple希望有一种方式在Dashboard 中支持脚本化的图形。

4、canvas标记最早出现在Safari1.3中，后来Firefox 1.5 和Opera 9也开始支持，目前canvas已经成为HTML5中一个正式的标签。

 Canvas代码示例：

4.3 FusionCharts

  定义

跨平台、跨浏览器的flash图表组件解决方案；

  历史

InfoSoft Global公司的一个产品，2002年发布第一个版本；

注：

1、fusion是融合的意思，chart是图表，图表融合组件；

2、InfoSoft公司是专业的flash图形方案提供商；

3、最新版本v3；

fusioncharts代码示例：

date.xml

4.4 AnyChart

 定义

跨平台、跨浏览器的，基于flash/js的图表控件；

 历史

    成立于2003年；

注：

1、最新的版本6.0支持svg，所以可以理解为它是flash、js、svg多门技术的应用；

anychart代码示例：

anychart.xml

各方式的差异

5.1 SVG vs Canvas

下表列出了 canvas 与 SVG 之间的一些不同之处。

Canvas

• 依赖分辨率
• 不支持事件处理器
• 弱的文本渲染能力
• 能够以 .png 或 .jpg 格式保存结果图像
• 最适合图像密集型的游戏，其中的许多对象会被频繁重绘

SVG

• 不依赖分辨率
• 支持事件处理器
• 最适合带有大型渲染区域的应用程序（比如谷歌地图）
• 复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
• 不适合游戏应用

注：

信息来源w3school网站。

1、2、依赖分辨率，换种说明就是不支持可伸缩性。canvas交互基于鼠标坐标，svg交互基于对象。

前两点使用canvas2.html进行演示。

3、显示文本，(100,100)，canvas为文本左下角坐标，svg为文本正中间的坐标。

弱文本渲染能力？

4、svg支持格式较多，矢量图形，支持png，jpg，bmp，用一些工具甚至可以保存为svg格式的图片，如adobe illustrator。

Svg里每个元素被视为一个对象，是dom的一个节点，复杂度高意味着对dom节点进行频繁的操作，节点属性变化时，浏览器默认会重绘节点，

这样就降低了渲染速度。

通过word-wap.svg进行演示。

5、由第4点导致。且不适合进行大数据量的处理，如有1百万个点坐标，在界面上画出这些点。它的渲染速度不是很快。

5.2 SVG or Canvas

 

注：

1、SVG和canvas都能实现几乎相同的结果，功能也完全重复。

2、高保真度的复杂向量文档已经成为并将继续成为SVG 的最强大的功能。两个原因：保存足够多的详细的文档，提供从数据库生成形状的能力。

如 建筑图、电子图、地图。

3、CanvasAPI 允许开发人员读写像素，这里唯一的限制是速度和想象力。如图像处理，先进行像素扫描，图像二值化。

4、图表和图形需要矢量图，Canvas或SVG 都可以使用。但是，由于 SVG固有的功能，它常常是更好的选择。

5.3 FusionCharts vs AnyChart

 相同点：

flash图表组件，跨平台、跨浏览器，丰富的图表类型，支持html5，界面交互性、美观性，功能，详尽的文档和代码示例。

 不同点：

FusionCharts专门为Python,GWT 等平台开发了插件；

FusionCharts 支持可滚动可缩放的图表；

AnyChart优势：xml接口驱动完成图表自定义；

AnyChart优势：采用ActionScript 3.0编译；

 总结：

   两者在图表的丰富性和样式美观性上不相上下，在功能上，FusionCharts更丰富一些，当然价格更贵。

注：

1、功能，相似。图表类型：柱形图、饼图、气泡图、雷达图。自定义显示方式和图表样式。

2、可滚动可缩放：新版的已支持触摸屏。

3、GWT，google web工具包，使用java语言编写ajax前端，编译为优化的js。可以用它来创建UI组件，在项目中使用。重量级的工具包。

4、ajax无刷新切换图标类型，调试模式：图表出现异常时会迅速启动故障识别。

5、AnyChart，它由XML接口驱动完成图表自定义，无需修改任何Flash数据源。可以手动创建XML文件，也可以使用AnyChart自带的向导工具。

6、ActionScript是针对AdobeFlash Player而设计的一门编程语言，与javascript相似，它在 Flash内容和应用程序中实现了交互性、数据处理以及其它许多功能。

7、ActionScript与flash关系：AS就是制作flash中，添加高级动画或者是交互所用的语言。如按钮，游戏，交互。

5.4 FusionCharts or AnyChart？

 入门时间：均易上手；

 开发文档与资源：中文学习资料两者相差不大，且均拥有庞大的用户群；

 购买价格：企业版，FusionCharts 5万，AnyChart 3万，2012年8月数据；

注：

1、足够多的详细的文档，提供从数据库生成形状的能力。

2、从咱们公司看，目前基本都是使用FusionCharts。

3、FusionCharts提供源代码，AnyChart不提供，这点对国外公司可能有影响，但是对国内的公司，应该是没有影响的。大家都从网上下载了，很少有人愿意花几万人民币买几个js或swf文件。

小结

 Canvas：像素操作，数据量较大；

 SVG：清晰度，矢量图形，个人研究；

 FusionCharts：更多平台兼容，滚动及缩放;

 AnyChart：xml文件，复杂flash效果;

注：

立体效果，可参考css3实现，举例。http://www.forehack.com/3d-css-cube/