了解 2021 年的前端数据可视化工具生态系统

1. 通用图表库

2. 低级且复杂的数据可视化工具

3.表格和数据网格

4. 时间线图表和基于时间的工具

5.地理空间和地图工具

6.词云

7. 3D可视化工具

结语

数据是新的石油，在 2021 年仍然如此。但是，要将数据转化为洞察力，我们需要进行分析和可视化。

那么，问题来了：如何选择正确的工具？🛠

在这篇文章中，我们将介绍可用于数据可视化的 JavaScript 框架和库。除了列出几个框架之外，我还想做更多的事情——我将根据数据类型或数据可视化来划分列表，因为“一刀切”并不适合所有情况。数据种类繁多，每种都需要特定的可视化策略。

我们将经历...

1. 📈 通用图表库
2. 📉 低级且复杂的图表库
3. 🏁 表格和数据网格
4. ⏰ 时间线图表和基于时间的工具
5. 🗺 地理空间和地图工具
6. ⛅️词云
7. 🌎 3D 可视化工具

此外，为了帮助您为项目选择正确的工具，我将对每个框架进行简要概述，即

• 💵 无论是付费的还是开源的
• ⭐️ GitHub 上的 stargazer 数量（如果是开源的话）
• 📅 上次发布时间（截至今天）
• 🧱 软件包的大小（npm 上解压后的大小），以及
• 🔌 它是否特定于某个框架（例如，React）或者它可以在任何基于 JavaScript 的项目中使用。

我决定根据 stargazer 的数量对框架和库进行排序，因为这大致可以估算出它们的受欢迎程度和社区规模（但这是有争议的）。

另请注意，您不会在这里找到互联网上所有数据可视化库的详尽列表。但是，我希望这篇文章能够帮助您建立对生态系统的理解。

📊 锦上添花的是：我将提供由 Cube.js 团队构建的数据可视化工具指南和教程的链接。Cube.js可帮助您轻松地在任何数据库上创建 API，并且它通常被用作分析数据可视化的高性能后端。

1. 通用图表库

第一类可能是最受欢迎的。大多数数据都可以用图表来可视化：要么是时间图表（在图表中包含时间值，例如在 X 轴上），要么是非时间图表（只有数值或标签）。这些图表包括条形图、饼图、折线图等。由于它是最常用的图表类型，因此有很多选项可供选择。

Chart.js

💵 OSS / ⭐️ 51.8K / 📅 2020年10月19日 / 🧱 1.44 MB / 🔌 通用

为设计人员和开发人员提供简单而灵活的 JavaScript 图表

最受欢迎的开源库，用于构建响应式条形图、饼图和折线图。我认为它是大多数项目的首选库，因为它适用于大多数用例。

📊 请参阅带有动态数据集的 Chart.js 示例，了解如何动态修改使用 Chart.js 显示的数据。

图表

💵 OSS / ⭐️ 15.6K / 📅 2021 年 1 月 13 日 / 🧱 11.2 MB / 🔌 React

基于 React 组件构建的可组合图表库

根据描述，“它建立在 SVG 元素之上，并且轻量级地依赖于 D3 子模块。”对于基于 React 的项目来说，这是一个不错的选择，因为你可以将其作为组件原生使用，例如

<LineChart width={500} height={300} data={data}>
<XAxis dataKey="name" />
<YAxis />
<CartesianGrid stroke="#eee" strokeDasharray="5 5" />
<Line type="monotone" dataKey="uv" stroke="#8884d8" />
<Line type="monotone" dataKey="pv" stroke="#82ca9d" />
</LineChart>

📊 请参阅React Dashboard：终极指南，获得全面的一体化演练，探索如何使用 Recharts 构建仪表板并将其连接到后端。

Highcharts

💵 付费和非商业许可证 / ⭐️ 9.8K / 📅 2020 年 10 月 22 日 / 🧱 43.2 MB / 🔌 通用

Highcharts 是一个基于 SVG 的 JavaScript 图表库，可为旧版浏览器提供 VML 和画布支持。

Highcharts 非常适合那些产品高度依赖数据可视化的大型公司。您可以在 GitHub 上查看代码，并尝试将其用于非商业用途。如果您想将其用于商业用途，可以购买 Highcharts 许可证，或者购买 Highcharts 股票、地图或甘特图插件。我们稍后也会在本文介绍这些内容。

📊 请参阅带有 Cube.js 的 React Highcharts 示例，获取有关使用众多 Highcharts 组件创建仪表板的实用教程。

Chartist.js

💵 OSS / ⭐️ 12.4K / 📅 2019 年 9 月 11 日 / 🧱 535 KB / 🔌 通用

Chartist.js 是一个对其他图表库提供的功能感到失望的社区的产物。

这个库不像其他库那样维护得那么积极，但是由于它体积小且没有依赖项，仍然值得一提。不到一兆字节，哇！

与其他方法一样，它使用 SVG，它很灵活并且具有明确的关注点分离，即 CSS 位于 CSS 中，JS 位于 JS 中，这可能并不适合所有项目，考虑到许多项目都在使用 CSS-in-JS 方法，但它仍然值得我们关注。

胜利

💵 OSS / ⭐️ 8.6K / 📅 2020 年 9 月 1 日 / 🧱 2.81 MB / 🔌 React

用于构建交互式数据可视化的可组合 React 组件生态系统。

由Formidable Labs开发，该公司开发了urqls和Spectacle等工具。提供了一个既有主见又完全可覆盖的 React 组件，可在 Web 和移动端使用（victory-native）。

React-vis

💵 OSS / ⭐️ 7.6K / 📅 2019 年 4 月 19 日 / 🧱 1.81 MB / 🔌 React

React 组件集合，用于呈现常见的数据可视化图表，例如折线图/面积图/条形图、热图、散点图、等高线图、六边形热图、饼图和环形图、旭日图、雷达图、平行坐标图和树形图。

这个库对 React 友好、高级且可定制、富有表现力且行业强大，因为它得到了 Uber 的支持，所以如果您遇到问题，您很可能会得到答案。

amCharts

💵 OSS / ⭐️ 864 / 📅 2020 年 12 月 18 日 / 🧱 22.6 MB / 🔌 通用

数据可视化的首选库。当你没有时间学习新技术时。

虽然它不像其他库那样受欢迎，但它维护得非常积极，而且号称易于使用。如果你想将它与其他数据可视化库结合使用，用于地理和时间线数据，它可能是一个不错的选择。我将在地理和时间线部分介绍这些内容。

📊 请参阅Slack Vibe（Slack 的开源分析工具），了解使用 amCharts 可视化 Slack 数据的分析工具的故事。

AnyCharts

💵 付费及非商业许可证 / ⭐️ 284 / 📅 2020 年 9 月 29 日 / 🧱 11.9 MB / 🔌 通用

交互式 JavaScript 图表旨在嵌入并集成到 Web、桌面和移动应用程序中。

这是一个非商业许可的付费库，非常适合想要节省图表开发时间和金钱的公司，因为它已经预先配置好了很多图表，只需插入数据即可。即使是像跳跃线图、旭日图或圆形仪表盘这样的小型图表，也可以轻松使用。

2. 低级且复杂的数据可视化工具

这里有一些工具，可以让您以更复杂、更高级的方式可视化您的数据。采用这种方法的主要原因要么是因为任何简单的图表都无法用于数据可视化，要么是因为您需要对元素进行更高级的交互。

这种方法需要更高级、更专业的领域知识，例如 SVG 绘图或 WebGL。并非每个人都能获得这样的资源，因此有一些库针对简单情况提供了更简单的 API。

D3.js

💵 OSS / ⭐️ 95.4K / 📅 2021 年 1 月 22 日 / 🧱 1 MB / 🔌 通用

D3（或 D3.js）是一个使用 Web 标准进行数据可视化的 JavaScript 库。D3 可帮助您使用 SVG、Canvas 和 HTML 为数据赋予生命力。D3 将强大的可视化和交互技术与数据驱动的 DOM 操作方法相结合，让您能够充分利用现代浏览器的功能，并自由地设计适合您数据的可视化界面。

这可能是互联网上最受欢迎的底层数据可视化库。它如此受欢迎有几个关键原因：首先，它的灵活性（许多其他数据可视化工具都基于 D3.js，我们将在下文讨论）；其次，它拥有庞大的示例库，几乎涵盖了你能想到的所有可视化效果。

📊 请参阅D3 仪表板教程，以获得一个良好的起点来学习如何使用带有后端的 D3.js。

<d3-based-tools>

这里有几个基于 D3 的库：

Plotly.js

💵 OSS / ⭐️ 12.7K / 📅 2020 年 12 月 21 日 / 🧱 60.4 MB / 🔌 通用

Plotly.js 建立在 D3.js 和 stack.gl 之上，是一个高级的声明式图表库。plotly.js 附带 40 多种图表类型，包括 3D 图表、统计图表和 SVG 地图。

Plotly 让您能够将两个词的优点完美结合：简单的 API 和 D3.js 的强大功能。它非常适合快速原型设计，也适用于需要复杂图表且需要及时完成的​​复杂项目。

Plotly 也有商业产品，但更多的是涉及其端到端开发和部署平台 Dash Enterprise。

C3.js

💵 OSS / ⭐️ 9K / 📅 2020 年 8 月 8 日 / 🧱 1.46 MB / 🔌 通用

基于 D3 的可重复使用图表库。

符号学

💵 OSS / ⭐️ 2.1K / 📅 2021 年 1 月 21 日 / 🧱 2.77 MB / 🔌 React

Semiotic 是一个结合了 React 和 D3 的数据可视化框架

陶查茨

💵 OSS / ⭐️ 1.9K / 📅 2020 年 2 月 26 日 / 🧱 1.54 MB / 🔌 通用

Taucharts 是一个以数据为中心、基于 D3 并充满热情设计的 JavaScript 图表库。

</d3-based-tools>

Apache ECharts

💵 OSS / ⭐️ 44.9K / 📅 2021 年 1 月 16 日 / 🧱 36.3 MB / 🔌 通用

快速构建基于 Web 的可视化的声明式框架

另一个开源图表库，拥有大量预定义图表可供使用。我将其归入这一类别的原因是，它不仅提供简单的图表（例如折线图和条形图），还提供更复杂的图表（例如 3D 地球图、3D 线图、Scatter GL 等）。查看其示例页面，准备好被它惊艳到吧。

拉斐尔

💵 OSS / ⭐️ 10.8K / 📅 2019 年 8 月 14 日 / 🧱 1.11 MB / 🔌 通用

Raphaël 是一个小型 JavaScript 库，可以简化您在网络上使用矢量图形的工作

Raphael 与 D3.js 类似，它也允许您在 html 中绘制自己的 svg 图形。例如

// Creates canvas 320 × 200 at 10, 50
var paper = Raphael(10, 50, 320, 200);

// Creates circle at x = 50, y = 40, with radius 10
var circle = paper.circle(50, 40, 10);
// Sets the fill attribute of the circle to red (#f00)
circle.attr("fill", "#f00");

// Sets the stroke attribute of the circle to white
circle.attr("stroke", "#fff");

它目前缺乏积极的维护，现在大部分人都更倾向于使用 D3.js。但它仍然很受欢迎，而且上次发布也才不久，所以它确实值得列入名单。

3.表格和数据网格

有些数据是表格形式，因此应该放在表格中。但表格更特定于框架，因此很难在一篇文章中收集所有框架的数据表。不过，这里有一些选择。

农业电网

💵 OSS 和付费 / ⭐️ 6.9K / 📅 2021 年 1 月 15 日 / 🧱 n/a / 🔌 通用

支持 JavaScript / React / AngularJS / Web 组件的高级数据网格 / 数据表

或者，正如其在其网站上所声称的那样，“世界上最好的 JavaScript 网格”。它功能丰富，拥有 OSS 和企业版本，并绑定了 vanilla JS、React、Angular、Vue 甚至 Polymer。

Material UI 数据网格

💵 OSS 及付费 / ⭐️ 272 / 📅 2021 年 1 月 26 日 / 🧱 n/a / 🔌 React

用于 React 的快速且可扩展的数据表和数据网格。

它是一个功能丰富的组件，是对整个React 组件集Material UI的补充。它有 MIT 版本和商业版本。

这里也有一些竞争。为了比较，我应该提到Ant Design 库中的数据表组件，如果你需要一套完整的 UI 组件，它非常适合使用。

4. 时间线图表和基于时间的工具

并非所有图表库都包含时间轴和甘特图，它们在这方面非常独特。因此，如果您需要绘制一些基于时间的数据，那么您可能会对这些库或插件感兴趣。

Highcharts 甘特图

与词云类似，您可以使用该公司提供的 Highcharts Gantt 插件。查看他们的页面了解更多信息。

amCharts 时间线

类似的方法：获取主 amCharts 库并使用附加时间线插件。

可视时间线

💵 OSS / ⭐️ 3.3K / 📅 3 年前 / 🧱 n/a / 🔌 通用

创建完全可定制的、交互式的时间线和包含项目和范围的二维图表。

这是上述两个库的开源替代方案。它非常灵活，设计精良，尽管它的上一次发布已经是大约 3 年前了。

5.地理空间和地图工具

现在我们讨论地理数据，这种数据类型具有地理成分，应该具有基于地图的数据可视化。

传单

💵 OSS / ⭐️ 30K / 📅 2020 年 9 月 4 日 / 🧱 5.96 MB / 🔌 通用

Leaflet 是领先的开源 JavaScript 库，用于开发移动端友好的交互式地图。它包含约 39 KB 的 gzip JavaScript 代码和 4 KB 的 gzip CSS 代码，却拥有大多数开发者所需的所有地图功能。

Leaflet 轻量级、简单且灵活，可能是目前最受欢迎的开源地图库。Leaflet 由 Vladimir Agafonkin 开发，他目前在 Mapbox（见下文）和 OSS 社区工作。

关于如何使用 Leaflet，有很多教程和指南。因此，开始并持续使用 Leaflet 非常省时省力。

Mapbox

💵 基本免费 & 付费 / ⭐️ 7.2K / 📅 2021 年 1 月 28 日 / 🧱 34 MB / 🔌 通用

Mapbox 是一个面向开发人员的地图和位置云平台。

这些公司为 Foursquare、Lonely Planet 和 Facebook 等公司提供 SDK 和 API。Mapbox 功能丰富，API 易用性高，文档齐全，支持完善。您可以访问他们的示例页面。

Mapbox 并非完全免费。它为低流量应用提供免费套餐。因此，最多 25,000 位移动用户和 50,000 次网页加载是免费的。超过此限额，则需要按额外请求付费。

📊 请参阅使用 Mapbox 进行 JavaScript 地图数据可视化，获取有关 Mapbox 和不同类型地图（从热图到分级统计图）的完整指南。

谷歌地图

Google 地图的功能远不止在地图上显示地点。您可以绘制全球数据地图、创建热图，甚至调整圆圈大小。

Google 有一个 CDN URL，您需要将其包含在您的项目中或使用特定于框架的包装器，例如@react-google-maps/api。

amCharts 地图

如果您的项目已经在使用 amCharts，那么您可能对使用 amCharts 地图感兴趣。无需安装任何额外程序，amCharts 主软件包已包含创建地图可视化所需的一切。

6.词云

并非所有数据都是可量化的。有些数据只能用文字来描述。这正是词云的完美用例。有一些库可以帮你实现这一点。

d3-云

💵 OSS / ⭐️ 3.3K / 📅 3 年前 / 🧱 n/a / 🔌 通用

如果您已经将 D3.js 作为代码生态系统的一部分，那么这是一个非常棒的库。

amCharts 词云

这是 amCharts 的一个插件。更多关于 amCharts 的详细信息，请参阅本文前面的内容。要创建词云，你需要主库 +wordCloud插件。

Highcharts 词云

与 amCharts 词云类似，如果您想使用 Highcharts 制作词云，您需要modules/wordcloud.js模块。

7. 3D可视化工具

虽然我们上面观察到的每个工具都专注于平面二维数据可视化，但它还有一个维度😀以下工具有助于创建 3D 视觉效果。

Three.js

💵 OSS / ⭐️ 66.6K / 📅 2020 年 12 月 24 日 / 🧱 24.4 MB / 🔌 通用

该项目旨在创建一个易于使用、轻量级的 3D 库，并附带默认的 WebGL 渲染器。该库还在示例中提供了 Canvas 2D、SVG 和 CSS3D 渲染器。

Three.js 是数据可视化的另一种呈现方式。它使用 WebGL 在 Web 浏览器中创建和显示动画 3D 计算机图形。Three.js 不仅可以用来可视化数据，还能创作像《小小东京》（Littlest Tokyo）这样的艺术作品。数据可以呈现为任何你喜欢的形式，甚至是文学作品。它只受限于你的创造力。

vis-graph3d

💵 OSS / ⭐️ 44.9K / 📅 2021 年 1 月 16 日 / 🧱 36.3 MB / 🔌 通用

Graph3d 是一个交互式可视化图表，用于在三维图形中绘制数据。您可以通过在窗口中拖动和滚动来自由移动和缩放图形。

这是 D3.js 和 Three.js 的一个非常有趣的轻量级替代品。

结语

说实话，一个列表不可能涵盖所有内容。但我希望这篇文章能帮助你更好地了解“大佬”和数据可视化的类型。

值得一提的是，为了更好地向用户传达数据，混合搭配不同类型的数据可视化始终是一个好主意。此外，你还可以使用日期格式化库（例如Moment.js）或数字格式化库（例如numeral.js），它们可以与图表配合使用，并突出显示数据集中任何特殊或突出的数字。

此外，如果您需要 API 来为图表或数据可视化组件提供数据，请考虑使用Cube.js。

如果您对列出的任何库有任何特别的推荐或个人经验可以分享，请随时在下面发表评论！🙌