雾里看花，水中望月，
你能分辨这些数据可视化工具？
借我借我一双慧眼吧，
让我把这些工具 看得清清楚楚明明白白真真切切

---

在百度上搜索“N种数据可视化工具”，我们能够看到大量这样的文章

http://s1/mw690/0069Nx3Nty71sRcrSDK40&690

我想这一定会把你看个眼花缭乱，最后呢还是不知道哪款工具最适合自己！

为什么呢？ 因为这些文章中很多都比较粗糙（当然也不乏精品），大部分文章中列出的工具，并没有进行很好的分类

• 比如很多可视化工具实际上是绘图API，想要使用这些API做图表，要自己编程实现；

• 比如很多可视化工具是开发组件，我们需要编程序调用方式来使用，这种工具就不适合非程序员来用；

• 比如很多可视化工具，是交互式的图形化工具，随便什么人都可以用。

其实总结起来说，经常我们在文章中读到的‘数据可视化工具’可以分为如下几个层次：

这些层次我们该怎么理解呢，举一个不算恰当的例子，假如实现最终数据可视化效果这一过程，比作造一辆汽车，那么我做了如下的类比：

1. 底层API类——我们仅仅是有了橡胶，需要自己造轮子（技术工种）

2. 图表组件库类——我们有了轮子，需要我们自己动手用轮子组装汽车（技术工种）

3. 图形化工具类——我们有了生产线，装轮子也不用自己动手，操作一些按钮开关就可以了（非技术工种）

4. BI产品类——我们有了更加豪华的生产线
   

当我们划分好这些层次后，就能更好的消化和理解这些工具。

下面我们扒一扒这些五花八门的工具，到底都属于哪一类。
第一类  底层绘图API类

这类工具比较底层，我们需要编写更多的程序。

1.1  Raphael

　Raphael 是一个用于在网页中绘制矢量图形的 Javascript 库。它使用 SVG W3C 推荐标准和 VML 作为创建图形的基础，你可以通过 JavaScript 操作 DOM 来轻松创建出各种复杂的柱状图、饼图、曲线图等各种图表，还可以绘制任意形状的图形，可以进行图表或图像的裁剪和旋转等复杂操作。

Raphael的主要特点是浏览器的兼容性，就连IE6也能很好的支持。但是对VML渲染性能并不太好，导致IE6-IE8这几个依靠VML技术的浏览器下规模稍大的图形就有些力不从心。

1.2    WebGL

WebGL 是一项使用JavaScript实现3D绘图的技术，浏览器无需插件支持，Web开发者就能借助系统显卡（GPU）进行编写代码从而呈现3D场景和对象。 WebGL基于OpenGL ES 2.0，OpenGL ES 是 OpenGL 三维图形 API 的子集，针对手机、平板电脑和游戏主机等嵌入式设备而设计。浏览器内核通过对OpenGL API的封装，实现了通过JavaScript调用3D的能力。WebGL 内容作为 HTML5 中的Canvas标签的特殊上下文实现在浏览器中。

WebGL的特点是可以实现高性能的3D图形渲染。

1.3    Three.js

http://s2/mw690/0069Nx3Nzy6WTgpnGU1d1&690

使用WebGL原生的API来写3D程序是一件非常痛苦的事情，幸好，有很多同行花业余时间写了一些WebGL开源框架，其中three.js就是非常优秀的一个，它掩盖了很多麻烦的细节，three.js就是使用javascript来写3D程序的意思。

按照我们之前的类比，它可以认为是有了更好的造轮子工具：）

1.4    Protovis

Protovis是一个可以让你利用简单的标记如线条和圆点+数据来绘制自定义图表JavaScript库。Protovis 是一款免费和开源的可视化的图表工具，由斯坦福大学可视化组的 Mike Bostock and Jeff Heer 开发，基于JavaScript 和 SVG （Scalable Vector Graphics，可伸缩向量图形）技术。

1.5    D3js

D3js的全称是（Data-Driven Documents），顾名思义可以知道是一个关于 数据驱动的文档 的javascript类库。D3js主要是用于操作数据的，它通过使用HTML、SVG、CSS来给你的数据注入生命，即转换为各种简单易懂的绚丽的图形。

其实D3js和前面的Protovis是相同的作者，都来自于斯坦福，之所以作者继Protovis之后又开发了具有相似使用场景的D3js,也是出于数据驱动这一更好的理念。

1.6    Processing.js

Processing.js 使用JavaScript绘制形状sharp和操作HTML5 canvas元素产生图像动画。Processing.js是轻量，易于了解掌握，并提出一个理想的工具，可视化的数据，创建用户界面和开发基于Web的 游戏。Processing.js可以运行在FireFox, Safari, Opera, Chrome(因为支持HTML5 canvas)

1.7    Canvas
canvas是HTML5中的新元素，你可以使用javascript用它来绘制图形、图标、以及其它任何视觉性图像。它也可用于创建图片特效和动画。

Canvas是更底层一些的技术，很多API是基于Canvas之上封装或者开发而来的。

1.8   R
R是一个用于统计计算和统计制图的优秀工具。由于他更是一个语言，更与javascript无关，所以这里对R就不多介绍了。

第二类 图表组件库类

这类工具虽然已经经过大量封装，具有友好的API接口，但仍然需要编程调用，不会写程序不行的噢

2.1    HighCharts

Highcharts 是一个用纯JavaScript编写的一个图表库， 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表，并且免费提供给个人学习、个人网站和非商业用途使用。HighCharts支持的图表类型有曲线图、区域图、柱状图、饼状图、散状点图和综合图表。

虽然highCharts的名气也不小，但是由于免费使用是不能商用的，也大大减小了它的使用范围。

2.2    Echarts 

ECharts是一款开源的javascript图表库，特点是具备极强的交互能力，由百度EFE数据可视化团队开发，在国内外已经广泛流行。

现在Echarts的应用越来越广泛了。不仅国内用户使用，很多国外用户也开始使用Echarts.

2.3    JavaScript InfoVis Toolkit

JavaScript InfoVis Toolkit 是一个在 Web 上创建可交互式的数据图表的 JavaScript 库。

2.4    SaCa DataViz 

SaCa DataViz是一个商业的数据可视化图表库，通过javascript实现，拥有的图表类型相当广泛，特点是除了常见的饼图、柱形图、折线图等常见的图表外，包含大量的高级数据可视化组件。

2.5    FusionCharts 

FusionCharts是InfoSoft Global公司的一个商业产品，在早期使用flash技术实现，在13年左右开始全面迁移为javascript实现。特点是图表组件类型相当丰富，且配置属性相当多，定制性很强。

不过FusionCharts的价格不菲。

2.6    Google Chart Tools 

是Google提供的图表工具


第三类  图形化定义工具与服务

这类工具一般比较‘傻瓜’，不需要编程，一般的非技术人员都可以使用

3.1    RAW

http://s2/mw690/0069Nx3Nzy6WTgQT3nr01&690

http://s6/mw690/0069Nx3Nzy6WTgXyPhX85&690

RAW是一个开源的图表定义工具，RAW底层的图表使用D3JS实现，并支持扩展图表类型。在RAW的官网也可以直接在线使用，但没有账户，定义好的图表不能在线保存，但可直接生成调用代码。

3.2    图表秀

图表秀是一个国内网站，是国内的一个免费的在线数据可视化图表定义工具，支持各种常见图表以及高级数据可视化图表的定义，不但支持通过Excel作为数据 源来制作各种图表，还能支持多页定义以及页内自由布局，以及图文混排功能，另外还支持多图表之间的联动交互设置。一个作品叫做‘图册’，制作好的图册还可 以分享到微信、微博等社交媒体上。底层使用了SaCa DataViz组件以及echarts，并还在继续增加更多的图表组件。

3.3    infogr.am

infogr.am是一个英文网站，提供在线的图表以及信息图的定义，是一个商业网站，也提供一些免费功能。特色是除了可以做一些数据图表外，还支持信息图的在线定义。

3.4    Plot.ly

http://s14/mw690/0069Nx3Nzy6WThd2VIhfd&690

http://s16/mw690/0069Nx3Nzy6WThg0NTpcf&690

Plot.ly是一个英文网站，提供在线的图表制作服务，偏向于科学计算领域的图表制作，也是一个商业网站，提供一些免费功能，免费情况下仅能制作十个图表。

3.5    百度图说

百度图说是一个国内网站，是百度echarts团队开发的基于echarts的图表制作工具，能够支持大多数echarts图表的在线定义。遗憾的是不能支持布局的定义，也不支持图表间的交互。

3.6    Many eyes

http://s8/mw690/0069Nx3Nty71rKECsuPb7&690
http://s2/mw690/0069Nx3Nty71rKGR0tPb1&690

ManyEyes是一个网站，对比前面几个工具比较特殊，前面的几个都是基于javascript实现的，而ManyEyes网站是基于java实现的，运行需要Java Applet。
ManyEyes 来自IBM研究院的Visual Communication Lab。这个项目的初衷是希望能普及可视化，让人人都能把自己感兴趣的数据生成漂亮的图表。网站提供了免费的可视化服务，你只要上传你的数据，就可以得到 你想要的可视化图表。ManyEyes提供了数十种最受欢迎的可视化方案。

第四类 BI前端产品

这类一般是比较成熟的商业智能产品，比起第三类工具，能够支持更多的数据源

4.1    Tableau
Tableau公司是一家美国公司，旗下有一系列的商业智能软件产品，以优秀的数据可视化能力为其最大的特色。

各类数据可视化工具还有很多，本篇文章我们就先写这些，更多工具请后续继续关注我们的文章。

版权声明：本文为图表秀网站原创文章，未经许可不得转载。

http://s5/mw690/0069Nx3Nty71rKNWqDGc4&690
图表秀：最好用的数据可视化图表定义工具

图表秀网站：http://www.tubiaoxiu.com