我涉及的数据可视化的实现技术和工具_H5之家 - 中国HTML5教程资源分享第一站

最近一直在研究数据可视化的相关理论和实现方案，相关实现技术和工具也了解使用了不少，需要写篇综述性的文章做整理。由于本人之前主要是做web开发的，故而我所找到的数据可视化的实现技术和工具大部分都是基于web的。这很正常，因为web便于分享和查看，如无意外我们都希望用浏览器直接访问可视化作品。这篇文章主要记录我使用心得。

1. HTML5 canvas

乔教主去世的前后两年，HTML5非常火，在乔教主的指引下，HTML5仿佛是未来的明灯，将一统移动端和桌面的浏览器，甚至制造各种原生应用，似乎开个web相关会议不谈谈HTML5大方向就落伍了。但是到了2013年，HTML5的话题一下子沉寂了下来，仿佛之前的热闹都是假象——事实上这是因为这个东西已经从未来变成的现实，一个新技术进入了平稳发展期，自然没必要像宣传普及期那么大张旗鼓了。

HTML5标准主要是给给浏览器厂商看的，就是要让浏览器支持从调用摄像头到3d绘图等一系列功能，通过统一标准来减轻web开发者的负担。不过HTML5推进过程也不像原来想象得那么顺利。HTML5遇到的最大问题是浏览器兼容性，标准不断地补充修改，但是并非所有浏览器都能使用。造成这种现状的原因有二，一方面有浏览器厂商因为利益原因大打出手（例如google反对h.264导致video标签难产），一方面有个别浏览器厂商不求上进半天不支持主要标准（微软现在也着急了，IE12已经迎头赶上了）。

从2010年末起我就开始接触使用HTML5相关的新技术。而用的最多的就是绘图相关的canvas标签。canvas标签的浏览器兼容性比较好。根据最新的统计（百度统计|流量研究院）。国内还在使用IE6的用户已经接近10%。

<canvas></canvas>是html5出现的新标签，像所有的dom对象一样它有自己本身的属性、方法和事件。使用canvas的基本方式是，使用js调用canvas的API绘图。例如，绘制一段贝塞尔曲线，需要用写这样一段javascript来生成：

function draw24(id) { var canvas = document.getElementById(id); if (canvas == null) { return false; } var context = canvas.getContext("2d"); //获取convas 2d对象，其中封装了很多绘图方法（现在canvas只有2D对象可以调用） context.moveTo(50, 50); //移动绘图中心点 context.bezierCurveTo(50, 50,150, 50, 150, 150); //绘制贝塞尔曲线 context.stroke(); //绘制边框 context.quadraticCurveTo(150, 250, 250, 250); //绘制2次样条曲线 context.stroke(); //绘制边框 }

最后绘制的结果如下图所示：

绘制曲线，这个例子摘自《玩转html5 canvas画图》

但是实际使用的时候我们通常不需要这样直接调用API。如同原生的javascript API很繁琐，调用起来比较麻烦，于是有很多JS库（如jquery等）将其封装以方便使用，HTML5 canvas也有相应的JS库。我用过并感觉不错的有如下一些：

此外，我使用过但是感觉很糟糕的有：

dataV.js, 此乃浙大CAD&CG国家重点实验室可视化与可视分析小组和阿里集团数据产品部门合作开发的开源可视化组件库。我2012年初就关注并试用了。当时我兴致勃勃地从github上下载了源码，企图用在自己的项目中。谁知第一个测试demo就各种出错，我查了半天，竟然发现原始demo里就有错误，bug出在类库的源码里，而且不止一个官方demo有错误。这个类库口号响亮令人震惊，但更新速度之缓慢令人震惊，文档不全也令人震惊。为此我不得不替换成RGraph.js。现在已经过了两年了，我回到他们的官网，发现两年来官网就没怎么更新过！唯一的区别恐怕是原来官网上的几个例子的链接还失效了（想当初我可是把他们的例子、文章全部点击查看过）......从实用性上讲，跟现在百度新推出的Echart类库相比，2年前的datav.js弱爆了。而且官网长期不更新也让我很难对现在的它抱有信任。

这里有一篇翻译文章《知名html5 canvas库对比》，比较了github上更多的此种类库。有需要的朋友可以再到里面去看看。

最后再说说canvas这个技术本身的优缺点：

缺点：

只能绘制2D图像，暂时不支持3D图像。

canvas绘制图形出并非可以直接操作的dom对象。如果要对其进行类似dom的操作，例如添加属性等等，比较麻烦（这就是为什么必须使用类库）。

优点：

由于canvas绘图不会给每个点生成对象，所以绘制速度快，消耗内存少。（这点主要是相对于SVG，VML技术而言）

兼容性较好。除了IE6，其他浏览器都可以支持。（IE7，8需要载入扩展JS，终究还是能用的）

2. SVG

关于SVG技术，在w3c的定义如下：

由于矢量图形技术的优越性（图像在放大或改变尺寸的情况下其图形质量不会有所损失,便于操作和编辑），因而将其应用于网络成了板上钉钉的事情。SVG标准很早就出现了，2003年初就成为了W3C标准。但是，它的普及花费了很长时间，其中主要原因就在于微软。由于2000年依赖微软取得了在浏览器市场的垄断地位，为了保持这种优势，微软有意地在IE系列中维持着一大批微软标准，而无视w3c。当然对于当时的微软来说它有这个底气。本着垄断的天性，微软于微软1999年9月附带IE5.0一起发布了VML矢量图形标记标准，有些人认为VML就是IE里的画笔。VML其实是Word和HTML结合的产物，也是用XML词表来定义。但是VML本质是word里图形程序在IE上的迁移，不仅不开源，而且操作复杂，效率低。令人遗憾的是在IE长达10年的垄断中一直只支持VM。IE6，7，8都不支持SVG，直到IE9才支持SVG。而现在，丧失浏览器垄断地位的微软终于认清现实，VML是已经过时的技术，在IE10中不予支持。详见微软的申明。

SVG最大的优点就是绘制和控制简单。直接在html页面里加入xml语句就可以编辑绘制。例如下面的代码就是画一个圆、一个椭圆和一道黑线，把这段代码另存为一个html文档再用谷歌浏览器打开就能看到效果了：

跟前文中canvas绘图的方式比一比，就知道SVG是多么容易控制了。

当然，使用SVG时我们通常也是使用类库来提升效率。这里的类库主要有三种：