Victory图表就像轮椅，能帮助我们有限的思维。如果你想做出基于数据的决策，最好还是寻求专业人士的帮助🙂
“图表蕴含着魔力。一条曲线的轮廓就能瞬间揭示整个情况——一场流行病的演变历程、一场恐慌的爆发，或者一个繁荣时代的兴衰。曲线能够启迪人心，激发想象力，令人信服。”
文字虽有翅膀，但图表才能诠释。图表呈现的是纯粹的数量，剥离了语言的虚伪，还原为维度，生动鲜明，无可回避。
——威拉德·C·布林顿，1939年
在展示数据时，选择合适的图表类型是一个需要考虑的决定，但作为 React 开发人员，我们也有自己的一套顾虑，主要是选择合适的图表组件库。
那么，我评判一个好的图表库的标准是什么？
它应该具有高度可定制性。
它应该具备易于使用的 API 和清晰易懂的文档。
它应该呈现良好的用户界面/用户体验。
它应该被广泛采用和测试（为什么要当小白鼠？）
一个重要的技巧是：组件的核心在于可重用性和标准化——这是确保用户界面一致性和易于维护的有效方法。使用像Bit这样的平台来共享你的组件，在不同的应用中复用它们，并让每个人都能协作，使用原子组件构建产品。为了避免重复的复制粘贴，不妨尝试使用Bit为自己和他人创建自定义的 React 图表库 😉
那么，废话不多说，以下是我推荐的 5 个最佳 React 图表库：
Rechart（基于D3.js构建）的核心在于模块化和简洁性。网格、工具提示、线条项目等都是可复用的 React 组件；这使得图表的自定义变得更加容易，甚至可以将自定义的“子图表”组件复用于其他图表组合中。
Recharts 是一个使用React和D3构建的重新定义的图表库。
该库的主要目的是帮助您轻松地在 React 应用中编写图表。Recharts 的主要原则如下：
recharts.org上的文档和我们的故事书（正在编写中）
请查看维基百科上的常见问题解答。
所有开发工作都在主分支上完成master。当前最新版本和故事书文档反映的是主release分支上的内容。
<LineChart width={400} height={400} data={data} margin={{ top: 5, right: 20, left: 10, bottom: 5 }}>
<XAxis dataKey="name" />
<Tooltip />
<CartesianGrid stroke…
Victory 提供了一个具有高度个性化的组件生态系统，其样式和行为完全可重写，从而在易用性和高度可定制性之间保持了适当的平衡。
对于那些寻求跨平台解决方案的用户来说，Victory 也是一个不错的选择。它为 ReactJS 和 React Native 提供了几乎完全相同的 API——这一点非常重要。
FormidableLabs /胜利
一个由可组合的 React 组件组成的生态系统，用于构建交互式数据可视化。
Victory# npm
$ npm i --save victory
# or yarn
$ yarn add victory
import React from "react";
import { render } from "react-dom";
import { VictoryPie } from "victory";
const PieChart = () => {
return <VictoryPie />;
};
render(<PieChart />, document.getElementById("app"));
VictoryPie组件将被渲染，您应该会看到：
使用 Victory 的项目也应该依赖于React。截至目前，victory@34.0.0Victory 需要 React 版本16.3.01 或更高版本。
Victory Native 拥有大部分……
Nivo（同样基于 D3js 构建）荣获两项大奖：一是其精美的用户界面，二是其出色的“交互式文档”。Nivo 提供了一个令人惊艳的用户界面，方便用户轻松上手，对图表组件进行各种尝试和调整，而无需阅读冗长的文档。准备就绪后，只需复制粘贴调整后的图表代码即可（当然，随着时间的推移，直接修改代码会是更理想的方式，但掌握 Nivo API 的过程将会非常轻松快捷）。
Vis 是 Uber 开发的一个库，它与 Recharts 类似，都致力于保持其组件生态系统的简洁性和模块化。其理念是——如果你了解 React，你也就了解 Vis，这在很大程度上是正确的。
从美学角度来看，Vis 的外观相当直接简洁。
注意：本仓库现已更换管理团队。如有任何疑问，请联系新管理员。
一系列 React 组件，用于渲染常见的数据可视化图表，例如折线图/面积图/条形图、热图、散点图、等高线图、六边形热图、饼图和环形图、旭日图、雷达图、平行坐标图和树状图。
一些显著特点：
react-vis无需深入了解数据可视化库即可开始构建您的第一个可视化图表。react-vis它提供了一系列用于构建不同图表的基本模块。例如，独立的 X 轴和 Y 轴组件。这为需要高度控制图表布局的应用程序提供了便利。VX 适用于那些对图表的外观和行为有非常具体想法，但尚未准备好构建自己的基于 D3 的组件生态系统的用户。VX 不预设任何特定方案，旨在方便用户在其基础上进行构建。此外，与同类库相比，使用 VX 可以更轻松地保持软件包体积较小。
visx 是一套可重用的底层可视化组件。visx 结合了 d3 的强大可视化功能和 React 的 DOM 更新优势。
我们来制作一个简单的条形图。
首先，我们将安装相关软件包：
npm install --save @visx/mock-data @visx/group @visx/shape @visx/scale
import React from 'react';
import { letterFrequency } from '@visx/mock-data';
import { Group } from '@visx/group';
import { Bar } from '@visx/shape';
import { scaleLinear, scaleBand } from '@visx/scale';
// We'll use some mock data from `@visx/mock-data` for this.
const data = letterFrequency;
// Define the graph dimensions and margins
const width = 500;
const height = 500;
const margin = { top: 20, bottom: 20, left: 20, right: 20 };…
以上是我个人推荐的 React 数据可视化库列表。希望你能在这里找到适合你的库，无论你更注重美观、易用性，还是更在意包大小。
干杯🍺
中等的