JavaScript 图表库：13 个热门选择

#1 – Chart.js

Chart.js 是一个实用的图表库，它使用 HTML5 的<canvas>来呈现图表。

该库很容易成为简单项目的首选，因为它默认是响应式的，您还可以根据用户行为应用动画效果。

以下是您可以使用 Chart.js 创建的 8 种图表类型：

• 面积图
• 条形图
• 气泡图
• 甜甜圈和饼图
• 折线图
• 混合图表类型
• 极地区域图
• 雷达图

就易用性而言，语法很简单，即使您以前从未使用过 JavaScript，创建新图表也很简单。

 const data = { labels: [ 'Red', 'Blue', 'Yellow' ], datasets: [{ label: 'My First Dataset', data: [300, 50, 100], backgroundColor: [ 'rgb(255, 99, 132)', 'rgb(54, 162, 235)', 'rgb(255, 205, 86)' ], hoverOffset: 4 }] };

如果您想使用动态函数和数据池扩展图表，该库有一个插件系统，您可以使用它来添加新功能。

Chart.js 示例

请参阅 Sven (@hofmannsven) 在 CodePen 上的 Pen Proof of concept：Chart.js with Background Gradient。

Chart.js 其他资源

• Chart.js + Next.js = 美丽的数据驱动仪表板
• Chart.js 入门； 基于任务的学习

#2 – D3.js

首先让我说D3 是一种数据可视化工具，而不是传统的图表库。

D3 允许您指定数据集并将其绑定到 DOM，然后您可以使用库函数将该数据转换为独特的可视化表示。 至于视觉呈现，D3 利用 HTML 表格、SVG 和<canvas>在页面上呈现数据。

如果您曾经见过其中一个带有多个交互式数据点的基于地理的旋转地球仪，那么该演示文稿很可能是使用 D3 构建的。 但是，它也适用于实际用途，例如您可以在下面的演示中看到的基本图表。 最后，您需要参考 D3 的官方教程部分来探索其更复杂的功能。

D3.js 示例

请参阅 CodePen 上 Web Dev (@ronaldmarin) 的 Pen D3 Chart + ReactJS。

D3.js 附加资源

• D3.js 教程
• 构建 D3.js 日历热图

#3 – Apache ECharts

Apache ECharts 如此受欢迎的原因之一是您可以直接访问数百个预制图表示例。 您可以通过访问示例目录自行检查。 本页涵盖了线条、条形图、饼图、散点图、热图、图形等类别中的图表和示例。

而且，每个示例都包含 JavaScript 和 TypeScript 代码示例。 但这还不是全部，使用这个库还有一些实际的好处。 这里有几个：

• 数据流。 想要创建包含数百万个数据点的交互式图表？ ECharts 使用 WebSockets 流式传输数据，因此即使是非常大的数据集也可以异步加载。
• 移动友好。 当用户在他们的移动设备上查看 EChart 时，图表本身已经过优化以提供交互功能——缩放、平移和 SVG 渲染，以确保最佳交付性。
• 动态数据。 您可以为 ECharts 提供多个（单独的）数据点，该库将自动为图表设置动画，为用户提供交互体验。
• 可访问性。 Apache ECharts（v4.0 及更高版本）遵循 WAI-ARIA 指南构建。

您还可以使用外部 CDN 在您的网站上显示图表。

Apache ECharts 示例

请参阅 Vale (@vsigno) 在 CodePen 上的 Pen Apache Echart 示例。

Apache ECharts 其他资源

• 在一周内构建更好的 GitHub Insight 工具

#4 – 情节

Plotly 是 Dash 的母公司，Dash 是一种用于数据应用程序部署的低代码解决方案。 他们在现场开发了自己的图形库——Plotly 。

使用 Plotly，您可以创建最基本的图表可视化，但该库的真正强大之处在于能够生成基于统计的图表、3D 数据表示和基于财务数据的图表。

它既可以作为 Node.js 模块使用，也可以直接从 CDN 使用。

情节示例

请参阅 CodePen 上的 plotly (@plotly) 对单击事件添加注释。

#5 – 冰沙

Frappe 图表库是由创建 Frappe 框架的人制作的。 这个库非常简单。 而这种简单性是图书馆受欢迎的一个主要因素。

该库不需要外部依赖，只需几行代码即可呈现适合移动设备的 SVG 图表。 这是基本轴图的代码示例：

 data = { labels: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], datasets: [ { values: [18, 40, 30, 35, 8, 52, 17, -4] } ] } new frappe.Chart( "#chart", { data: data, type: 'bar', height: 180, colors: ['red'] });

这个小片段将转换为这样的图表：

如果您计划实时更新数据或导出数据，还支持混合图表（多个图表合二为一）、注释、热图和 API。

冰沙示例

请参阅 Jang Rush (@weakish) 在 CodePen 上的 Pen Frappe Hello World。

#6 – ApexCharts

ApexCharts 是一个非常传统的图表库。 ApexCharts 和 Frappe 之间的主要区别（例如）是 ApexCharts 提供了更多的演示。 但是，它还为 React、Vue 和 Angular 等流行框架提供原生支持。 这也意味着所有的演示图表都有各自的样本，这些样本都是用上述框架的语法编写的。

至于功能，所有图表均以 SVG 格式生成，并且默认对移动设备友好。 您还可以利用流畅的动画和注释等功能，并通过选择 10 种示例样式中的一种来自定义图表主题调色板。

ApexCharts 示例

请参阅 CodePen 上 ApexCharts (@apexcharts) 的 Pen Realtime Dashboard。

#7 – G2

我最近多次谈到 Ant Design，包括在我关于 React.js 和 Vue 的组件库的文章中。 Ant 不仅在 GitHub 上非常受欢迎，而且世界各地的社区都喜欢它们。

G2 图表库（或者他们称之为“可视化语法”）是 Ant Design 使用 Ant Design System 实现的图表系统。 我强烈建议您查看 AntV 主页，在那里您可以找到许多与实时数据可视化相关的其他库。

它最常用于构建管理仪表板、创建数据路径以及使用其渲染引擎制作交互式数据可视化示例。 该引擎可以通过 WebGL、Canvas 和 SVG 渲染图表和数据向量。 而且由于该库是可插拔的，您可以通过更强大的库（如 D3.js（我们之前看到））进一步增强您的图表演示。

#8 – 粗略可视化

Jared Wilber 的 roughViz 库是 3 个不同库的组合：D3.js、Rough.js 和 Handy——手绘草图处理器。 从上面的示例屏幕截图中可以看出，这不是典型的图表库。 roughViz 完全是为了帮助您使用 JavaScript 创建手绘草图样式的图表而构建的。

这种类型的图书馆将成为个人项目的重要补充，换句话说，这些项目需要比传统的专业风格方法更具创造性的火花。 语法本身尽可能简单，非常符合 Frappe 和 ApexCharts 之类的。

您可以在下面的演示中亲自看到这一点。

粗略的例子

请参阅 Danny Englishby (@DanEnglishby) 在 CodePen 上的 Pen RoughViz 演示。

#9 – 轻量级图表

如果您正在从事与金融相关的项目（或与此相关的加密货币），很明显，前面提到的许多图表库都不会削减它。 因此，这里是轻量级图表——一个专门为显示基于财务的图表和图形而构建的图表库。

这个库不仅是开源的和轻量级的，而且它还包含了显示有关财务及其动态结构的图表数据所需的所有必要功能。

其中一项功能是数据流，它允许您将实时数据传递到画布，然后在用户无需刷新页面的情况下对其进行更新。 您可能要考虑的另一个因素是性能，正如该库主页上所解释的那样，这应该不是问题，

“我们的图表解决方案从一开始就设计用于处理庞大的数据阵列。 即使有数千条柱线，即使每秒多次更新新的报价，图表也能保持响应和灵活。”

查看下面的演示以了解它，以及许多图表选项和功能。

轻量级图表示例

请参阅 truong (@truong160196) 在 CodePen 上的 Pen tradingview 高级图表。

轻量级图表其他资源

• 您的应用程序的财务图表

#10 – 广告牌

Billboard 是一个基于 D3 的界面图表库。 它具有您所期望的所有现代功能——SVG 渲染、对移动设备的触控支持、简单的界面和出色的 API 文档。

然而，我最喜欢的功能，也可以说是其他许多人最喜欢的功能是，Billboard 提供了 230 多个可以使用此库创建的图表示例。 这些示例分为基本、轴、数据、网格、交互、区域等图表类别。

这意味着您不仅可以为您的项目及其要求找到正确的图表类型，还可以探索其他选项并查看特定示例是否引起了您的注意。

Billboard.js 示例

请参阅 CodePen 上 DTCC (@dtcc) 的 Pen Chart Requests – Billboard.js。

#11 – 透视

Perspective 是 FINOS（Open-Source Fintech）运营的项目之一，FINOS 本身也是 Linux 基金会的一部分。 就像轻量级图表一样——Perspective.js 旨在为基于财务的项目提供图表解决方案。 但是，它的功能远不止于此，并且在与电子商务、数据网格和货运细分相关的项目中经常使用。

如果您曾经看过有关 Covid-19、机场和奥运会等重大体育赛事的图表，那么界面和数据流集成很有可能是通过 Perspective 完成的。 它具有丰富的用户界面，针对数据流和复杂的实时分析进行了优化。

它适用于 JavaScript 和 Python 开发人员，并使用自定义元素 Web 组件。

#12 – Toast UI 图表

如果有的话，就图表样式及其设计而言，Toast UI 图表库是另一个需要考虑的选择。 这里的功能与我们已经看过的库非常相似。

我认为 Toast UI 与其他选择的不同之处在于它的 API 规范。 它可能是您可以获得的更好的 API 之一，并且它附带免费的深入文档。 API 功能之一是Instances ，这是一种让您动态更改图表数据的方法，因为您的数据源已更改，或者因为用户输入。

Toast 支持的图表类型包括条形图、柱形图、线形图、区域图、气泡图、树形图、雷达图、径向条形图等。 使用此库的首选方式是通过 npm，但可以使用 CDN，您所要做的就是指定一个div id="chart"容器来显示图表。

#13 – 重新图表

如果您主要使用 React.js，则 Recharts 库是在 D3.js 的基础上使用 React 构建的。 它尊重原生 React.js 组件架构，使用 Recharts 创建的图表可以解耦并作为您需要的页面上的单独组件重用。

所有图表示例都预先编写了组件结构，以防您想在现有项目中尝试它们。 该库于 2016 年首次发布，但仍在积极开发中。

图表示例

请参阅 CodePen 上 binu (@binutomy) 的 Pen ReCharts。