几乎不可能想象没有图表的仪表盘。它们能够快速有效地呈现复杂的统计数据。此外，一个好的图表还可以提高网站的整体设计水平。
在本文中，我将向您展示一些最好的 JavaScript 图表库。这些库将帮助您为未来的项目创建美观和可定制的图表。
虽然大多数库都是免费和开源的，但其中一些提供了付费版本，具有额外的功能。
我们的顶级JS图表库：
- D3.js – Popular, well supported but a steep learning curve.
- Plot.ly – Great for scientific charting. Built off D3.js.
- Chart.js – Simple and elegant
其他值得一提的库：
- Google Charts
- Chartist.js
- Recharts
- n3-charts
- ZingChart
- Highcharts
- Fusion Charts
- Flot
- amCharts
- CanvasJS
- ToastUI
- AnyChart
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）中的兼容性不佳，但您始终可以使用像aight插件这样的插件来实现跨浏览器兼容性。
如果您想学习D3.js，我们有一本有关使用D3进行数据可视化的书籍。
Plotly.js
Plotly.js是首个面向Web的科学JavaScript图表库。自2015年以来，它一直是开源的，这意味着任何人都可以免费使用它。Plotly.js支持20种图表类型，包括SVG地图、3D图表和统计图表。它是基于D3.js和stack.gl构建的。
Google Charts
Google Charts是一个很好的选择，适用于不需要复杂定制的简单项目。它提供了许多预构建的图表，如面积图、条形图、日历图、饼图、地理图等等。所有图表都是交互式的，您可以在几分钟内将它们添加到您的页面上。
Google Charts还提供了各种自定义选项，帮助您更改图表的外观。图表使用HTML5/SVG进行渲染，提供跨浏览器兼容性和跨平台可移植性，支持iPhone、iPad和Android。它还包括VML，以支持旧版IE。
以下是使用Google Charts构建的一些很好的示例列表。
ChartJS
ChartJS提供了美观的扁平化设计图表。它使用HTML5 Canvas元素进行渲染，并支持所有现代浏览器（IE11+）。
ChartJS图表默认具有响应式设计。它们在移动设备和平板电脑上表现良好。它内置了8种不同类型的图表（线图、柱状图、雷达图、环形图和饼图、极地图、气泡图、散点图、面积图），并支持混合使用。所有图表都是动画的，并且可定制化。
以下是使用ChartJS构建的一些示例的精选列表。
Chartist.js
Chartist.js提供了美观的响应式图表。就像ChartJS一样，Chartist.js也是由社区开发的，因为他们对使用高价值的JavaScript图表库感到不满。它使用SVG来渲染图表。可以通过CSS3媒体查询和Sass进行控制和定制。还要注意，Chartist.js提供了很酷的动画效果，只能在现代浏览器中使用。
您可以在Chartist.js示例页面上探索和玩转不同类型的图表。图表是交互式的，您可以即时编辑它们。
Recharts
Recharts是一个可组合的图表库，用于使用解耦的可重用React组件构建图表。它是基于SVG元素和D3.js构建的。请查看示例列表。
n3-charts
如果您是Angular开发人员，您肯定会发现n3-charts非常有用和有趣。 n3-charts是基于D3.js和Angular构建的。它提供了各种标准图表，以可定制的Angular指令的形式呈现。
请查看使用n3-charts构建的图表列表。
ZingChart
ZingChart提供了一个灵活、交互式、快速、可扩展和现代的产品，可快速创建图表。他们的产品被像苹果、微软、Adobe、波音和思科这样的公司使用，使用Ajax、JSON、HTML5快速呈现出漂亮的图表。
ZingChart提供了35多种响应式的图表类型和模块，也可以实时显示数据。它们可以通过CSS进行样式和主题设置，并可以快速渲染大数据。
您可以查看他们丰富的示例集。
有一个带有所有图表的品牌版本可供免费试用，但要想获得无水印的输出，您需要根据您的业务规模购买ZingChart的付费许可证之一。
Highcharts
Highcharts是另一个用于构建图形的非常流行的库。它带有许多不同类型的很酷的动画，足以吸引许多人的注意力。与其他库一样，Highcharts具有许多预先构建的图形，如样条线、区域、面积样条线、柱形、条形、饼图、散点图等。这些图表具有响应性和移动端准备性。此外，Highcharts还提供了一些高级功能，例如向您的图表添加注释。
使用Highcharts的最大优势之一是与旧版浏览器的兼容性——甚至可以兼容Internet Explorer 6。标准浏览器使用SVG进行图形渲染。在旧版Internet Explorer中，图形是使用VML绘制的。
大多数流行语言（.NET、PHP、Python、R和Java）和框架（Angular、Vue和React）以及iOS和Android都有包装器。
虽然个人使用Highcharts是免费的，但商业使用需要购买许可证。
FusionCharts
FusionCharts是最早的JavaScript图表库之一，早在2002年就已经发布。它拥有100多种图表和1400多个地图，可以说是最全面的JavaScript图表库之一。它提供与所有流行的JavaScript框架和服务器端编程语言的集成。图表使用HTML5 / SVG和VML进行渲染，以实现更好的可移植性和兼容性，即使是远古的浏览器Internet Explorer 6也能兼容。这种向后兼容性使它长期以来成为非常受欢迎的选择。您可以将图表导出为JPG、PNG、SVG和PDF格式。
您可以在个人项目中免费使用带有水印的FusionCharts版本。但是，您需要购买商业许可证才能删除水印。
Flot
Flot是一个基于jQuery的JavaScript图表库，也是最古老和最受欢迎的图表库之一。
Flot支持线条、点、填充区域、条形图以及它们的任意组合。它还兼容较旧的浏览器——包括IE6和Firefox 2。
Flot完全免费使用。以下是使用Flot创建的示例图表列表。
amCharts
amCharts 是目前最美观的图表库之一。它提供了图表和地理地图（地图图表），允许进行高级数据可视化。
Map Chart 包非常出色。只需几行代码，即可创建各种交互式地图。这个包提供了很多很棒的功能，包括地图投影、坐标移动和热图。它还提供了许多捆绑地图，也可以自己制作。
amCharts 使用 SVG 来呈现在所有现代浏览器中运行的图表。它提供了 TypeScript、Angular、React、Vue 和纯 JavaScript 应用的集成。
请查看这个由 amCharts 创建的精彩的演示集合。
amCharts 的免费版本会在每个图表的顶部留下指向其网站的链接。
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格式的图像。
AnyChart为用户提供了五种资源类型来学习库（文档、API参考、Playground、Chartopedia和常见问题解答）。
您可以在注册后免费下载带有水印的版本。但是，要摆脱品牌并将AnyChart用于商业用途，必须购买许可证。
总结一下
现在你可以根据你未来项目的需要来选择最适合你的图表库。喜欢对图表有完全控制权的开发者一定会选择D3.js。几乎所有上面提到的库都有很好的 Stack Overflow 论坛支持。
如果你正在寻找生成现成图表的工具，可以阅读《5个创建惊人在线图表的工具》一文。你也可以阅读《Creating Simple Line and Bar Charts Using D3.js》来开始使用D3.js。我们还有一个专门介绍如何使用 Google Charts 和 Angular 的系列文章，以及一本书籍：An Introduction to Data Visualization with D3.。
