2019年最好用的JavaScript图表库

2019年最好用的JavaScript图表库

做者 | Saurabh Barot

译者 | 王强编辑 | Yonie

大数据时代，收集和使用数据的需求正在爆发式增加，数据可视化也变得越发重要。开发人员在千方百计将不一样数据库中的记录整合到仪表板和漂亮的图表中，向人们快速直观地展现信息。

在过去十年中数据可视化技术不断改进，结果涌现了不少高水平的图表库。

21 世纪初期，人们使用服务端图像位图来生成图表。那时像 Silverlight 和 Flash 这样的插件提供了丰富的交互式图表体验，代价是减小电池寿命、拖慢下载速度并耗费更多系统资源。

移动设备兴起以后，移动平台再也不支持插件并开始转向开放客户端技术，这些技术能够在任何平台上运行，成为了开发人员的首选。同时，触摸手势缩放和很是高分辨率的屏幕开始流行，使得无关分辨率的矢量图表广受欢迎。

随之而来的就是数据可视化的时代，SVG 可扩展矢量图像和 JavaScript 成为主角。今天的图表技术可支持全部浏览器平台，支持交互性和动画，而且不须要特殊的插件。这些图表在高分辨率设备中也有很好的显示效果。咱们能够在 JS 开发中使用许多 JavaScript 图表库实现这些目标。

市面上有不少 JavaScript 图表库，本文则列出了其中的几款佼佼者，能够用在你的新项目中。

如下就是 2019 年的顶级 Javascript 图表库名单。

D3.js

D3.js（https://d3js.org/）是一个图形 JavaScript 库，功能众多，十分强大。你能够用它对文档作数据驱动的转换，而后将任意数据绑定到 DOM 上。

D3 是很是优秀的图表库。它有一些较小的技术模块，如颜色、轴、轮廓、层次结构、多边形、缓动等。这也意味着你须要学习不少知识才能用好它，上手并不容易。

即便用它建立简单的图表也可能须要复杂的步骤。你须要明肯定义包含图表项和轴在内的全部元素。它提供了一些示例，教你如何使用 CSS 来设置图表元素的样式。开发者没法自动应用基于图表的功能。

若是你想从零开始设计复杂的图表，彻底按照本身的想法控制全部元素，那么这个库就是你的首选。但若是时间紧迫，从头开始解决数据可视化项目需求可能就不是什么好主意了。

做为图表库来讲，D3.js 能够充当构建块。开发者能够用 D3 与 NVD3 一类的方案配合工做。这个图表库彻底免费并开源。

Highcharts

Highcharts（https://www.highcharts.com/）是市面流行的 JavaScript 图表库之一，并被许多大公司采用。为了提供对 IE6 到 IE8 的兼容性，它先使用 SVG 而后转向 VML 来生成图表。它的示例图表带有一些很棒的功能，但看起来不怎么吸引人。它的文档里有不少 API 文档教程和相关主题。

它的 API 易于使用，开发者可使用配置选项来开发图表。对于我的和非商业用途，Highcharts 可无偿使用；证券行业等用途须要商业许可，而甘特图和地图图表则须要单独的许可证。

Chart.js

Chart.js（https://www.chartjs.org/）是一个开源 JavaScript 库，支持 8 种类型的图表。它只有 60kb，是一个很是小的 JS 库。它支持的图表类型包括雷达、内联图表、饼图、条形图、散点图、面积图、气泡和混合等。它还支持时间序列。在呈现层面，它使用 canvas 元素并能响应窗口大小调整缩放比率。它对 IE9 向后兼容。要兼容 IE7 的话也可使用 Polyfills。

初次使用它的示例时还能看到现代感的初始动画。实时添加数据点或序列时有平滑的动画效果。你能够调用 update() 函数来修改图表选项并重绘图表。

在它的网站中没有展现示例源代码，但能够在 GitHub 仓库中找到。它的 API 简洁直观。用户使用配置选项来建立和修改图表。它的文档内容翔实，附带代码片断和属性 API 的教程。

这个库可免费用于商业和我的用途。它是开源项目。但对于更高级别的需求来讲，它提供的图表类型可能有点少。

amCharts

amCharts（https://www.amcharts.com/）已经推出了第 4 版，历史也挺长了。此版本支持 SVG 动画引擎，可帮助开发人员建立电影级场景。

它的示例图表很是漂亮，大多数示例都提供了滑块 UI，还附带许多调节器能够实时调整图表的变量。它的文档包括完整的 API 属性描述和许多教程。它提供了一个声明性 API 来建立图表，与基于配置的方法略有不一样。它有很好的代码自动完成功能，但在配置图表时须要的代码略多。amCharts 的水印版图表是免费的，去掉水印须要付费。

谷歌图表

谷歌图表（https://developers.google.com/chart/）功能强大，易于使用。其示例图表简洁易读。能够在它的图表库和扩展库中找到许多图表类型。经过层叠菜单能够查看更多图表类型。

每种图表类型都有附带动态实例和很容易看懂的专门教程。这些教程附带 API 列表，并包含相关功能的代码。它为新人提供了很是愉快的入门体验。。

用户可使用配置选项对象来自定义图表。DataTable 类用来填充数据集，也能够用在全部图表里。每种图表类型都带有以独特方式列出的选项和对应的教程。可选项不少，适用于不一样类型，而属性命名是标准化的。

谷歌图表能够无偿使用，但也有一些局限。它是一个 Web 服务，不能在本地托管。谷歌还退役了不少 API，因此它不适合用在关键项目中。

ZingChart

ZingChart（https://www.zingchart.com/）中有许多图表类型，能与 react、angular 等框架集成。它有一系列强大的功能和许多自定义选项。

它的示例图表有许多样式主题，其中一些看着很不错。还有许多选项能够用来添加样式。示例图表没有覆盖它支持的全部图表类型。

它的文档附带了许多功能教程，覆盖了全部类型的图表和所有 API。ZingChart 使用配置选项自定义图表。示例中有不少属性设置，如字体样式等。但这些带有属性设置的示例可能会让用户糊涂，不知道图表到底须要哪些设置。

ZingChart 的水印版能够无偿使用。付费版没有水印。

FushionCharts

FusionCharts 最开始是基于 Flash 的图表插件，有着很长的历史。它是一个健壮的图表可视化库，提供对现代浏览器的支持，支持包括 JavaScript、JSON 和 XML 在内的许多数据格式，还兼容 IE6。它还支持许多服务端编程语言和 JavaScript 框架。

它的图表库附带了许多看上去简洁大方的示例。它的文档带有许多良好的 API 描述，并且每种图表类型都有示例。用户能够经过任务和图表功能分组配置属性。

用户使用基于配置的选项建立图表，用起来很是简单。深刻研究 API 时会发现属性列表变得很长。showAlternateHGridColor、chartLeftMargin 等配置属性很好理解。它的代码自动完成功能还有改进的空间。

FusionCharts 的水印版可供我的无偿使用。商业和非水印版本须要付费。

Flot

Flot（https://www.flotcharts.org/）用法简单、外观漂亮，交互功能丰富，是最优秀的纯 JavaScript 绘图库。它有效兼容全部新式浏览器，包括 Internet Explorer 6 +、Chrome、Firefox 2 +、Safari 3+ 和 Opera 9.5+ 等。它是最流行、历史最长的图表库。Flot 支持线、点、填充区域、条形以及它们的各类组合。

Flot 的工做机制是建立一个能够放入图表的占位符 div。

Sigmajs

这款产品能够用来建立一些漂亮的图形来在 Web 上显示网络，并在大型 Web 应用中展现简单的交互式网络；这种交互式网络具备动态探索功能。不管对初学者仍是高级用户来讲它都很好用。

它配备了一些使人兴奋的功能，如 Canvas 和 WebGL 渲染器，还有鼠标和触摸支持，帮助你制做更好的动态网络应用。

Sigmajs（http://sigmajs.org/）默承认配置，支持鼠标和触摸两种交互，并能够根据容器大小变化缩放显示。它还有自定义渲染，能够用一组工具和设置来定制网络的交互细节。

  小结  

JavaScript 图表库生态正在不断发展壮大。市面上能找到大量图表制做产品，能够知足多种多样的项目需求。大多数产品都提供了免费试用机会，方便用户评估。

英文原文：https://aglowiditsolutions.com/blog/top-javascript-chart-libraries/