数据可视化的实现技术和工具比较(HTML5 canvas(Echart)、SVG_数据资讯

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

1. HTML5 canvas

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

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

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

是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这个技术本身的优缺点：

缺点：

优点：

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时我们通常也是使用类库来提升效率。这里的类库主要有三种：

D3的全称是Data-Driven Documents(数据驱动文档)，在github上关注数量超过了2万人（超过了所有canvas类库的关注数量），是非常受欢迎的开源工具。使用d3的有开发者，有设计师，有艺术家，资料非常丰富（虽然中文的很少）。关于D3的我的应用案例可以见我之前的文章《D3js初探及数据可视化案例设计实战》。

那么接着说说D3的优缺点（基本上也就是SVG的优缺点）：

优点：

缺点；

最后，补充一个问题，如何在IE6这样的古董浏览器上绘制可交互的统计图形？

经过我长期摸索实践，结论是，不要试图这样做。即便是VML兼容方案性能也很差。在IE6上最靠谱的做法是用php或者java直接在后台绘制一个jpg图片，然后发到IE6上显示。这个方法也是5，6年前最通用的做法，现在已经过时了。最好的策略是，不要对IE6兼容，实在不行的话就显示一个不能动的图片吧！珍惜时间，珍惜生命，远离IE6！

3. webGL

前面说的绘图技术，无论canvas还是SVG都不能绘制3D图形。我曾经见过很多在网页上显示3d图形的方案，但都需要你的电脑上安装相应的插件（例如flash， silverlight）或者事先安装虚拟机(例如java）。之前曾经有过很多web 3D渲染技术，但不是要下插件，就是编程复杂，于是渐渐被时代淘汰，例如VRML，约翰•卡马克已经宣布了它的死亡。难道就没有一个开源的通用标准显示3D图形吗？

当然是有的。这货叫webGL,是一项使用JavaScript实现3D绘图的技术，浏览器无需插件支持，Web开发者直接使用js调用相关API就能借助系统显卡（GPU）进行编写代码从而呈现3D场景和对象。

WebGL标准由科纳斯组织（Khronos Group）开发和维护，Google、Mozilla、Opera和Apple 等浏览器厂商都是其中的成员，为这一标准做出了显著贡献。从名称上我们就可以知道WebGL跟openGL肯定是小弟与大哥的关系。事实上webGL是基于OpenGL ES 2.0开发的，OpenGL ES 是 OpenGL 三维图形 API 的子集，针对手机、平板电脑和游戏主机等嵌入式设备而设计。浏览器内核通过对OpenGL API的封装，实现了通过JavaScript调用3D的能力。WebGL 内容作为 HTML5 中的Canvas标签的特殊上下文实现在浏览器中（这下canvas终于可以画3D图了，虽然用的是不同技术）。

webGL诞生时期放出的经典例子：深海水族馆

webGL技术从初创到现在也不过2年多的时间（2011年发布标准），但是发展很快。一开始傲娇的微软认为该技术有极大的安全漏洞而拒绝使用（因为相当于让web脚本直接控制了显卡这么重要的硬件，同时有没有类似windows update这样的更新程序来弥补漏洞），但是现在也放下身段在IE12里面支持了此物。原因无他，就是HTML5带来的潮流：在功能上，web应用将会越来越像内建应用。它可以调用显卡，调用麦克风，调用摄像头，调用一切能用的硬件去提升服务质量。这一切都基于浏览器的支持。

webGL的各大浏览器支持情况（截至2013年11月）：

桌面浏览器

移动浏览器

从上面的支持情况列表我们可以发现，支持情况还是比较可喜的，至少现代浏览器都支持，移动端和IE略有落后。不过毕竟这个技术还是新鲜事物，在国内能找到的资料还很少，国内前端技术圈讨论也不多，是真正的技术蓝海。本人并没有实际开发过webGL程序基于html5和webgl技术的大规模数据可视化，目前还停留在观察阶段。若有工作需求，会将其列入研究重点。

让我们查看一些webGL的案例，当然是mozilla demostudio的最好。

最后，让我们提一提webGL的JS框架，它们可以减少工作量并提供一些有趣的例子。

4.flash & actionscript

flash这个东西我是又爱又恨。爱是说我从初衷起就接触过这个东西，很喜欢它做的flash动画，并在大一大二也学过一阵；恨的是flash与web页面其实是完全分离的玩意，不仅要用自己的一套actionscript编写（并且as不如JS好使，我个人感觉），加载也要下载插件。在HMTL5+JS+CSS3的时代，越发觉得flash的大多数功能已被替代。

犹记当年乔教主2010年就怒喷过flash，认为它是移动端的阻碍，不适合触摸设备，技术封闭，已经过时。并且宣布苹果公司的产品在日后不支持flash。此举立即得到了微软、谷歌的响应。尤其是在经过HTML5的一番宣传以后，2010年前后大家都看淡flash的前景而看好HTML5。但是作为flash的老东家Adobe公司的发言人却一再表示：flash已经应用的非常普遍，想把我们一脚踹开是不可能的。现在究竟是鹿死谁手呢？经过3年的折腾，我们看到flash还是好端端地活着，当然份额确实减少了些。苹果还是立场坚定地拒绝fla

试看结束，如继续查看请付费↓↓↓↓

打赏0.5元才能查看本内容，立即打赏

来源【首席数据官】，更多内容/合作请关注「辉声辉语」公众号，送10G营销资料！