前言
最近需要在react项目中使用图表，刚好搜到这篇英文博客，觉得图表库介绍挺全的，就翻译了一下，供大家参考。
正文翻译
许多人小时候都面临过对数学和数字的恐惧，但是，如果我们考虑在系统组织的图表和图形中量化数学数据，这幅图看起来将并不可怕。
React 图表和数据可视化库会做类似的事情。在这一篇文章中，我们将看看 2022 年有哪些可用于 React 的可靠开源的图表库。
此外，所有关于最佳 React 图表库的常见问题都会在最后得到解答，以全面了解 React 图表库。
大多数 Web 开发人员与图表和图形有着深厚的关系。在处理项目时，他们从数据库中检索数据并有意义地呈现它。
创建用户友好的图表可能具有挑战性。花太多时间创建可视化不是一个好主意。
通过使用正确的 React 图表库，您可以快速创建令人惊叹的数据可视化。您的用户还将能够更快地找到更有价值的见解。
什么是React图表库
React Chart Libraries，通常也称为 React app， 它致力于数据可视化、管理库、允许用户编写和设计组件，并协助他们维护数据。这些通用且可扩展的应用程序使用功能强大且长期可持续的框架。
事实证明，React 图表库对于希望将有意义的数据集成到其 Web 项目中的 Web 开发人员来说是一个有益的工具。这些应用程序基本上可以帮助 Web 开发人员显示特定应用程序或功能在不久的将来如何工作或预期如何工作。它们也可以被认为是 Web 开发人员的福音，因为它使他们将注意力转移到生成实际数据上，而不必担心其设计和呈现。
图表是移动和 Web 应用程序的通用组件。不同类型的图表提供不同的信息。数字图表很受欢迎，因为它们使我们能够以适合我们需求的特定格式理解和收集关键数据。 React 的图表也更易于使用，主要包括折线图、条形图、饼图、甘特图和气泡图。
最受欢迎的图表库
许多专业人士现在正在转换他们的方式来使用轻量级的 React 图表库，这些库配备了 React 的模块化图表组件来简化他们的工作。在这种传统的变化中，我们将最好和最流行的 React 图表组件库列表带给您。事不宜迟，让我们开始吧：
1.Recharts
Recharts 被认为是最可靠的react图表库之一，因此也是专业人士和 Web 开发人员使用最多的。这个react图表库对各种 D3 模块的依赖很轻，同时还提供原生 SVG 支持。
recharts 使用的组件完全是展示性的，部分原因在于它们的声明性。
众所周知，对于那些正在寻找一种简单易行的方法来完成数据可视化项目的人来说，大多数专业人士都会将Rechats作为他们的首选。
该平台的每周 npm 下载量为 544,578。该应用程序在开发人员社区中很受欢迎，并以最大的便利性促进了专业人士的数据可视化过程。
如果你熟悉 chartjs 图表库，你就知道 React-chartjs-2 并不是一个常规的 React 图表库。相反，它可以更好地理解为 chartjs 的react包装器，它是一个特定于 JavaScript 的图表库。
对于不熟悉的人，chartjs 是一个对初学者友好的 react 图表库，它使用 HTML5 Canvas 的元素来构建在类型和种类上独一无二的图表组件。
要使用 React-chartjs-2，需要熟悉 Chartjs 的文档。作为一个易于理解的框架，在做同样的事情时应该不会遇到很多困难。每周有 338,760 次下载，这个react图表库值得一试。
3.Victory
Victory 用于 React 和 React Native，是另一个流行的 React 图表库，它具有一组图表组件并为所有应用程序使用相同的 API。相同的 API 允许用户以图表的形式为 Android 和 iOS 应用程序生成数据。该库提供了简单的跨平台图表，学习和使用非常简单。
此外，它还允许将图表（包括折线图、饼图、条形图和烛台图）方便而直接地集成到 Web 和 React Native 应用程序中。 Victory 由 Formidable 开发，每周 npm 下载数为 126,898。
4.Visx
Visx 由 Airbnb 开发，是 React Chart Libraries 领域的一个新库，在 GitHub 上获得了大约 14.2k 颗星，这是一项了不起的成就。将 Visx 用作活动存储库的最大灵活性在于它以系统的方式结合了 React DOM 和 D3.js 的优点。
一个令人兴奋的消息是 Visx 的开发人员并没有声称它是一个react图表库。相反，他们将其视为可以轻松重用的低级可视化组件的集合。
5.Nivo
Nivo 为 Web 开发人员提供了一种在服务器端生成图表和其他数据的新方法。有多种创意模板可供选择，可用于数据可视化和演示目的。图表库为呈现有意义的数据提供了独特且引人注目的选项。
Nivo 在单个图表库中分配 SVG、HTML 和 Canvas 图表，同时还提供动画。如果您正在为您的数据可视化需求寻找精确且多功能的解决方案，Nivo 可为您提供一站式服务。
它承诺通过图表中的渐变为您提供引人入胜的用户体验。
React vis 由 Uber Open Source 的 Web 开发人员开发，是 React 图表库领域的先驱。它提供了一种非常简单和快速的方法来了解您的数据可视化需求的组件图表。
一些最常见的数据可视化图表包括折线图、面积图、条形图、饼图、圆环图、等高线图、热图、六边形热图、散点图、饼图和圆环图、旭日形图、雷达图、平行坐标和树图仅举几例。
用户欣赏文档的设计能力和从大量图表中进行选择的能力，从它在 GitHub 上短时间内收到的 8k 颗星就可以看出这一点。
科技巨头阿里巴巴是家喻户晓的。这家巨头的开发人员还在 React 图表库的世界中引入了 BizCharts。阿里巴巴库为基于 G2 和 React 的业务应用程序提供图表服务。
他们提供的模板库令人印象深刻且用途广泛。 BizCharts 还拥有迄今为止最广泛的图表集合，使其成为设计和数据可视化的综合基础。 BizCharts 在亚洲人群中非常受欢迎，一周内共有 20,452 次 npm 下载。
这个这个react图表库对于那些想要在通用但易于理解的模板中可视化他们的股票图表数据的人来说是一个必不可少的工具。对于正在寻找一个平台来满足其财务数据可视化需求的 Web 开发人员，React 股票图表是您的一站式商店。 该平台包含 60 多项技术指标，在 GitHub 上拥有 3.3k 颗星。但是，很多人没有注意到，这个 react 图表库并没有推出频繁的更新或其他维护服务。
如果您正在寻找 React 的匿名图表库，那么 Rumble 图表是您首选的 react 图表库。这是一款具有现代模板的现代app。用其开发者的话来说，Rumble Charts 可以理解为分发react组件，构建灵活且易于组合的图表以进行数据可视化。
基于 d3.js，功能维护得不好，并且在整个过程中会偶尔进行更新。
对于time序列组件，React time series charts是一个随时可用的 react 图表库，它提供了一组有组织的图表功能，这些功能经过精心策划以满足模块化需求。这些图表组件有助于以系统的方式可视化网络流量和时间序列数据。 关于react时间序列图表的一个值得注意的事情是开发人员的低维护。然而，他们不断更新平台，提供易于理解的示例和大量文档，这弥补了低维护。
React 的下一个最佳图表库是 Ant Design Charts，它对于 React 技术 stackSame 团队建设的学生来说更容易获得。开箱即用，它自动提供高质量的图表，并提示研究图表默认配置的用户体验。用户可以快速调整图表的细节以满足特定的业务需求。交互式和视觉体验侧重于图表根功能的信息显示和发现。
它将自己描述为面向企业级用户的 React UI 库和设计系统。
Ant Design 是一个很棒的 React 图表库。这部分是由于有大量的文档，其中包括许多示例、指南和变体。它也是自定义现有组件和主题的绝佳平台。
联想和丰田等公司使用 Ant Design。它是高级商业项目的绝佳选择。其广泛的资源使其成为初学者的绝佳选择。
ECharts 是一款功能强大、直观、交互式的图表和可视化工具，非常适合商业演示。 响应的 ECharts 是用 JavaScript 编写的。它使用支持 Canvas 和 SVG 的 ZRender 渲染引擎。 ZRender 渲染引擎支持 Canvas 和 SVG。
基于 EChart 的关键功能，ECharts 5 通过一些新的功能和增强的故事讲述和数据外观、增强的可视化和响应式设计、协作和性能丰富、程序员体验，让程序员更容易地讲述数据集背后的故事，全球化等等。
React 组件允许您创建灵活、可组合的图表来可视化您的数据。 Rumble Charts 开发人员在后台使用了 D3.js。然而，这不是你大部分时间都会感觉到的。 React 图表库包含许多图表演示选项。
React 的图表库 Rumble-charts 是匿名图表库之一。它是一组组件，用于创建灵活的、可组合的图表，使您可以可视化数据。这是一个带有现代模板的简单应用程序。
多年来，它有了很大的改进，包括ts语法和错误修复。尽管它并不为人所知，但它是已失效的 React 股票图表的可行替代方案。您可以自定义股票图表的粗细、轮廓和画笔以包括复合系列。
React-timeseries-charts为时间序列组件提供了一个全时react图表库。这提供了一组满足模块化需求的有组织的图表功能。
React 时间序列图表对于以有组织的方式可视化网络流量和其他时间序列数据很有用。他们通过清晰的示例和详细的文档更新平台，使其值得低维护。
这个库是专门为 React 设计的，用于可视化网络流量和时间序列数据。 React 的库专注于时间序列数据图表。它们是使用 d3 和 React 构建的，具有更高的可组合性。尽管该库没有得到积极维护或更新，但它可用于大量文档和示例。
关键要点
为 React 使用图表库有无数好处，从易于集成到方便比较，当然还有图表和图形设计。
React 应用程序中提供的数据可视化库使您的工作更轻松。既然您知道所有可用的Top react图表库，请使用它们来减轻您的工作负担。
这些开源库得到了良好的维护，并受到 React 社区的强烈推荐。图表库旨在帮助您以最佳形式表示数据。它在应用程序的开发中也很有用。因此，请选择满足您所有需求的库。
请记住，所有图表库和图表都旨在帮助开发人员在选择正确的用于您的 React 项目时实现特定的结果。
在决定您应该使用哪一个之前，请查看每个提供的内容。您正在寻找的功能类型和项目的要求将决定哪个 React 库最适合显示您的图表。
Technostacks 拥有一支由 ReactJS 开发人员组成的专家团队，如果您想在 Web 项目中添加图表，可以联系我们。我们经验丰富的开发人员团队将根据您的需求为您提供最好的帮助。
FAQ
Q1 你应该选择哪个 React 图表库？ 答：这个特定问题没有单一的答案或简单的解决方案。一个人选择的 React 图表库取决于每个人的需求所特有的个人因素。一个人应该考虑各种因素，例如您执行代码的能力、您设计图表的意愿、访问预先存在的库等等。 建议您通过不同的因素，并在其他 React 应用程序之间进行比较，以做出最合适的选择。
Q2 什么是最好的 React 图表库？ 答：用于执行数据可视化项目的一些最好和最流行的反应图表库是 recharts、react-chartjs-2、Victory、visx、nivo、react-vis、BizCharts、Rumble Charts、ant design charts、react-gauge chart，和 echart 用于反应，仅举几例。这些库中的每一个都有自己的属性，并且它们提供的服务略有不同。
Q3 哪个是最常用的 React 图表库？ 答：最常用的反应图表库之一是 Recharts。该列表之后是 react-chartjs-2、Victory、nivo 和 visx。这些流行和最常用的 React 图表库服务于在基于 React 的 Web 应用程序中管理图形和图表的基本目的。
Q4 根据开发人员，哪些是最受欢迎的反应图表库？ 答：Web 开发人员经常从许多可用于 React 图表库的不同选项中进行选择。但是，根据开发人员的说法，一些最受欢迎的反应图表库是 Recharts、Nivo、Victory 和 Visx。它们也是最常用的库之一。
Q5 哪个是易于使用的 React 图表库？ 答：Recharts 是当今 Web 开发人员可用的最佳反应图表库之一。但是，好消息是它也是最容易被新手使用和理解的，他们可能会觉得这个过程太繁琐了。从 Recharts 开始可以帮助您更好地了解数据可视化的动态，因为它以有组织的方式呈现。
Q6 React 中的图表是什么？ 答：图表是 React 应用程序的一个组件，它有助于基于一系列系列和/或数据来呈现标准数据可视化。 React 图表库中的图表可以以折线图、条形图或面积图的形式提供。与图表功能相似的其他组件是热图、散点图、等高线图、六边形热图、饼图和圆环图、旭日形图、雷达图、平行坐标和树状图。
Q7 你如何在 React 中实现图表？ 答：要在 React 应用程序中使用图表，请按照说明操作： 在您的 PC 上安装 node、VSCode、React、Chart 和 Bootstrap。接下来，通过输入活动和在该活动上花费的时间、提交并添加后续操作及其持续时间来开发活动记录系统。将根据输入数据生成图表。
Q8 React 对数据可视化有好处吗？ 答：React 开发人员很快意识到管理 D3 并让 React 使用它并不容易。 React 数据可视化库生态系统诞生了。它使使用可重用的 React 组件快速轻松地创建数据可视化变得容易。
Q9 什么是 React 图表？ 答：Charts for React 可视化库是帮助渲染常见数据可视化图表的 React 组件的集合。 React Vis 允许您以折线图、条形图、面积图、散点图和六边形热图可视化项目数据。您还可以使用 React Vis 创建饼图。
Q10 哪个图表库与 React 集成得很好？ 答：Recharts 是 React 最好的图表库之一，它基于 React 的组件原理。这允许开发人员使用可重用的 React 组件创建图表。
Q11 图表 js 可以与 React 一起使用吗？ 答：有许多 npm 包可以在 React 中制作图表； chart.js 是精确的包之一，它与图表的 React 包装器一起使各种图表和图形的生成变得简单。
Q12 如何在 React 中使用 Google 图表？ 答：首先，导入 react-google-charts 获取 Chart 属性。接下来，您必须创建一个变量来保存饼图的数据。您可以通过简单地将数据更新到数组来自定义饼图。
