web画图技术（svg、canvas、fusioncharts、anychart）简介(2)_H5之家

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

Canvas代码示例： <!DOCTYPE HTML> <html> <body> <canvas id="myCanvas"></canvas> <script type="text/javascript"> var canvas=document.getElementById('myCanvas'); var ctx=canvas.getContext('2d'); ctx.fillStyle='#FF0000'; ctx.fillRect(0,0,80,100); </script> </body> </html>

4.3 FusionCharts

定义

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

历史

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

注：

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

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

3、最新版本v3；

fusioncharts代码示例：

<!DOCTYPE HTML> <html> <body onload="init();"> <div id="chartContainer"></div> <script src="FusionCharts.js" type="text/javascript"></script> <script type="text/javascript"> function init() { var chart = new FusionCharts("Column3D.swf", "myChartId", "500", "300"); chart.setDataURL("date.xml"); chart.render("chartContainer"); } </script> </body> </html>

date.xml
<graph caption='每月销售额柱形图'> 　　 <set value='462' color='AFD8F8' /> </graph>

4.4 AnyChart

定义

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

历史

成立于2003年；

注：

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

anychart代码示例：

<!DOCTYPE HTML> <html> <head> <script src="AnyChart.js" type="text/javascript"></script> </head> <body> <script type="text/javascript" language="javascript"> //<![CDATA[ var chart = new AnyChart("AnyChart.swf"); chart.width = 700; chart.height = 300; chart.setXMLFile("anychart.xml"); chart.write(); //]]> </script> </body> </html>
anychart.xml <?xml version="1.0" encoding="UTF-8"?> <anychart> <charts> <chart plot_type="CategorizedHorizontal"> <data> <series name="Year 2003" type="Bar"> <point y="63" /> </series> </data> <chart_settings> <title> <text>Sales of ACME Corp.</text> </title> </chart_settings> </chart> </charts> </anychart>

各方式的差异 5.1 SVG vs Canvas

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

Canvas

SVG

注：

信息来源w3school网站。

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

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

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

弱文本渲染能力？

这样就降低了渲染速度。

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、可滚动可缩放：新版的已支持触摸屏。

web

图表出现异常时会迅速启动故障识别。

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

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