推荐 8 个 React 可视化库

数据无处不在，是我们生活中越来越重要的一部分。我们每天都在收集、发送和分析数据。数据本身在视觉上并不吸引人，但我们可以让它如此。图表使数据既美观又容易理解和保留，因为当有协调的视觉效果时，更容易与信息互动。

在构建网站或应用程序时，有无数种方法可以在工作中显示图表。你可以决定从头开始构建你的图表，或者使用许多可用的 React 可视化库。在本文中，我们将比较 React 应用程序的 8 个顶级可视化库。

1. 为什么使用 React 可视化库？

可视化库旨在简化构建图表和其他数据可视化的过程。在开发小型项目时，从零开始创建图表通常非常简单。但是，如果你正在处理一个需要显示不同类型数据的项目，那么使用可视化库可能会更有用。

在当今的 React 生态系统中，有许多库旨在帮助你轻松高效地创建交互式、响应式甚至动画图表。

话不多说，让我们比较一下 8 个顶级 React 可视化库，评估每个库的标准，包括功能、文档、社区和可定制性。我们将重点介绍 8 个最受欢迎和广泛采用的 React 可视化库。

2. Recharts

Recharts 是一个用 D3 和 React 构建的可视化库，在 GitHub 上有 19K stars。Recharts 是 React 中最受欢迎的可视化库之一，拥有易于理解的优秀文档，以及出色的项目维护者。

Recharts 遵循 React 的组件原则，允许用户使用其可重用的 React 组件来构建图表。Recharts 提供了开箱即用的漂亮图表，可以通过调整现有组件的 prop 或添加自定义的 prop 来定制。它只支持 svg 的绘图，不支持移动设备。默认情况下，图表没有响应性，但可以通过使用包装器 wrapper 组件使其具有响应性。

Recharts 已经有一段时间了，所以它有很多用户和一个大的社区。通过使用 CDN 或 npm 或 yarn 安装，你可以轻松开始使用这个图表库。

React 组件语法
基于D3
SVG 支持/不支持 Canvas
GitHub Stars：19K+
npm下载：110万+
由开源社区支持

3. react-chartjs-2

如果你在 React 中使用过 Chart.js，那么在使用 React -chartjs-2 时，你应该不会有学习曲线。React -chartjs-2 是流行的 JavaScript Chart.js 库的 React 包装器。在 react-chartjs-2 中可以使用 Chart.js 的许多特性。

react-chartjs-2 只支持 Canvas 和客户端渲染。在撰写本文时，它在 GitHub 上有超过 5.7K stars。

React-chartjs-2 支持动画，它提供的大多数图表默认情况下都是响应式的。该库为各种类型的图表样式提供了一些开箱即用的组件，还允许自定义。

虽然 react-chartjs-2 没有自己的详细文档，但它的网站显示了不同的图表类型以及如何开始使用它们。此外， Chart.js 有详细的、易于理解的文档。

这个库在所有现代浏览器上都能很好地运行，并且拥有庞大的用户社区和优秀的维护者。它可以使用 npm 或 yarn 安装。

React组件语法
基于 Chart.js
Canvas 支持/不支持 SVG
GitHub Stars：5.7K+
npm下载：770K+
由开源社区支持

4. Victory

根据其官方文档，Victory 是“一个由可覆盖的 React 组件组成的生态系统，用于构建交互式数据可视化。”

像列表上的许多其他 React 可视化库一样，Victory 是用 React 和 D3 构建的。它附带了各种各样的图表，是完全可定制的。

Victory 拥有健壮、详细的文档，这使得该库对初学者友好，易于入门。它具有对 SVG 的绘图支持和高质量的动画（至少在某种程度上）。Victory 还提供了响应式图表，适用于各种屏幕尺寸。

在撰写本文时，该库在 GitHub 上有超过 10 万 stars，由强大的开发人员维护。

使用 Victory 的一个主要优势是，它也可以用于构建 iOS 和 Android 应用程序。这是因为 Victory 有一个 React Native 版本，它使用了与 Web 版本几乎相同的 API。

React 组件语法/支持 React Native
基于 D3
SVG 支持/不支持 Canvas
GitHub Stars：1万+
npm下载：17.5万+
Formidable Labs 的支持

5. Nivo

Nivo，像许多其他 React 图表库一样，是用 React 和 D3 构建的，并提供了各种图表类型和设计。该库提供 HTML、Canvas 和 SVG 图表，支持客户端和服务器端渲染，并且可以很好地处理动画。

Nivo 提供了广泛的美丽的图表，可以定制，如果需要没有太多的困难。Nivo 提供的许多图表默认情况下都是响应式的，因此它们适合各种屏幕尺寸。Nivo 还支持运动和过渡，这是由 React motion 提供支持的。

在撰写本文时，Nivo 已经拥有超过 11K 个 GitHub stars。它拥有一个蓬勃发展的社区和敬业的维护者，并有一个漂亮的官方网站，其中有详细的文档，使入门变得容易。Nivo 可以使用 npm 或 yarn 安装。

React 组件语法
基于 D3
支持 SVG、Canvas 和 HTML
由 React Motion 提供支持的动画
GitHub Stars：11K
npm下载：336K+
由开源社区支持

6. React-Vis

React-Vis 由 Uber 创建，使用 React 和 D3 构建，是最容易上手的 React 图表库之一。

如果你使用过 React 组件，你会发现使用 React-Vis 提供的组件很容易，因为它们的功能类似，有 prop、children和 callback。

使用 React-Vis，你可以创建各种类型的图表，包括折线、条形图和饼图等等。它提供了有漂亮的、可定制的图表开箱即用，并支持由 React Motion 驱动的动画图表。

React-Vis 还支持 Canvas 和 SVG 绘图。使用 React-Vis 不需要对任何数据可视化库有深入的了解，易于理解的文档足以让你入门。

React 组件语法
基于 D3
SVG 和 Canvas 支持
GitHub Stars：8K+
npm下载：120万+
Uber 支持

7. ECharts

ECharts 是 Apache 构建的一个可视化库。它构建在 ZRender（一个轻量级的 Canvas 库）之上，同时提供 SVG 和 Canvas 支持。

除了常见的图表类型外，ECharts 还提供了一些独特的图表类型，如桑基图、热图等。除了 200 多种数据可视化类型，ECharts 还提供了广泛的自定义选项，并支持主题和扩展。它还支持动画，默认情况下是响应式的。ECharts 还拥有庞大的用户社区，并得到 Apache 的支持。

纯 JavaScript 语法
一流的动画和美学
主题和扩展——也支持浅色和深色主题
SVG 和 Canvas 支持
GitHub Stars：54K+
npm下载：458K+
Apache 支持

8. BizCharts

BizCharts 是阿里巴巴建立的数据可视化库。它构建在 G2（由 AntV 构建的数据可视化库）之上。

BizCharts 提供了广泛的图表类型，并支持 SVG 和 Canvas。它还提供了广泛的自定义选项，并支持主题和扩展。此外，BizCharts 库易于使用，并且拥有一个蓬勃发展的用户社区。

React 组件语法
基于 D3
SVG 支持/不支持 Canvas
GitHub Stars： 6K+
npm下载：23K+
阿里巴巴的支持

9. Visx

Visx 是 Airbnb 建立的一个数据可视化库。它构建在 D3 之上，提供了广泛的图表类型，并支持 SVG 和 Canvas。

其极简的设计使 Visx 美观。API 是超级可定制的，并允许你在其之上构建自己的图表库。

Visx 还非常注重性能，并保持包的大小较小。它可以很好地与 CSS-in-JS 库如 styled-components 结合。

React 组件语法
基于 D3
SVG 支持/不支持 Canvas
GitHub Stars：16K+
npm下载：295000 +
Airbnb 支持

10. 小结

React 中可用的可视化库比我们一篇文章所能介绍的还要多，但上面描述的几个库是 React 社区中最广泛采用和最受欢迎的。

下面是上面提到的库的采用和流行程度的快速概述：

Library	Stars	Downloads	Rendering	Backed by
Recharts	9k+	1.5m+	SVG	Open Source Community
react-chartjs-2	8k+	773k+	Canvas	Open Source Community
Victory	10k+	175k+	SVG	Formidable Labs
Nivo	11k+	336k+	SVG, Canvas	Open Source Community
React-Vis	8k+	98km+	SVG, Canvas	Uber
E-Charts	54k+	458k+	SVG, Canvas	Apache
BizCharts	6k	23k+	SVG	Alibaba
Visx	16k+	295k+	SVG	Airbnb

在决定哪个最适合你的项目之前，先比较它们的功能和提供的服务。一些图表库可能是小型项目的理想选择，而其他图表库则更适合更复杂的项目。最终，选择使用什么 React 图表库取决于你的项目需求和你喜欢使用什么类型的功能。