数据无处不在，是我们生活中越来越重要的一部分。我们收集、发送、分析以及用数据做很多其他事情。
数据本身并不具有视觉吸引力，但我们可以让它变得美丽。图表使数据既具有美感，又更容易理解和保留。人们发现当有视觉上的关注时，更容易参与到信息中去。
在建立网站或应用程序时，有无数种方法可以在你的工作中显示图表。你可以决定从头开始建立你的图表，或者使用许多可用的React图表库中的任何一个。
在本指南中，我们将比较React应用程序的顶级图表库。
什么是顶级的React图表库？
图表库被设计用来简化构建图表和其他数据可视化的过程。
当在小项目上工作时，从头开始创建图表往往足够简单。然而，如果你正在做的项目需要你显示不同类型的数据，使用图表库可能会更谨慎。
在今天的React生态系统中，有许多库被设计用来帮助你轻松有效地创建交互式、响应式、甚至是动画的图表。
闲话少说，让我们来比较一下顶级的React图表库，根据功能、文档、社区应用和可定制性等标准对每个库进行评估。我们将放大五个最流行和最广泛采用的React图表库，排名不分先后。
绘图库
Recharts在GitHub上拥有17k颗星（还在不断增加），是一个重新定义的图表库，由D3和React构建。作为React最受欢迎的图表库之一，Recharts拥有优秀的文档，易于理解，也有优秀的项目维护者。
Recharts遵循React的组件原则，使用户能够用其可重用的React组件构建图表。它只对SVG有绘图支持，不提供对移动端的支持。
Recharts提供了漂亮的图表，可以通过调整现有组件的道具或添加自定义道具进行定制。这些图表默认不是响应式的，但可以通过使用包装组件使之成为响应式的。
Recharts已经存在了一段时间，所以它有很多的用户和一个庞大的社区。你可以通过使用它的CDN或用npm或yarn来安装它，很容易就能开始使用Recharts。
react-chartjs-2
如果你在React中使用过Chart.js，那么你在使用这个库时应该不会经历学习曲线。react-chartjs-2是流行的JavaScript Chart.js库的React包装器。Chart.js的许多功能都可以在react-chartjs-2中使用。
react-chartjs-2仅对canvas提供绘图支持，并在客户端进行渲染。在撰写本文时，它在GitHub上有超过4.3k颗星。
react-chartjs-2支持动画，它提供的大多数图表默认都是响应式的。I\the库为各种类型的图表样式提供了一些组件，而且还允许定制。
尽管react-chartjs-2没有自己的详细文档，但它的网站显示了不同的图表类型以及如何开始使用它们。此外，Chart.js有详细的、易于理解的文档。
这个库在所有的现代浏览器上都表现得非常好，而且还拥有一个庞大的用户社区和优秀的维护者。它可以用npm或yarn来安装。
胜利
根据官方文档，Victory是 "一个有主见的，但完全可重写的，用于构建交互式数据可视化的可组合React组件的生态系统。"
像名单上的许多其他React图表库一样，Victory是用React和D3构建的。它有各种各样的图表，开箱即用，可以完全定制。
Victory有强大而详细的文档，这使得该库对初学者友好，容易上手。它的特点是对SVG的绘图支持和高质量的动画，可以定制（至少在某种程度上）。胜利还提供了响应式的图表，在不同的屏幕尺寸下都能很好地工作。
在撰写本文时，该库在GitHub上有超过9k颗星，由Formidable的开发者维护。
使用Victory的一个主要优势是，它也可以用于构建iOS和Android应用程序。这是因为Victory有一个用于React Native的版本，它使用的API与Web版本几乎相同。
Nivo
Nivo，像许多其他React图表库一样，是用React和D3构建的，并提供了各种图表类型和设计供用户选择。该库提供HTML、Canvas和SVG图表，提供对客户端和服务器端渲染的支持，并能很好地与动画配合。
它配备了大量漂亮的图表，如果需要，可以不费吹灰之力进行定制。它提供的许多图表默认是响应式的，因此它们能很好地适应各种屏幕尺寸。Nivo还支持运动/过渡，这是由React Motion提供的。
在撰写本文时，Nivo在GitHub上有超过9.2万颗星。它拥有一个繁荣的社区和参与的维护者，并有一个美丽的网站，其中有详细的文档，使其易于开始使用。Nivo可以用npm或yarn来安装。
React-Vis
React-Vis由Uber创建，使用React和D3构建，是最容易上手的React图表库之一。
如果你曾经使用过React组件，你会发现使用react-vis提供的组件很容易，因为它们的功能类似，有props、children和callbacks。
使用React-Vis，你可以创建各种类型的图表，包括线图、条形图和饼图等等。它提供了一些有吸引力的、可定制的图表，并支持由React Motion驱动的动画图表。React-Vis还具有对Canvas和SVG的绘图支持。
你不需要对任何数据可视化库有深入的了解就可以使用React-Vis；易于理解的文档足以让你开始使用。
总结
有太多的图表库可用于React，无法在一篇文章中考察，但上面描述的五个库是React社区中最广泛采用和喜爱的。Recharts、react-chartjs-2、Victory、Nivo和React-Vis都被广泛使用，并且在帮助React开发者创建信息丰富的漂亮图表方面有着良好的记录。
当决定为你的React项目使用一个图表库时，请记住，它们都是为了帮助开发者实现特定的最终结果而创建的。在决定哪个是最适合你的项目之前，先看看它们的功能和提供的东西。一些图表库可能是小型项目的理想选择，而另一些则更适合于更复杂的项目。
最终，选择使用什么React图表库取决于你的项目要求和你喜欢的功能类型。
The postTop 5 React chart librariesappeared first onLogRocket Blog.
