google correlate

今天，我们带来了Adobe工程师Rohit Boggarapu的一篇文章。他在文章中介绍了一些适合web开发人员的数据可视化和绘图工具，让你不必纠结于枯燥的数据。有些工具不用写代码就可以用！

我们解读数据的方式和数据本身之间存在巨大差距。尤其是当我们唯一的选择就是盯着表格里一排排难以理解的数字的时候。这可能是最无聊的格式了。

没有一个web开发者喜欢电子表格。好消息是，现在我们有许多更优雅的方式来呈现数据，不再需要使用静态的Excel图表。

为您的项目选择合适的绘图工具时，需要考虑很多因素。本文将为您分析web开发人员的12个最佳工具，这样您就可以轻松地绘制出漂亮的图表，而不必花费大量时间在数据上挣扎。虽然本文中推荐的工具是为web开发人员设计的，但是他们中的一些人并不需要能够编写代码来使用它们。许多工具都有丰富的交互示例，即使新手也可以通过更改代码轻松创建自定义图表。

01谷歌图表

Google Charts有丰富的文档和帮助信息，对于刚开始用JavaScript绘图的人来说是一个极好的选择。它的文档充满了带注释的代码和一步一步的解释，可以直接用于将HTML5/SVG图标嵌入到您的网页中。

如果除了Google最初提供的18个类别之外，您还需要更高级的自定义函数或图表，这里有一些具有更多类别和功能的选项。

适合:追求灵活性和良好文档的严肃开发者。

02公制图形

MetricsGraphics是一个基于D3.js开发的图形库，用于可视化时间序列数据。虽然它只支持折线图、散点图、直方图、柱状图和数据表，但在这几种图表上表现非常出色。

像Google Charts (MetricsGraphics是Mozilla的产品)，丰富的文档和例子让它很容易使用。例如，这个非常有趣的关于UFO目击的互动例子。

这也是一个非常简单和轻量级的选择。

适合人群:不写一堆乱七八糟的代码，追求快速美观的开发者。

03 FusionCharts

FusionCharts支持香草JavaScript、jQuery、Angular等一系列流行的库和框架。它内置了90多种图表和1000多种地图，比Google Charts和MetricsGraphics要完整得多。您可以在这里查看它支持的所有图表类型。

考虑到应用或网站的扩展性，如果选择功能不全的图片库，将来可能会成为问题。而微软、谷歌、IBM这样的公司都在使用FusionCharts，这说明它是一个可以满足企业不断扩大的需求的工具。

适合:需要各种易于定制的图表的开发人员。

04纪元

Epoch是一个基于d3.js开发的工具，开发者可以很容易地在自己的应用或网站上部署实时图表。它的文档简洁、完全免费且开源，对于不想花钱购买重量级解决方案的人来说，这是一个不错的选择。

Epoch支持普通数据和实时数据的五种图表类型。这个数字无法与FusionCharts或Highcharts等功能齐全的产品竞争，但它擅长以简单友好的方式呈现实时数据。

适合人群:需要简单灵活的实时数据呈现解决方案的开发者。

05电子海图

百度的ECharts是一个很棒的工具，支持数据画完之后的操作。这项功能名为Drag-Recalculate，允许用户在图表之间拖动一些数据，并获得实时反馈。同时，ECharts是专门为绘制大量数据而设计的。它可以在二维平面上瞬间画出20万个点，并用专门为ECharts开发的轻量级画布库ZRender使数据移动。

你可以在这里操作上图，体验ECharts提供的功能。

适合:希望尽量避免写代码，有实时数据操作需求的开发人员。

06 D3.js

虽然不是最人性化的工具，但是d3.js在JavaScript画图中的重要性不可小觑。其他很多库都是基于它开发的，因为它提供了你能想到的所有功能。它支持HTML、SVG和CSS，并拥有大量用户贡献的内容，以弥补其自定义内容的不足。

适合:不怕写代码的硬核画图高手。

适马

与上面提到的工具相比，适马有自己独特的地位，那就是绘制图形模型。它开发并提供了一个基于Canvas和WebGL的开放API。所以你可以在GitHub上找到很多社区贡献的插件。例如，您可以使用Sigma.js绘制这样的图表:

适马也反应灵敏，支持触摸屏。开发人员可以轻松添加新功能，并精细控制边和顶点的规格。

适合:需要为绘制模型而设计的强大工具的开发人员。

08高图表

极受欢迎的Highcharts可以不依赖插件绘制交互式图表。其灵活的绘图API也受到诺基亚、Twitter、Visa和脸书等公司的青睐。

Highcharts对于非商业用途是免费的，而商业许可的价格是590美元(带技术支持)。

这是用它画的一个例子:

适合:需要在技术支持的帮助下绘制各种复杂图表的开发人员。

09 dc.js

Dc.js是一个开源的JavaScript绘图库。它非常适合创建交互式仪表板。图表之间是有联系的，所以你和一个部分互动，其他部分会实时反馈。这是一个例子:

除了一些在线课程，你可以通过各种例子学习使用这个库。遵循该文档后，您将能够创建自己的图表。

虽然dc.js没有ECharts或者Google Charts那么多功能，但是它的卖点做得非常好——很容易呈现和探索庞大的维度数据集。

适合:需要为关系图表创建仪表板的开发人员。

10幅dygraphs

Google开发的Dygraphs绝对是绘图工具中的明星。Google Correlate还在用(当然是经过一些设计调整)。它可以用于绘图密集型项目，因为它可以在不影响性能的情况下轻松绘制数百万个数据点，这在很大程度上弥补了其过于简单的美学设计。

从一开始作为Google的内部项目到最终的公开发布，dygraphs一直都有积极的社区支持。它在GitHub上也是开源的。

适合人群:需要为绘制海量数据集而设计的工具并得到积极支持的开发人员。

11织女星

Vega是一个基于d3.js的库，用于创建、共享和保存可视图标。它由很多组件组成，有些组件不用写代码就能和d3竞争。Vega可以将JSON数据转换成SVG或HTML5图。虽然这没什么了不起的，但它让这一步非常实用。

因为使用Vega不需要写任何代码(只要能编辑JSON文件)，所以它是d3的很好的替代品，在保留d3特性的同时，可以降低使用的复杂度。

适合:需要d3强大功能，但又不想从头学起的开发者。

12 NVD3

最后介绍的工具也是基于d3.js作为绘图领域的佼佼者，NVD3由一系列组件组成，允许开发者创建可重用的图标。你可以在它的网站上找到许多演示和相应的代码。这也是NVD3最好的入门方式。

可以看到，NVD3的审美风格比d3.js要精致一点

它支持11种图表类型，包括面积图、折线图、条形图、气泡图、饼图和散点图。它还支持IE 10之后的所有现代浏览器和版本。

适合:熟悉d3，想要可重用图表的开发者。