年度最佳JavaScript数据可视化和图表库

时间 2019-11-09

标签年度最佳 javascript 数据可视化图表栏目 JavaScript 繁體版

原文原文链接

如今有不少图表库，但哪个最好用？这可能取决于许多因素，如业务需求，数据类型，图表自己的目的等等。在本文中，每一个JavaScript图表库将与一些关键因素进行比较，包括图表类型，商业或免费和开源状态。这些图表库经过实践经验从而进行了完全的分析，以最大限度地进行最佳比较。javascript

1. React-Vis

ReactJS是Facebook团队所创做的使人惊喜的前端框架。若是你已经在使用React了，那么你会很高兴得知这个库是专门为React框架而制做的。React-vis带有易于包装的可视化react-components，可供您使用。有超过10个图形组件，能够快速开发并将该库集成到数据丰富的环境中。html

特色前端

API数据注入。
优雅的过渡。
以canvas或SVG呈现。
注释功能。
工具提示。

谁能够无偿使用它?java

商业
教育
我的

它是开源的?react

该库已经由其社区在GitHub上开发。此外，它在MIT许可下注册，这意味着您能够fork，甚至帮助开发。git

它有什么图表?es6

如何使用?canvas

这个基于反应的图表库能够经过GitHub存储库下载或经过NPM包管理器安装。请参阅如下连接并查看文档。api

2. AmCharts

AmCharts在知足每一个数据可视化需求方面很是完全。它们几乎能够设想每种类型的图表，随时能够填充有意义的数据。该库拥有大量示例展现的功能，涵盖了许多图形类型和自定义。

可是，有一个小缺点，要在商业环境中使用，您必须购买许可证。AmCharts正在准备发布他们使人难以置信的库的第4版，你能够从中看到一些例子，查看案例

显着特色

现代化的图形设计。
普遍的文档，附带知识库和技巧和提示。
可以导出到Excel或PDF文档。
移动端适配
工具提示和注释。

这个库的网站的另外一个优秀特点是他们公开使用的“在线图表制做者”。它与JSFiddle高度类似，可以让您即时预配置图表，分别了解它们的外观和工做方式。界面甚至容许您使用本身的数据填充实时数据表，最后，当您对样式感到满意时，您能够保存代码以在您本身的项目中使用。请参阅下图，查看AmCharts在线编辑器的示例。

谁能够无偿使用它？

教育（有水印连接）
我的（带水印连接）

商业用途

直接从AmCharts购买许可证，他们有一系列购买选择，包括根据购买的许可证的倍数进行额外折扣。

它是开源的?

不，遗憾的是，可是，它仍然能够无偿使用，并在图表的左上角突出显示一个小连接。

它有什么图表？

如何使用？

这个图表库能够经过GitHub存储库下载或经过NPM包管理器安装。请参阅如下连接并查看文档。

3. Fusion Charts

这个免费和优质的图表库一共有90多个图表数组，能够完美地呈现全部数据可视化目的。FusionCharts提供一个免费的试用版，若是你不介意水印的话，它将永远免费用于我的和教育目的。在这里，经过一些预先设计好的指示板，查看一些正在运行的图表的优秀演示。这些指示板让您真正了解它们在一些实际应用程序中的外观。

该库还具备大量的地图，其中包含一些高级功能，这些功能对某些数据场景很是有用。这些很是值得一试！

特色

一系列的demo案例供参考
回归和趋势线功能。
提供3D图表。
能够单击连接的图表以呈现新数据。

该库的另外一个热门功能是在JSFiddle演示中查看每一个图表的选项。这能够实现即时调整和播放，是一个很好的工具，能够帮助您学习这个库。chart fiddles 页面容许您按图表类型，某些功能和元素进行过滤，从而能够快速定位做业所需的图表。

谁能够无偿使用它?

教育（带水印）
我的（带水印）

商业用途

若是您想在商业广告中使用此库，您必须从FusionCharts购买许可证，许可证将打开全部限制并在特定图表上发布水印。

它是开源的吗？

不，这个特定的可视化库不是开源的。

它有什么图表？

如何使用？

首先，您须要注册免费试用版或购买许可证，以后，能够经过框架过滤出使人惊叹的文档。例如，angular JS，React或Vue。请参阅如下连接。

下载/购买。下载源文件或使用Bower或NPM直接下载到您的项目。
文档和入门

4. NVD3

NVD3提供了一套优雅的可视化图表，并仔细考虑了视觉设计。这些图表不只在您的网页上看起来很棒，并且它们能够作他们想作的事情。与此列表中的其余库相比，它至关小，有许多图表不可用，可是，大多数常规图形类型都存在。NVD3依赖于D3.JS库，这是一个功能强大的可视化库，在JavaScript图表行业中占据主导地位。

NVD3的创造者也开启了社区发展的可行性。凭借GitHub的强大功能，该库仍然更新了新增功能和错误修复。

显着特色

响应性完美，当屏幕尺寸发生变化时，图表会适应并从新渲染以适应屏幕。
快速的工具提示和图表渲染。
折线图取景器;精确分析数据，可以深刻查看图形数据的特定部分。
经过单击图例进行过滤以在图表上显示隐藏数据。
经过nvd3网站进行实时图表编辑/测试。
引人注目的图形设计。

如今这个图表库背后的社区发布了一个“全新api”，其中包含一个界面，能够在一个地方查看全部图表演示。见这里。

谁能够无偿使用它？

商业
教育
我的

是否开源?

是的，这个可视化库是彻底开源的Apache 2.0许可证。若是你能作出一些很好的补充，你甚至能够把本身置身于社区活跃的组织中。

它有什么图表?

如何使用?

这个库的一大优势是它能够在CDNJS网络上找到。这意味着您能够直接将直接元素添加到HTML页面，而且能够加载库，随时可使用。或者，您能够经过GitHub或主网站下载它。

从网站下载.
从GitHub存储库下载
CDNJS上的NVD3 & d3.js依赖 (Version 3.5.3 Recommended)
文档和示例

5. Chart.JS

可用的最佳可视化软件包的另外一个有力竞争者是Chart.js。该库只有8种基本图表类型，可用于即兴创做更少的不一样类型。每一个都是彻底响应，但没有其余一些过渡效果。其最新版本2.0的一个重要特性是经过华丽的CSS3过渡来“动画一切”的功能，加强了您的可视化效果。

显着特色

悬停在数据点上时向鼠标指针移动的神奇过渡工具提示。
按标签过滤;单击图例以在图表上显示隐藏数据。
非数字Y轴，而是标签。
经过折线图插值轻松定制。

谁能够无偿使用它？

商业
教育
我的

是不是开源？

Chart.js可视化库彻底开源，具备MIT许可证，可用于修改，分发和使用。源文件也能够在GitHub上“fork”。

它有什么图表?

如何使用？

Chart.js提供了大量的文档库，包括有关安装库的精确说明。该库可使用Bower，NPM，jsDelivr快速安装，甚至能够从CDNJS连接。或者，直接从GitHub Repo下载源文件。请参阅如下连接 -

6. High Charts

High Charts被世界各地的一些公司使用，包括Facebook，IBM，MasterCard和StackOverflow。该库基本上包含了您可能须要的每一个图表，它甚至提供了一系列不一样的活动风格的仪表图表，速度计甚至电表式仪表。它多是有关可用图表类型的最早进的库，但固然，这须要商业用途。

显着特色

针对响应式设计和触摸设备进行了优化。
可以使用大数据。
在悬停上渲染工具提示是很是快速的。
可以注释图表。
数据能够直接从CSV文件加载到图表中。

该库的另外一个使人难以置信的功能是免费编辑器界面。此接口容许客户端用户从头至尾设计和配置图表，只要数据已准备好加载便可。这意味着客户能够准确选择他们想要查看的图表。它甚至能够自定义为图表系列和文本的字体系列和颜色。

对谁免费开放?

教育
我的

商业用途

对于商业用途，您必须从HighCharts网站购买许可证。每一个许可证都有12个月的免费高级支持。

是不是开源?

是的，使人兴奋的是，若是您使用正确的许可证，创做者已经向库发出了修改许可。例如，若是您购买了许可证，则能够对其进行修改以知足特定需求。若是您无偿使用它做为我的项目，您仍然能够修改它！

它有什么图表?

如何使用?

经过网站下载源文件。

7. ToastUI Charts

ToastUI可以在IE8上正常鱼腥。他们的图表在Internet Explorer 8和Chrome上的工做方式相同，这很是了不得。与此列表中的其余一些相比，ToastUI图表库相对较新。

特色

真正的跨浏览器渲染。这些图表适用于全部主流浏览器和IE8！
每一个图表都内置了美丽的过渡。
导出为.JPG或.PNG功能。
经过图表底部的勾选框能够轻松过滤数据。
从屏幕上的html表加载数据。

谁能够无偿使用?

商业
教育
我的

是不是开源?

对对对！ToastUI彻底无偿使用和开源。它带有本身的GitHub存储库，能够进行分叉或下载。

它有什么图表?

如何使用?

该库可在NPM包管理器和他们本身的内容传送网络中使用。或者，您能够下载源文件并查看包含如下连接的文档。

8. JustGage

该库专为Gauge风格的数据可视化而设计，提供一系列高度可配置的Gauge图表。而且，由于它纯粹基于SVG，因此Gauges能够从Internet Explorer 6开始渲染！固然，它也适用于大多数其余流行的浏览器。虽然这个库只有一种图表类型，但对于一些解决方案来讲它能够很方便。从制造仪表板到实时天气报告。

特色

支持IE6
彻底响应。
可配置的“间隔”指定图表部分的颜色，例如，以亮绿色渲染的0-30。
优雅的可定制指针。
实时刷新。

谁能够无偿使用它?

商业
教育
我的

是不是开源?

JustGage是经过MIT许可证彻底开源的。

它有什么图表?

如何使用?

JustGage依赖Raphael 来实现。两个JustGage JavaScript源均可以从CDNJS网络中获取或直接从GitHub存储库下载。我还用这个库写了一篇关于建立计量表的文章。

9. DC.js – Dimensional Charting

经过单击一个图上的特定数据点，其余人使用新数据进行更新，维度图表很是精彩。DC使用一个名为crossfilter的优秀JavaScript库来实现这些动态可视化。

可是这个库有一个缺点，它不擅长使用的远程镜头。要使用这些图表，建议您查看文档并研究一些可用的示例。

显着特色

使用CrossFilter.js和D3.js
多维数据过滤。
美丽的过渡图表。

谁能够无偿使用它?

商业
教育
我的

是不是开源？

该库是经过Apache 2.0许可证彻底开源的。这一点特别棒，由于这个库如何适应D3.js制做的图表都有很大的空间。

它有什么图表?

如何使用?

在GitHub上查看存储库页面，获取有关使用此库进行设置的许多有用连接。另外，请参阅下面的一些连接。

10. PlottableJS

Plottable是依赖于复杂的D3.js数据可视化库的另外一组图表。有六种不一样的图表类型可供选择，您能够当即启动和运行。Plottable提供了一个很好的API文档库，深刻介绍了所使用的类和方法。毫无疑问，这是一个完善的基础。彻底开源，您能够根本自定义它以知足您的需求。

显着特色

深刻的API。
关于在图表中使用“插件”的教程。
基于SVG
‘Drag’ 或 ‘Highlight’可视化的某些区域

对谁是免费?

商业
教育
我的

是不是开源?

是的，Plottable是免费的，开源的，能够随时用于任何项目。它能够用来创造更高级的东西。

它有什么图表?

如何使用?

使用这个开源产品，访问他们的网站，您将找到匹配的源文件和文档。或者，能够从专用的GitHub存储库中获取源文件。

11. C3.JS

关于这个库的一件很是酷的事情是创做者在C3.JS的主页上添加了一个视觉交互式演示。在观看的同时，您能够开始了解它能够作什么以及它有多强大。除此以外，还要享受愉悦的设计。它多是惟一一个展现这样的数据可视化库的类型，其余人也应该加入这种方法。C3提供将实时数据API无缝集成到其图表中。图表更新了过渡大师班，很是容易让人眼前一亮。总的来讲，C3是一种打包资源，能够在几分钟内为您的网络应用程序带来精美的可视化效果。

显着特色

丰富的教程和文档。
移动端响应。
工具提示集成。
可过滤的数据系列。
可转换 - 使用提供的内置脚本轻松切换图表类型。

谁能够无偿使用它？

商业
教育
我的

是不是开源?

JustGage是经过MIT许可证彻底开源的。

它有什么图表?

如何使用?

C3提供了入门指南，指导如何使用项目进行基本库设置。使用如下连接下载源文件。

12. n3Charts

n3图表专门用于AngularJS框架。这意味着您能够快速设置Angular项目中的新图表，而无需进行正确的编码。N3提供了各类各样的交互式图表，可使用标准化的JSON绘制出来。版本2最近发布了新的性能更新，从新设计的样式和更光滑的过渡。

显著特色

专为AngularJS无缝工做而设计。
工具提示功能。
Line interpolation控制。
区域填充效果。

谁能够无偿使用它?

商业
教育
我的

是不是开源?

免费用于全部目的和开源。最新版本2已经与MIT许可证一块儿发布。

它有什么图表?

如何使用?

C3提供了入门指南，指导如何使用项目进行基本库设置。使用如下连接下载源文件。

13. DyGraphs

DyGraphs很是适合制造和工程控制仪表板。借助多图同步功能，这些图表能够捕获大量数据分析。这个基于折线图的库在任何页面上看起来都很优雅，突出显示的区域既有意义又美观。DyGraphs画廊涵盖了一系列动手资源和学习指南。与JSFiddle联系以尽快启动。

特色

线性回归。
跨多个图表同步。
缩放功能。
突出显示的地区。
功能强大，为大数据作好准备。

谁能够无偿使用它?

商业
教育
我的

是不是开源?

是的，根据MIT许可，DyGraphs是免费的开源软件。

它有什么图表?

如何使用?

C3能够经过GitHub上的repo下载，也能够经过NPM等包管理器安装。基于ES6的用户也有一个新的存储库，它预先设置了带有ES6语法的库的工做示例。

14. Google Charts

Google不只提供通用图形样式图表，还提供了组织，树形图和仪表等风格的进一步数据可视化技术。对于想要离线使用它的人来讲，它有一个小小的缺点，由于它的API只能经过互联网链接使用。

显著特色

这个很是使人兴奋的图书馆有许多很酷的功能，你不会在其余地方看到。其中一些功能包括

数据注释或数据角色，它基本上容许您标记特定图表中的静态点。
跨图表的动画。
彻底控制数据点，可以将点变形为任意形状。

您目前是否将数据存储在Google表格或Fusion表格中？没问题，用强大的Google API摄取数据并将数据直接注入可视化，它甚至能够与Sales Force界面集成，这对于想要从他们的数据制做仪表板的企业来讲是一个额外的好处。

我写了一篇名为什么是谷歌图表的文章，深刻解释了这个库的功能。或者从中了解更多

谁能够无偿使用它?

商业
教育
我的

是不是开源?

不，遗憾的是，互联网巨头的图表库并非开源的，可是，若是你对此不介意，那么你很幸运。但请记住，它不是开源的并不意味着它不能无偿使用。

它有什么图表?

如何使用?

开始使用Google图表很是简单，它对API通俗易懂，并提供了许多图表的实例。

- Get started
- Documentation

15. LeafletJs

Leaflet是交互式地图的第一站。它精美的渲染直观地图是一个梦想。开始使用库就像传递一组地理坐标和缩放规范级别同样简单。LeafletJS彻底适合移动设备，在您的设备上呈现像素完美。它甚至支持包括Internet Explorer 7在内的传统浏览器。这个基于地图的库可用于大量创意，Facebook和Pinterest等大公司也已经在使用它们。

显著特色

地图控件
缩放/旋转/缩放
Bubble 弹出窗口
自定义指针或标记
事件跟踪

谁能够无偿使用它?

商业
教育
我的

是不是开源?

是的，Leaflet地图是开源的。

它有什么图表?

如何使用?

开始使用Google图表很是简单，获取设置的文档很容易理解，并提供了许多屏幕上图表的实例。

16. VisJs

VisJS可能看起来过期，但不要被它的外表蒙蔽了。毫无疑问，这个库很是强大，具备三维图表绘制功能，能够与一系列技术一块儿使用。Vis已被制做出来，能够无缝地渲染庞大的数据集。请参见他们的示例库[here]（http://visjs.org/showcase/index.html）。

特色

二维和三维能力。
为重型数据集作好准备。
缩放，滚动和排序功能。
Interpolation 控制

谁能够无偿使用它?

商业
教育
我的

是不是开源?

VIS根据两个开源许可证受权，即Apache和MIT。这个库背后的团队正积极寻找贡献者，以帮助进一步发展。

它有什么图表?

如何使用?

您能够经过连接到CDNJS连接，经过NPM安装或直接下载源文件来快速使用VisJS。

- Download & Install
- Documentation

比较一下吧

让咱们看看这些图表库如何相互权衡。请参阅下面的数据表，但愿能帮助您作出更容易使用的决定。

总结

JavaScript图表世界中有不少机会，这些库为伟大的想法提供了坚实的基础。长长的数据可视化列表毫不是惟一可用的资源，能够在Wikipedia的JavaScript库比较上看到几乎全部可用的库。这种性质的图书馆能够完成许多任务，但愿这些差别化的工具选择可以帮助您成功完成所需的数据分析。