12个超炫数据可视化工具

12个超炫数据可视化工具

今天我们带来一篇来自Adobe工程师Rohit Boggarapu的文章。他在文章中介绍了一些适合网页开发者的数据可视化和绘图工具，让你不必再花大力气与枯燥的数据抗争。部分工具不要求写代码也可以使用！

我们诠释数据的方式和数据本身之间存在着巨大的鸿沟。尤其是当我们唯一的选择是盯着表格中一列列不知所云的数字时。这可能是最无聊的一种格式了。

没有哪个网页开发者会喜欢电子表格。好消息是，现在我们有了许多更加优雅的方式来呈现数据，再也没有必要使用静态的Excel 图表了。

在为你的项目选择合适的绘图工具时，要考虑到许多事情。本文将为你分析适合网页开发者的 12 个最好的工具，让你不再花费大把时间跟数据做斗争，而是开始轻松地绘制漂亮的图表。虽然本文推荐的工具是面向网页开发者的，但其中一些并不需要会写代码就能使用。许多工具都有着丰富的交互式例子，即使是新手也能轻松地通过改动代码来创建自定义图表。

01 Google Charts

文档和帮助信息丰富的 Google Charts 对于刚刚入门 JavaScript 绘图的人来说是极佳的选择。它的文档里到处都是带注释的代码和逐步的讲解，可以直接用来把 HTML5 / SVG 图标嵌入到你的网页中。

如果你需要更进阶的自定义功能或是 Google 原始提供的 18 类以外的图表，下面会介绍一些有着更多类别和特性的选择。

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

02 MetricsGraphics

 

MetricsGraphics 是一个在 D3.js 的基础上专为可视化时间序列数据而开发的绘图库。虽然它只支持线图、散点图、柱状图、直方图和数据表格，但它在这几类图表上的表现非常强。

跟 Google Charts 一样（MetricsGraphics 是 Mozilla 的产品），丰富的文档和例子使得它很容易上手。比如这个非常有趣的关于 UFO 目击事件的交互式例子。

同时它也是一个非常简易和轻量级的选择。

适合人群：追求快速美观同时又不需要写一堆杂乱代码的开发者。

03 FusionCharts

FusionCharts 支持 vanilla JavaScript、jQuery、Angular 等一系列高人气的库和框架。它内置90多种图表和超过1000种地图，相比 Google Charts 和 MetricsGraphics 要完整得多。你可以在这里查看它所支持的全部图表类型。

考虑到应用或是网站的拓展性，如果你选择了一个功能不完整的绘图库，这就有可能在将来发展成一个问题。而像Microsoft、Google 和 IBM 这样的公司都在使用 FusionCharts，这说明它是一个能满足企业级拓展性需求的工具。

适合人群：需要各种不同种类的易自定义图表的开发者。

04 Epoch

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

对普通数据和实时数据，Epoch 都支持 5 种图表类型。这个数量并不能与 FusionCharts 或是 Highcharts 这种特性完整的产品对抗，但它所专长的是以简单和友好的方式呈现实时数据。

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

05 ECharts

 

百度的 ECharts 是一个很棒的工具，它支持在绘制完数据后再对其进行操作。这个被称为 Drag-Recalculate 的特性使得用户可以在图表之间拖动一部分的数据并得到实时的反馈。同时，ECharts 是专为绘制大量数据设计的。它可以瞬间在二维平面上绘制出 20 万个点，并用专为 ECharts 开发的轻量级 Canvas 库 ZRender 使数据动起来。

你可以在这里对上图进行操作，来体验 ECharts 所提供的特性。

适合人群：想尽量避免写代码并有实时数据操作需求的开发者。

06 D3.js

 

虽然并不是对用户最友好的工具，但 d3.js 在 JavaScript 绘图界的重要性是不可小觑的。许多其他的库都是基于它所开发，因为它提供了你所能想到的所有功能。它支持 HTML、SVG 和 CSS，并且有着海量的用户贡献内容来弥补它缺乏自定义内容的劣势。

适合人群：不怕写代码的硬核绘图专家。

07 Sigma

跟上面已经提到过的工具相比，Sigma 有着自己独特的定位，那就是图模型的绘制。它基于 Canvas 和 WebGL 开发并提供了公开的 API。所以你可以在 GitHub 上找到社区贡献的许多插件。举例来说，你可以用 Sigma.js 画出这样的图：

 

Sigma 同时也是响应式的，并支持触屏。开发者很容易添加新的功能以及精细地控制边和顶点的规格。

适合人群：需要专为绘制图模型设计的强大工具的开发者。

08 Highcharts

人气极高的 Highcharts 可以在不依赖插件的情况下绘制交互式的图表。它高灵活性的绘图 API 也被 Nokia、Twitter、Visa 和 Facebook 这样的公司所青睐。

Highcharts 对于非商业使用是免费的，而商业许可的价格是一份590美元（附带技术支持）。

这是一个用它绘制的例子：

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

09 dc.js

dc.js 是一个开源的 JavaScript 绘图库。它非常适合用来创建交互式的仪表盘（Dashboard）。图表之间是有联系的，所以当你与其中一个部分进行交互时，其他部分都会做出实时的反馈。这是一个例子：

 

除了一些在线课程以外，你可以通过各种例子来学习使用这个库。等你照着文档动手一遍以后就有能力创建自己的图表了。

虽然 dc.js 并没有像 ECharts 或是 Google Charts 那样丰富的功能，但它在自己的卖点——易于呈现和探索巨量的维度数据集上做的非常好。

适合人群：需要为关系型图表创建一个仪表盘的开发者。

10 dygraphs

由 Google 开发的 dygraphs 绝对是绘图工具中的明星。到现在 Google Correlate 还在使用它（当然，在设计上经过了一些调整）。它可以被用于绘图密集的项目，因为它能在不影响性能的情况下轻松地绘制几百万个数据点，这在很大程度上弥补了它那过于朴素的审美设计。

从一开始作为 Google 的一个内部项目到最后公开发布，dygraphs 一直有着活跃的社区支持。同时它也在 GitHub 上开源。

适合人群：需要有着活跃支持的专为绘制海量数据集设计的工具的开发者。

11 Vega

 

Vega 是一个基于 d3.js 的用于创建、分享和保存可视化图标的库。它由许多部件组成，其中一些能够在不需要写代码的前提下达到与 d3 竞争的水平。Vega 能够把 JSON 数据转换成 SVG 或 HTML5 图表。虽然这没什么了不起的，但它把这一步做的很踏实。

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

适合人群：需要 d3 强大的特性又不希望从头学起的开发者。

12 NVD3

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

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

 

它支持 11 种图表类型，包括区域图、线图、柱状图、气泡图、饼状图和散点图。同时也支持所有现代浏览器以及 IE 10 以后的版本。

适合人群：熟悉 d3 并想要可重用图表的开发者。

End.

来源于网络

微信公众号：https://mp.weixin.qq.com/s?__biz=MjM5MDI1ODUyMA==&mid=2672943402&idx=1&sn=65dbca91d4d8bb55bb8db603260f8b68&chksm=bce2c51d8b954c0ba90a0864f7f976a7a661af3165b1f803dcec33155566593592bdec79f51b&mpshare=1&scene=23&srcid=#rd

 

补充：

1.amCharts

 

 

当您需要一个简单且灵活的数据可视化解决方案时，amCharts便是一种非常实用的JavaScript图表库。

主要特点

  • 包含地图和甘特图等多种类型的图表。

  • 具有友好的交互式选项和深入分析的功能。

  • 其文档虽然涵括了所有基本的方法，但是在我看来，它们在使用上并不方便。

  • 具有引人入胜的图表动画。

  • 可以与React、Angular、Vue和Ember相集成。

  • 具有WordPress插件。

  • 可导出为图像或PDF文件。

  • 提供实时图表，以及完全自定义的、且被W3C认可的辅助功能。

  • 为注册用户提供优先且全面的支持。

  • 客户群：Microsoft、Amazon、eBay、NASA、Samsung、Yandex、以及AT&T等。

定价

虽然可以被免费地用于各种用途，但是所有生成的图表都会包含一个小小的品牌链接。若要删除该链接，则需购买付费许可证(180美元起)。同时，您也将为此获得对于该产品的优先支持。

更多信息

  • 官方网站：http://amcharts.com/

  • 文档：http://amcharts.com/

  • 下载链接：http://amcharts.com/download

2.AnyChart

 

作为一款轻量级的JS图表库，AnyChart不但功能丰富，而且具有SVG/VML(译者注：可缩放矢量图形和矢量可标记语言)呈现功能。实际上，它为Web开发人员提供了创建不同类型图表的绝佳机会。这些图表都有助于数据的分析，以及以数据为驱动所做出的决策。去年，DZone.com将AnyChart列入了最佳JavaScript数据图表库之一。

主要特点

  • 提供超过80多种JS图表类型，包括：基本图表、股票图表、地图、甘特图、以及PERT图表等。

  • 提供多种设置数据的方法，包括：XML、JSON、CSV、JS API、Google表格和HTML表格。

  • 能够深入查看图表中的数据。

  • 提供库存技术分析指标，以及开箱即用的绘图工具。

  • 提供丰富的文档、API和友好的技术支持。

  • 可以与Angular、Qlik、Oracle APEX、React、Elasticsearch、Vue.js、Android、以及iOS等相集成。

  • 提供各种样本与仪表盘，以及具有代码自动完成功能的专用playground。

  • 支持各种旧的浏览器。

  • 能够将图表导出为各种格式，包括：PDF、JPG、PNG、SVG图像、XSLX与CSV文件类型的数据。

  • 客户群：Oracle、Microsoft、Citi、Samsung、Nokia、AT&T、Ford、Volkswagen、以及Lockheed Martin等。

定价

提供免得的带水印版本。如果想去掉logo，或是将AnyChart用作商业目的，则必要购买许可证(49美元起)。

更多信息

  • 官方网站：https://www.anychart.com/

  • 文档：https://docs.anychart.com/

  • 下载链接：https://docs.anychart.com/

3.Chart.js

 

Chart.js是一款备受网页设计与开发人员欢迎的，简单且灵活的JavaScript数据图表库。对于那些不需要大量图表与自定义功能，却又希望其图表看起来清晰整洁、且信息量丰富的用户来说，这是一个非常好的基本解决方案。

主要特点

  • 支持8种图表类型，即：线、面积、条形图、饼图、雷达图、极坐标图、气泡图和散点图。

  • 所有的图表类型都可以被自定义、添加动画、并以响应式，被在线使用。

  • 可以通过插件来扩展其功能。

  • 具有优质的文档。

  • 由Stack Overflow(译者注：著名的程序开发技术问答网站)提供支持。

  • 支持IE9及以上的浏览器。

定价

它是一款根据MIT许可证发布的，免费开源的JS图表库。

更多信息

  • 官方网站：https://www.chartjs.org/

  • 文档：https://www.chartjs.org/docs/

  • 下载链接：https://github.com/chartjs/Chart.js/releases/latest

4.Chartist.js

Chartist虽然是一款不太引人注目的开源JS库，但是它能够被用来创建漂亮的响应式图表。因此，它对于那些需要极简式图表(如：线条、条形图或饼图)、且对于数据可视化要求不高的用户来说，非常实用。正所谓“一美遮百丑”，凭借着其漂亮的图表显示，它的其他功能倒是被弱化了。

主要特点

  • 只支持三种图表类型：直线图、条形图和饼图。

  • 具有强大的动画效果。

  • 其API文档包含了所有必要的信息，但是该文档的可读性不强，需要长时间滚动鼠标中键，才能定位到检索的内容。

  • 允许用户通过插件来扩展其功能。

  • 将来会兼容、并可使用SVG来绘制图表。

  • 支持各种旧的浏览器。

定价

开源并可免费使用。

更多信息

  • 官方网站：https://gionkunz.github.io/chartist-js/

  • 文档：https://gionkunz.github.io/chartist-js/getting-started.html

  • 下载链接：https://github.com/gionkunz/chartist-js/tree/develop/dist

5.D3.js

 

D3.js是一款功能强大的，可用于数据可视化任务的JavaScript库。目前，它已在GitHub上被fork(复制)了20,000多次。不过，D3更像是一个框架，而不是图表库。为了让用户方便使用，它提供了许多实用的资源，并能够将各种手稿转化为可视化的图形。

主要特点

  • 与诸如Voronoi之类的多数JavaScript图表库相比，它能够支持更为广泛的图表类型。

  • 它的学习曲线比较陡峭。虽然其文档不及上述提到的商用AnyChart那样清楚易学，但是它带有许多教程和各种不错的API。

  • 能够将强大的可视化组件、与数据驱动方法，结合到DOM的操作之中。

  • 能够使用浏览器内的元素检查器，以实现轻松的调试。

  • 带有数以百个的范例。

  • 具有曲线生成函数的功能。

  • 支持拖放。

定价

开源并可免费使用。

更多信息

  •  

  • 官方网站：http://d3js.org/

  • 文档：https://github.com/d3/d3/wiki

  • 下载链接：https://github.com/d3/d3/releases/latest/

6.FusionCharts

FusionCharts是一款不错的交互式图表库，它带有数百个开箱即用的图表。这些图表不但接受JSON和XML数据格式，而且能够通过HTML5/SVG或VML予以呈现。

 

主要特点

  • 提供数十种2D和3D类型的图表，以及950多种地图。

  • 以动画和完全交互的方式，提供图表和地图。

  • 提供ASP.NET、PHP和Ruby on Rails类型的服务器端API。

  • 兼容jQuery、Angular、PHP、ASP.NET、React Native、Django、React、Ruby on Rails、以及Java等语言工具。

  • 具有非常详细的用户指南和API参考文档。

  • 提供各种可用于检测的样品和仪表盘。

  • 支持各种旧的浏览器。

  • 可导出为PNG、JPG或PDF格式。

  • 通过知识库和社区论坛提供技术支持。

  • 给许可证用户提供不受限的优先支持。

  • 客户群：Apple、IBM、Google、Intel、Microsoft、PayPal、Oracle、以及Adobe等。

定价

可免费用于非商业用途;若用于商业用途，则售价为497美元起。

更多信息

  • 官方网站：https://fusionchart.com/

  • 文档：https://www.fusioncharts.com/dev

  • 下载链接：https://www.fusioncharts.com/download

7.Google Charts

 

对于那些不需要复杂定制、且更注重简约与稳定性的项目来说，Google Charts是一个很好的选择。

主要特点

  • 提供基于HTML5/SVG和VML的图表。

  • 提供各种可用于检测的样品和仪表盘。

  • 在所有图表都具有交互性的基础上，部分图表还可被缩放。

  • 提供完善的综合性文档。

  • 支持各种旧的浏览器。

  • 通过FAQ、GitHub和社区论坛提供支持。

定价

虽然其许可证是免费的，但图表库并不开源。由于不允许在用户服务器上托管Google的各种JS文件，因此不适合那些具有敏感数据的用户。

详细信息

  • 官方网站：https://developers.google.com/chart/

  • 文档：https://developers.google.com/chart/interactive/docs/

  • 下载链接：https://developers.google.com/chart/interactive/docs/basic_load_libs

8.Highcharts

 

Highcharts是一款全面、且流行的、基于HTML5的JavaScript图表库，它使用SVG/VML来呈现各种类型的图表。由于属于轻量级的图表库，因此它保证了较高的运行性能。

主要特点

  • 既能够使用纯粹的JavaScript，又可以从外部加载数据。

  • 提供强大的文档、API参考和社区作品展示。

  • 能够通过交互式选项，让用户深入解读图表中的数据。

  • 可以与React、Angular、Meteor、.NET、以及iOS等一起使用。

  • 可以导出为PNG、JPG、PDF或SVG格式。

  • 能够通过社区论坛和Stack Overflow的方式，对免费版用户提供支持;而对于具有相应许可证的商业用户来说，则能够提供高级的电子邮件与Skype技术支持。

  • 客户群：Visa、Yahoo!、Facebook、Twitter、Groupon、Nokia、Ericsson、Mastercard、以及Yandex等。

定价

供非营利组织免费使用;而对于商业用途，则售价为50美元起。

更多信息

  • 官方网站：https://highcharts.com/

  • 文档：https://www.highcharts.com/docs

  • 下载链接：https://www.highcharts.com/blog/download

9.Plotly.js

Plotly.js是一款免费且开源的高端JavaScript软件库。由于是建立在D3.js和WebGL基础之上，因此它可被用于创建包括3D图、和统计图在内的许多不同类型的图表。

主要特点

  • 可被嵌入网站、或用于创建动态演示文稿，并支持20种图表类型。

  • 通过将各种图表抽象为声明性的JSON结构，它可以被Python、R和MATLAB用作基于浏览器的图表库。

  • 具有丰富的API文档。

  • 具有强大的动画效果。

  • 能够使用React。

  • 能够将图表导出为PNG和JPG;并在订购之后，提供EPS、SVG和PDF格式。

  • 提供各种可用于检测的样品。

  • 允许使用Excel电子表格、或直接连接到您的数据库中。

  • 具有社区论坛的支持。

定价

开源并可免费使用。

更多信息

  • 官方网站：https://plot.ly/javascript/

  • 文档：https://plot.ly/javascript/

  • 下载链接：https://plot.ly/javascript/getting-started/#download

10.ZingChart

 

ZingChart是一款可用于制作交互式与响应式图表的实用工具。它不但灵活高效，而且能够轻松地管理大数据，同时还能生成包含丰富数据内容的图表。

主要特点

  • 支持30多种图表类型。

  • 可完全定制不同的CSS风格版式。

  • 兼容jQuery、Angular、Node.js、以及PHP等。

  • 提供实时数据，并能快速地呈现任意大小的数据集。

  • 可以通过JS对象、JSON、CSV、PHP、AJAX或MySQL来加载数据。

  • 提供完整且易读的API。

  • 通过ZingChart的帮助中心、Stack Overflow、电子邮件、以及聊天工具，提供免费和高级的技术支持。

  • 客户群：Microsoft、Boeing、Adobe、Apple、Cisco、Google、以及Alcatel等。

定价

只要拥有其品牌许可证，便能免费拥有其图表库的完全访问权限。而对于商业用途，则需购买许可证，售价为199美元起。

更多信息

  • 官方网站：http://zingchart.com/

  • 文档：http://zingchart.com/docs/

  • 下载链接：http://zingchart.com/try/

结论

上面所列的十款JavaScript图表库可谓各有千秋，有的运行得更快、有的显示得更漂亮、而有的却更加灵活。正如“一千个人眼中有一千个哈姆雷特”那样，到底选用哪一种图表库，最终还是取决于您手头上的项目特点和具体的应用需求。

 

个人学习使用，如有侵权，联系我删除

Published by

风君子

独自遨游何稽首 揭天掀地慰生平