14个最好的 JavaScript 数据可视化库
翻译：疯狂的技术宅原文：https://www.monterail.com/blo...javascript
本文首发微信公众号：jingchengyideng
欢迎关注，天天都给你推送新鲜的前端技术文章前端
你的程序有多么依赖数据？即便应用程序不彻底面向业务，你也可能须要管理面板、仪表板、性能跟踪以及用户很是喜欢的相似分析功能的数据。java
对于 JS 开发人员来讲，可视化数据的能力与制做交互式网页同样有价值。特别是二者常常同时出现。随着 JavaScript 在数据可视化领域的不断普及，市场上甚至还会出现可以为 Web 建立漂亮图表的新库。react
咱们选择了14个用于数据可视化的 JavaScript 库（这些库目前是最受欢迎或最有趣的）并作了一些研究，看看哪一个最适合咱们的项目。在这里要考虑许多因素：git
- 我想要什么样的图表？饼图，地理图，折线图, 条形图？
- 有些库只支持少数几种类型。首先要知道本身到底须要哪些。
- 数据集有多大？
- 基于 SVG 的库一般更适合中小型数据集，由于每一个元素都是惟一的节点并存在于 DOM 树中。这也意味着它们容许被直接访问，从而具备更多的灵活性。虽然你能够借助一些数据聚合算法、智能内存管理和其余花哨的技巧使它们可以处理大型数据集，可是使用基于 Canvas 的大型数据集工具是更可靠的选择。Canvas 很是快。
- 该应用是用于Web端、移动端仍是二者兼而有之？
- 有些库在响应性方面更好，而其余一些库有本身的 React Native 版本，如 Victory。
- 浏览器支持给定的库吗？
- 你使用哪一种 JavaScript 框架？
- 确保你的数据库库可以顺利运行。若是你在用 React，那么使用特定于 React 的库可能比使用包装器更好。
- 你须要什么样的外观？
- 若是你须要一些高级动画，也应该考虑到这一点。
在某些状况下，你可能根本不须要数据可视化库。有时用原生 JavaScript 从头开始编写是个好主意。虽然开始代价很大（特别是在你第一次这样的时候），但对于那些带有自定义定制图表的项目来讲，可能会在将来得到回报。有时最好保持理智并在开发部分上花费更多资源，而不是试图改造库来知足你的特定需求。虽然一开始听起来很可怕，可是以 SVG 为导向的心态和几小时的实验 —— 谁知道呢，它可能颇有趣！程序员
若是你熟悉现代前端框架，那么 Vue.js 在这方面尤其出色，它与 SVG 的协做垂手可得。请注意，我正在严格地讨论基于 SVG 的图表，由于它更容易实现。 HTML5 Canvas 只是一个位图的绘图表面，它并不知道内部绘制的对象是什么 —— 它们是像素，而不是像 SVG 同样的 DOM 元素。若是你想让它具备交互性，须要本身去处理全部的逻辑。虽然基于 Canvas 的方法提供了大型数据集（1000多个元素）的性能优点和严谨的操做，但我不建议从头开始编写 —— 除非它是你产品的核心功能。github
那么什么状况下才能使用库？面试
当你的项目中有一个奇怪的图表，一个须要漂亮的界面基本功能，有全部的花里胡哨（工具提示、图例、X/Y 轴等）的东西，或当应用须要标准化、响应和详细的图表，特别是须要有多种类型时。算法
最后，咱们用库来避免一次又一次地从新发明轮子，而且大多数库已经存在了好久，并考虑到了大多数的使用状况。对了，他们也带有内置的动画效果。数据库
在项目中尝试全部这些库是不可能的，下面是我根据本身和其余人的经验列出的的列表。请记住，在深刻了解一个库以前，搞清楚怎样把它集成到你的项目中老是一个好主意。最后，选哪一个是你的事 —— 这只是一个清单！
免费数据可视化库
若是你不是一家大公司，那么开源库提供的选择就足够多了。加入你可以回答我上面提到的问题，会很容易找到完美的匹配。
一、D3.js
D3 是最受欢迎的 JS 库之一，不只可用于数据可视化，还包括动画、数据分析、地理和数据实应用。使用HTML，SVG 和 CSS 等技术。它有一堆庞大的 API，有些人认为它根本不是数据可视化库 。凡是你能想到的，均可以经过这个库完成，但它也有其缺点，学习曲线很是陡峭，并且文档已通过时，这很容易致使混乱。
大部分 API 都暴露了对 DOM 的直接访问，这可能与 React 或 Vue 等现代前端框架的工做方式产生冲突。但仍是有办法解决这个问题的。有一份声明性数据驱动文档（简称d4）建议让框架操纵 DOM 并严格使用 D3 做为数据 API。你能够在这里找到更多信息和例子。
适用于：任何环境
GitHub：https://github.com/d3
演示：https://github.com/d3/d3/wiki...
二、Recharts
为 React 专用。 Recharts 在使用 D3 做为引擎，并导出了声明性组件。它很是轻巧，能够经过渲染 SVG 元素来建立漂亮的交互式图表。它易于使用并且文档完整。图表是可自定义的，库自己提供了一些很好的例子。它的静态图表性能表现很是出色，并包含内置的通用图表工具，好比：图例工具提示和标签。在同一页面和大型数据集上处理多个动画图表时可能会出现滞后现象，不过它仍适用于大多数应用场合。
有点使人不安的是在 GitHub 上有大量未解决的问题。这些问题可能并不重要，但做者彷佛并非很热血回答这些问题。因此若是你遇到困难，请作好深刻研究代码的准备。
适用于：React
GitHub：https://github.com/recharts
例子：http://recharts.org/en-US/exa...
三、Victory
这是一组专为 React 和 React Native 设计的模块化图表组件。 Victory 在基础方面作得很好 —— 例如坐标轴定制、标签、为单个图表传递不一样的数据集都很是简单，而且对样式和行为进行调整时很是简单直观。它真的很好用，能让你用最少的代码建立漂亮的图表。这是绝对值得一试的跨平台的库。
适用于：React，React Native
GitHub：https://github.com/Formidable...
演示：https://formidable.com/open-s...
四、React-vis
这是 Uber 开发的一个简单的可视化库，它容许你建立全部经常使用的图表类型：条形图，树形图，折线图，面积图等。它的 API 很是简单，并且很是灵活。它很轻量，动画简单但流畅。还容许基于现有元素编写自定义图表。
然而，它极简主义的造型可能并不适合每一个人的口味（但我喜欢它！）。虽然反响平平，但其文档简单易读。
适用于：React
GitHub：https://uber.github.io/react-...
例子：https://uber.github.io/react-...
五、ApexCharts
这是一个至关简洁的 SVG 图表库，还附带 Vue.js 和 React 包装器。它在不一样设备上的效果看起来都很不错，并且该库容许自定义徒步，并提供全面的文档。在较大的数据集上性能可能会受到影响，所以请确保它确实适合你的项目。根据 ApexCharts 的做者 Juned Chhipa 的说法，该库是为了更容易缩放、平移、滚动数据、在图表上放置信息性注释等目的而写的。
这个库比较新，还有很大的发展空间，但若是响应性和互动性对你来讲特别重要，那么这个漂亮的库是值得一试的！
适用于：React，Vue.js，纯 JavaScript
GitHub：https://github.com/apexcharts
例子：https://apexcharts.com/javasc...
六、Chart.js
一个很是受欢迎的开源库，在GitHub上超过 4 万 star。它是轻量级的，容许你用 HTML5 Canvas 元素构建响应式图表。能够轻松地对折线图和条形图进行混合和匹配以组合不一样的数据集，这是很是棒的功能。
Chart.js 默认为你提供六种不一样的图表类型，它支持响应式，而且对初学者很是友好。它也是我处理大数据集时的首选库。绝对是最有趣的开源库之一。
适用于：React，Vue.js
GitHub：https://github.com/chartjs/Ch...
例子：https://www.chartjs.org/sampl...
七、Echarts
百度建立的这个库对于 Web 的数据可视化很是有用。它也提供英文版本，适用于大数据集。它还支持 SVG 和 Canvas 渲染。
适用于：全部环境
GitHub：https://github.com/ecomfe/ech...
例子：https://ecomfe.github.io/echa...
八、Frappe Charts
这是一个很是简单的库，用于零依赖关系的图表。它是开源的，只有 17 个贡献者，是本列表中最小的库之一。
Frappe Charts 的灵感来自一个相似 GitHub 视觉效果的软件包，支持折线图，条形图和其余类型的图表。若是你正在找一个小巧轻量的包，这就是其中一个！
适用于：任何环境
GitHub：https://github.com/frappe/charts
官网：https://frappe.io/charts
九、Nivo
Nivo 是一个基于 D3 和 React 的漂亮框架，提供十四种不一样类型的组件来呈现你的数据。它于 2017 年发布，在2017 年 8 月 20 日做为 ProductHunt 的产品推出。
Nivo 提供了许多自定义选项和三个渲染选项：Canvas，SVG，甚至基于 API 的HTML。它的文档很是出色，Demo 可配置且有趣。这是一个高级库，很是简单，不过提供自定义可视化的余地很小。
适用于：React
GitHub：https://github.com/plouc/nivo
官网：https://nivo.rocks/
十、Google Charts
一个很是流行的图表Web服务，我根本没法把它从列表中删除。对于许多人来讲，它是首选的 JS 库，由于它提供了多种预先构建的图表类型，例如条形图、折线图、区域图、日历图、地理图表等等。然而，对我来讲，在大多数状况下，这个库有点过度，坦率地说我不建议使用它。
它是免费的，但不是开源的（和每一个 Google 产品同样）。它在默认状况下不是响应式的，但你可使用代码调整图表大小。根据图表类型，有不一样的自定义选项，它并不彻底适合初学者。并且你必须直接从 Google URL 而不是 NPM 包加载它。
适用于：任何环境
Google Charts 官网：https://developers.google.com...）
文档：https://developers.google.com...
商业图表库
有些库为我的提供了免费版，但你须要付费才能在商业应用中使用它们。下面列出的都是大公司经常使用的。由于它们都是真正全面的、可定制的，并提供了很好的客户支持。若是你是一个企业，你应该检查出来。
十一、amCharts
这是最热门的图表库之一。它漂亮设计确实可以使它在竞争中脱颖而出。 苹果、亚马逊、美国宇航局和许多知名公司都是 amCharts 的用户，这是很是使人印象深入的。
amCharts 是一种商业工具，每一个网站许可的起价为 180 美圆。做为投入的回报，你能够得到所需的全部类型的图表，包括地理地图和出色的用户支持，平均响应时间少于3小时。这对大公司来讲是一个很好的解决方案。
适用于：Angular，React，Vue.js，普通JS应用，TypeScript
GitHub：https://github.com/amcharts/a...
官网：https://www.amcharts.com/
十二、CanvasJS
这是另外一种商业工具，提供可以跨设备和浏览器的精美图表。不过它缺乏一些图表类型，例如网络图表、迷你图和仪表图。此外它的学习曲线很是陡峭。
另外一方面，即便有多达 100k+ 的数据点，也很是的快，而且工做流畅。提供了四个默认主题，应该可以适合大多数场景。他们的客户名单也使人印象深入：Apple、博世、西门子、惠普、微软等。
适用于：Angular，React，jQuery，纯 JavaScript
官网：https://canvasjs.com/
演示：https://canvasjs.com/javascri...
1三、Highcharts
一个发布于 2009 年的 JS 库，基于 SVG ，支持旧版浏览器的 VML 和 Canvas。 它提供了不一样的项目模板。 Highcharts 可以与旧版浏览器兼容，其中包括 Internet Explorer 6。
对于非开发人员来讲，这是一个很好的解决方案，由于它有一个集成的 WYSIWYG（所见即所得）图表编辑器。它的学习曲线很是流畅，并被许多主要参与者使用，如 Facebook 或微软 —— 甚至有人声称世界上最大的 100 家公司中有 72 家曾经使用过它。这是一个付费的解决方案，价格为1500美圆，无限制的商业许可证。
然而在光鲜的外表之下，感受就像它是在 2009 年写的。最近个人一位同事带我体验了它，让我告诉你，这并非很愉快。当你不是在深刻到代码层摆弄它时，它很好用，可是当你想要。。。这是一件苦差事。
适用于：任何环境
GitHub：https://github.com/highcharts...
官网：https://www.highcharts.com/
1四、Zoomcharts
另外一个商业 JS 数据工具，自称为 “世界上最具交互性的 JavaScript 图表库。” 除了反应灵敏以外，它主要关注多点触控手势和在各类设备上的原生感受。该库自夸为美观的可视化，只需不多的代码就能够轻松地部署在你的产品中。
Zoomchatrts 是基于 Canvas 的，在相同的数据量下，使用默认设置，它的速度比基于 SVG 的竞争对手快20倍。我找不到 Zoomcharts 的确切价格，但我发现有一些评论称它 “价格昂贵”。但不管价格怎样，做为回报，你都会获得惊人的互动性、多点触控手势和高品质的用户支持。
适用于：任何环境
官网：https://zoomcharts.com/en/
Demo：https://zoomcharts.com/en/jav...
愈来愈多的数据可视化库证实了可视化对于 Web 的重要性 —— 这很是使人兴奋！我但愿这个列表能够帮助你在将来的项目中建立漂亮的图表。祝好运！
本文首发微信公众号：jingchengyideng
欢迎扫描二维码关注公众号，天天都给你推送新鲜的前端技术文章
