15 个用于创建漂亮图表的 JavaScript 库

仪表板是前端开发中常见的一个功能需求，对于一个平台来说仪表盘是一个具有吸引力的功能，实时的动态数据变化可以很好的增强平台的整体设计。在本文中，将展示一些用于图形和图表的最佳 JavaScript 库，这些库将有助于为未来的项目创建精美且可自定义的图表。虽然大多数库都是免费和开源的，但其中一些库提供了带有附加功能的付费版本。

图表库索引

下面三个是比较流行的 JavaScript 图表库：

• ECharts 一个基于 JavaScript 的开源可视化图表库

• D3.js ：最受欢迎的，有很好的支持，但学习曲线陡峭

• Plot.ly ：非常适合科学制图，建立在 D3.js 之上

• Chart.js ：简单易用

下面是其他的 JavaScript 图表库，可以根据自己项目要求选择适合的：

• Google Charts

• Chartist.js

• Recharts

• ZingChart

• Highcharts

• Fusion Charts

• Flot

• amCharts

• CanvasJS

• ToastUI

• AnyChart

ECharts

ECharts 是一个使用 JavaScript 实现的开源可视化库，涵盖各行业图表，满足各种需求，也是前端项目中大屏应用最多的。其遵循 Apache-2.0 开源协议，免费商用。

ECharts 兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari 等）及兼容多种设备，可随时随地任性展示。

点击这里查看丰富的图标示例集合。

D3.js：数据驱动的文档

当想到图表需求时，第一个想到的应该就是 D3.js。作为一个开源项目，D3.js 无疑带来了许多强大功能。动态属性、Enter 和 Exit、强大的转换以及对 jQuery 的语法熟悉等特性使其成为用于图表的最佳 JavaScript 库之一。 D3.js 中的图表通过 HTML、SVG 和 CSS 呈现。

与许多其他 JavaScript 库不同，D3.js 不附带任何开箱即用的预构建图表。但是，可以查看使用 D3.js 构建的图表列表 作为入门教程，D3.js 支持多种图表类型。

对于初学者的一个缺点可能是其陡峭的学习曲线，但有许多教程和资源可以帮助入门。D3.js 不适用于 IE8 等旧版浏览器，但是基本支持主流浏览器。

Plotly.js

Plotly.js 是第一个用于 Web 的科学 JavaScript 图表库。它自 2015 年以来一直是开源的，这意味着任何人都可以免费使用它。 Plotly.js 支持 20 种图表类型，包括 SVG 地图、3D 图表和统计图，它建立在 D3.js 和 stack.gl 之上。

ChartJS

ChartJS 为图表提供了漂亮的平面设计，它使用 HTML5 Canvas 元素进行渲染并支持所有现代浏览器 (IE11+)。ChartJS 图表默认是响应式的，它们在手机和平板电脑上运行良好，开箱即用有 8 种不同类型的图表（折线图、条形图、雷达图、圈和饼图、极区、气泡、散点图、区域），以及混合它们的能力，并且所有图表都是动画和可定制的。对追求其展现和动画效果的项目，ChartJS 是个不错的选择，这里有丰富的示例。

Chartist.js

Chartist.js 提供了漂亮的响应式图表。就像 ChartJS 一样，Chartist.js 是一个对使用高价 JavaScript 图表库感到沮丧的社区的产物。它使用 SVG 来呈现图表。它可以通过 CSS3 媒体查询和 Sass 进行控制和定制。另外，Chartist.js 提供了很酷的动画，这些动画只能在现代浏览器中使用。

可以在 Chartist.js 示例页面探索和使用不同类型的图表，这些图表是交互式的，可以即时编辑它们。

amCharts

amCharts 无疑是最漂亮的图表库之一，提供图表和地理地图（地图图表），允许高级数据可视化。

地图图表包非常令人印象深刻，允许使用几行代码创建各种交互式地图。这个包提供的一些很棒的功能包括地图投影、坐标移动和热图。有很多捆绑的地图，也可以制作自己的地图。

amCharts 使用 SVG 来呈现适用于所有现代浏览器的图表，提供与 TypeScript、Angular、React、Vue 和纯 JavaScript 应用程序的集成。查看使用 amCharts 创建的精彩示例集。

免费版的 amChart 会在每张图表的顶部留下一个指向其网站的链接。

Google Charts

对于不需要复杂自定义的简单项目，Google Charts 是一个不错的选择。它提供了许多预先构建的图表，如面积图、条形图、日历图、饼图、地理图等。所有图表都是交互式的，可以在几分钟内将它们添加到项目。

Google Charts 还带有各种自定义选项，有助于改变图表的外观。图表使用 HTML5/SVG 呈现，为 iPhone、iPad 和 Android 提供跨浏览器兼容性和跨平台可移植性，它还包括用于支持旧 IE 版本的 VML。

Recharts

Recharts 是一个可组合的图表库，用于使用解耦、可重用的 React 组件构建图表，它建立在 SVG 元素和 D3.js 之上，这里可以查看示例代码。

ZingChart

ZingChart 提供灵活、交互式、快速、可扩展和现代的产品，用于快速创建图表。产品被苹果、微软、Adobe、波音和思科等公司使用，同时支持使用 Ajax、JSON、HTML5 快速提供美观的图表。ZingChart 提供超过 35 种响应式图表类型和模块，还可以实时显示数据。可以通过 CSS 设置样式和主题，并且可以快速呈现大数据。

几乎所有图表的版本都可以免费试用，点击查看丰富的示例集，但对于无水印输出，需要根据业务规模购买 ZingChart 的付费许可证之一。

Highcharts

Highcharts 是另一个非常流行的用于构建图表的库。它带有许多不同类型的酷动画，足以吸引许多眼球到网站或者项目。就像其他库一样，Highcharts 带有许多预先构建的图形，如样条、面积、areaspline、柱、条、饼图、散点图等，这些图表都支持响应性，此外，Highcharts 还提供了一些高级功能，例如向图表添加注释。

使用 Highcharts 的最大优势之一是与旧浏览器的兼容性，至可以追溯到 Internet Explorer 6。标准浏览器使用 SVG 进行图形渲染，在旧版 Internet Explorer 中，图形是使用 VML 绘制的。

虽然 Highcharts 可供个人免费使用，但需要购买许可证才能用于商业用途。

FusionCharts

FusionCharts 算是是最古老的 JavaScript 图表库之一， 2002 年发布第一个版本。拥有超过 100 多张图表和 1400 多张地图，可以说 FusionCharts 是最全面的 JavaScript 图表库。它提供与所有流行的 JavaScript 框架和服务器端编程语言的集成。图表使用 HTML5/SVG 和 VML 呈现，以实现更好的可移植性和与旧浏览器的兼容性（甚至可以兼容到 Internet Explorer 6）。这种向后兼容性使其成为很长一段时间内非常受欢迎的选择。可以以 JPG、PNG、SVG 和 PDF 格式导出图表。

可以在个人项目中免费使用带水印版本的 FusionCharts，对于商业用途需要购买商业许可证才能去除水印。

Flot

Flot 是一个用于 jQuery 的 JavaScript 图表库，也是最古老和最受欢迎的图表库之一，不过目前没有新的版本，代码停留在 3 年前。

Flot 支持线、点、填充区域、条以及这些的任何组合。它还兼容旧版浏览器（IE6 和 Firefox 2）。Flot 完全免费使用，点击查看 Flot 创建的示例图表列表。

CanvasJS

CanvasJS 是一个响应式 HTML5 图表库，具有高性能和简单的 API，支持 30 种不同的图表类型（包括折线图、柱形图、条形图、面积图、样条图、饼图、甜甜圈图、堆叠图等）。所有图表都包含工具提示、缩放、平移、动画等交互功能。CanvasJS 可以与流行的框架（Angular、React 和 jQuery）和服务器端技术（PHP、Ruby、Python、ASP.Net、Node.JS、Java）。

这是 CanvasJS 图表示例集合。

TOAST UI Chart

TOAST UI Chart 是一个开源 JavaScript 图表库，支持包括 IE8 在内的旧版浏览器。它包括所有常见的图表类型和地图，可以使用用户定义的主题进行自定义。这些图表也可以组合成组合图表，例如带线的列或带区域的线等，查看示例的完整列表。

AnyChart

AnyChart 是一个轻量级且强大的 JavaScript 图表库，其中包含旨在嵌入和集成的图表。AnyChart 允许开箱即用地有 68 个图表，并提供创建自己图表类型的功能，可以将图表保存为 PDF、PNG、JPG 或 SVG 格式的图像。

注册后即可免费下载带水印的版本，但是要商用或者去掉水印就需要购买许可证。

总结

具体项目中使用哪一种图标库，可以根据项目及团队情况进行选择，对于国内的开发者应该会首选 ECharts 。对于希望视觉更加可控，则可以选择 D3.js 。上述库都在 Stack Overflow 论坛获得了良好的支持，文档都比较丰富。