12个数据可视化工具,人人都能做出超炫图表

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

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

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

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

1. Google Charts

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

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

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

2. MetricsGraphics

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

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

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

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

3. FusionCharts

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

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

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

4. Epoch

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

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

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

5. ECharts

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

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

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

6. D3.js

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

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

7. Sigma

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

Sigma 同时也是响应式的,并支持触屏。开发者很容易添加新的功能以及精细地控制边和顶点的规格。 适合人群:需要专为绘制图模型设计的强大工具的开发者。

8. Highcharts

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

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

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

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

9. 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 并想要可重用图表的开发者。

文:Rohit Boggarapu

来源:优达学城

原文发布于微信公众号 - 大数据(hzdashuju)

原文发表时间:2018-02-10

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏PPV课数据科学社区

工具 | 17款工具,让你的数据更美观

想让数据变得更好看?不必成为经验丰富的数据科学家,也不必成为平面设计师。 有一些能让数据从简单的表格变成多种多样的图形,地图甚至词“云”。 并不是所有的工具都适...

30580
来自专栏程序人生

那些年,我追过的绘图工具

文档能力是一个工程师必不可少的基础能力,而高质量的文档往往伴随着高质量的图表。"A picture is worth a thousand words",复杂的...

46560
来自专栏PPV课数据科学社区

回顾R和微软过去的一年

托马斯·斯莫尔的ML / DL博客最近回顾了数据科学,机器学习和深度学习显著的进步-其中许多涉及R和/或微软。以下是他们的亮点: R Project R和Pyt...

33450
来自专栏无原型不设计

UI设计师必备的五款界面设计工具

在前几篇文章中,我们分享了一些最受欢迎的原型设计工具,今天我们来谈谈界面设计工具。工具的重要性对于设计师来讲不言而喻。任何想法都需要借助工具来实现。想要成为一名...

39820
来自专栏CDA数据分析师

业界 | 四大机器学习编程语言对比:R、Python、MATLAB、Octave

https://github.com/mjbahmani/10-steps-to-become-a-data-scientist

16920
来自专栏Java技术栈

Elastic Search 上市了,市值翻倍,这群人财务自由了!

国庆长假,大部分人还深浸在风花雪月之中,而就在昨天(美国时间10月5号),我们 Java 程序员所熟知的大名鼎鼎的 Elastic Search 居然在美国纽约...

10720
来自专栏PPV课数据科学社区

【译文】怎样学习R(下)

何品言翻译,广东科技学院大学生,喜欢R语言和数据科学。 王陆勤审核,从事数据挖掘工作,专注机器学习研究与应用。 英文链接:http://www.r-blogge...

29940
来自专栏数据的力量

学习复杂事物的简单方式:三个步骤获得超能力

21160
来自专栏IT技术精选文摘

腾讯是如何大幅降低带宽和网络流量的

1K20
来自专栏非著名程序员

Codecademy 你值得拥有,非常棒的编程学习网站

Codecademy 它是一个免费有趣的在线互动编程学习网站,目前提供了 HTML/CSS/PHP/Javascript/Ruby/jQuery/Python...

15940

扫码关注云+社区

领取腾讯云代金券