2022年适用于JavaScript的8个最佳免费数据可视化库

在当今，拥有数据访问权限为个人和公司提供了巨大的竞争优势。每个大大小小的公司都喜欢尽可能多地收集有关其市场、客户和产品的信息。所有这些知识使他们能够做出明智的决定，以提高生产力和利润等。

但是，人们不喜欢查看原始数据的页面和页面。如果数据以更具视觉吸引力和组织性的方式呈现给他们，他们更有可能关注。这就是数据可视化的用武之地。在本文中，我将回顾 8 个用于 javascript 的最佳免费数据可视化库。我将分享一个用于 JavaScript 的最佳免费数据可视化库列表，这些库将帮助您创建令人惊叹的图表和图形来可视化所有这些数字。

D3.js

当我们谈论最好的免费数据可视化库时，D3.js是首先想到的库之一。官网将其描述为基于数据操作文档的 javaScript 库。

它受欢迎的原因很明显，只有在您查看图书馆的能力时才会变得明显。该库使用 html、css 和 svg 进行所有可视化。您可以使用它以各种独特而有趣的方式表示您的数据。如果您能想象到，您可能可以使用 D3.js 构建它。

Eyan的D3 演示

当您了解有关该库的更多信息时，您会注意到的一件事是它不会强制您以特定方式表示您的数据。这有其自身的优点和缺点。一方面，在使用 D3.js 创建的内容方面，您将获得很大的灵活性。缺点是该库的学习曲线相对陡峭，与专门以特定方式显示数据的库（如条形图）相比，您将不得不编写更多代码。从D3.js 网站上的折线图示例可以看出这一点。

我的建议是您考虑将其他库用于非常简单的事情，例如折线图和条形图。但是，您绝对应该看看D3 库，看看您可以使用该库实现什么样的可视化。

C3.js

阅读和探索 D3.js 可能会让您对使用它可以做的所有事情感到高兴。但是，对于想要创建图表以可视化数据但发现 D3 过于复杂的人来说，这也可能令人失望。在这种情况下，C3.js库将是一个很好的选择。

Bantsmore的 C3 演示。

C3.js 基于 D3.js，在生成图表时为您完成所有繁重的工作。它只是 D3.js 的一个包装器，包含创建图表所需的所有代码。好消息是您创建的图表仍然是高度可定制的。C3.js 添加的用于创建图表的每个元素都有一些类。这允许您提供自己的样式并通过直接使用 D3 实现附加功能。

您还可以通过 api 和回调完全控制图表的呈现。这允许您在图表呈现后访问图表的状态，以便您可以在需要时对其进行进一步更改。

您应该查看示例页面以了解您可以使用该库绘制哪些类型的图表。还要确保您阅读了文档以了解如何创建所有这些图表。

Recharts

Recharts 库是使用 react 和 D3 构建的。该库旨在帮助您在 React 应用程序中快速集成图表。Recharts 通过原生 SVG 支持提供了出色的性能，并且它仅依赖于特定的 D3 子模块。

StarNavi Team的 Recharts 演示。

图表可以使用可重用的 React 组件构建，并且可以通过更改组件 props 并传入自定义组件来轻松自定义它们。Recharts 中有明确的组件分离，使它们独立。例如，折线图将由 x 轴、工具提示、网格和其他所有独立的元素组成。

网站上有很多示例向您展示了使用所有变体呈现的常见图表类型。该文档详细解释了如何创建所有这些图表。

Chart.xkcd

图表是最常见的数据可视化方式之一。几乎所有用于绘制图表的库都会创建过于完美的条、线和弧。这实际上是有意的并且非常有用，因为您希望所有内容看起来都干净准确。如果情况并非如此，并且您想让您的图表具有“手绘”的感觉怎么办？

Timqian 的 Chart.xkcd演示。

chart.xkcd库将为您完成这些工作。它会给你的情节一种粗略和卡通的感觉，使它们与其他图书馆绘制的图表区分开来。创建图表是一个非常简单的过程，您不需要编写大量代码。

该库支持六种不同的图表类型，包括折线图、条形图、饼图和雷达图。它们都有特定的配置选项来改变它们的外观。您还可以在初始化期间禁用手绘效果。

dataMaps

DataMaps库是为数据可视化创建交互式地图的好方法。创建地图所需的所有代码都捆绑到一个文件中。它使用 SVG 来创建地图，并且可以缩放到任何屏幕尺寸。该库包括开箱即用的等值线和气泡图支持。

Andy Wise的 DataMaps 演示。

您可以通过在页面中包含 D3.js 和 Topojson 来开始使用地图。之后，只需包含 Datamaps.js 文件并为地图定义一个容器。可以通过获取位于GitHub 上的 topo.json 文件来创建任何***/地区的地图。创建 choropleths 和气泡图的过程在文档页面上有详细说明。

库中包含许多自定义选项，用于标签和弹出窗口等内容。您还可以监听不同的事件并通过挂钩调整事件大小使地图响应。

Sigma.js

Sigma.js库非常适合想要创建必须渲染数千个节点和边的图形的人。

自 2.0 版以来，该库已将重点转移到图形显示的管理上。这包括渲染和交互之类的东西。其他库用于处理图形数据结构、布局算法和指标等内容。

Sigma.js 依赖于 WebGL 来呈现图形。在绘制较大的图形时，这为您提供了优于 SVG 和画布的性能优势。但是，有一个缺点，因为自定义图表变得更加困难。该库为 React 提供了一个包装器，因此您也可以在您的 React 应用程序中使用它。

Sigma 非常适合大型图表，但如果您计划渲染的图表只有几百个节点，或者您想在很大程度上自定义图表，您应该考虑使用 D3.js。

Deck.gl

deck.gl库允许您直观地分析大型数据集。它基于 WebGL，旨在提高性能。在可视化您提供给它的数据时，它遵循分层方法。

Dario d'Amico的 Deck.gl 演示。

复杂的可视化是通过组合现有层来实现的。deck.gl 中的图层是指一种打包的可视化类型，它采用数据集并为其分配位置、颜色和挤压，然后最终在地图上渲染所有内容。您可以在使用相同数据的同时渲染多个图层。该库带有一些经过良好测试和支持的图层类型，例如位图、列和轮廓。

该库使用设备的 GPU 进行高精度计算以提高性能。您可以直接在您的网站上使用该库，但它也支持 React 框架。您还可以轻松地将其与流行的基础地图提供商（如 Google Maps、Mapbox 和 ArcGIS）集成。

只需查看网站上的一些示例，您就会印象深刻。

Cytoscape.js

Cytoscape.js是一个图论库，它试图让程序员和科学家尽可能轻松地进行数据可视化和分析。它使您可以轻松地对关系数据进行建模和可视化。

Justin Mathieu的 Cytoscape 演示。

该库具有重要的功能，可让用户与不同的图表进行交互。然后，您可以***这些用户事件并在需要时采取适当的措施。它在桌面和移动浏览器上都能完美运行。事实上，它对捏合缩放和平移等手势具有开箱即用的支持。

Cytoscape 针对性能进行了高度优化，并支持许多功能，例如自动或手动定位节点、借助样式表将表示与实际数据分离、图论算法和集合论操作。

您应该查看网站上发布的所有示例并与它们进行交互。

最后的想法

当您向查看者展示信息时，通过图表、图形和其他视觉效果对大型数据集进行可视化非常有帮助。幸运的是，JavaScript 有很多免费的库可以帮助你可视化各种数据。我们在这篇文章中为您提供了八个此类库的简要概述。

总之，你可以使用 D3.js 来做各种数据可视化。还有一些基于 D3.js 的专用库可以帮助您更快地完成特定任务，例如创建图表。其他库（例如，deck.gl）可以帮助您通过在地图上绘制的信息来可视化基于位置的数据。