带有React和Victory的漂亮图表和图形

拥有大量数据是一件好事。您可以使用它来识别使用模式和趋势，或将其应用于您的服务器群的预测性故障分析。可悲的是，很多时候数据都被精心收集并呈现在一个陈旧的 <table> 中。幸运的是，使用 Victory（来自 Formidable），您可以获取数据并快速轻松地将数据转换为漂亮的图表和图形。

Victory 是用于构建交互式数据可视化的可组合 React 组件的集合。它被记录为固执己见，但使用强大的 API 很容易完全自定义。你甚至可以通过 victory-native 将它与你的 React Native 项目一起使用！

入门

首先，我们需要通过 npm 或 yarn 将 Victory 添加到我们的项目中：

# via npm
$ npm install --save victory

# via yarn
$ yarn add victory

最基本的例子

现在我们已经将 Victory 添加到我们的项目中，我们可以导入它并开始工作。

开箱即用，Victory 组件具有合理的默认属性，可以轻松地将它们用作项目中的占位符。可以把它想象成拥有用于图表和图形的 Lorem Ipsum。

Victory 有各种各样的图表和图形，但为了本文的目的，我们将只使用条形图、折线图和饼图。

所有 Victory 图表类型都以单词 Victory 为前缀，可以从导入中单独导入，也可以一次全部导入：

// Generic import
import victory from "victory";

// Individual component imports
import {
  VictoryBar,
  VictoryChart,
  VictoryLine,
  VictoryPie,
} from "victory";

如前所述，在不指定任何属性的情况下，组件仍将显示带有少量虚拟数据的图形和图表。因此这个例子是最基本的例子；）

import React from "react";
import { render } from "react-dom";

import {
  VictoryBar,
  VictoryChart,
  VictoryLine,
  VictoryPie,
} from "victory";

import "./styles.css";

function App() {
  return (
    <div className="App">
      <h1>The Most Basic Example</h1>
      <VictoryChart>
        <VictoryBar />
      </VictoryChart>
      <VictoryChart>
        <VictoryLine />
      </VictoryChart>
      <VictoryPie />
    </div>
  );
}

const container = document.createElement("div");
document.body.appendChild(container);
render(<App />, container);

您可能已经注意到条形图和折线图嵌套在 VictoryChart 组件内。这是因为那些特定的组件只提供图形数据而不是图形的轴。

您可能还注意到条形图与轴重叠，我们稍后会谈到那个:)

为图表和图形提供数据

前面的例子很好，但只有在需要一些随机图表作为占位符时才有用。如果您想用自己的数据实际提供图表和图形，则需要根据您正在使用的图表或图形传递带有正确格式数据的 data 属性。

条形图和折线图

在最基本的形式中，条形图和折线图需要一个包含 x 和 y 属性的对象数组：

<VictoryChart>
  <VictoryBar
    data={[
      { x: "lizard", y: 1234 },
      { x: "snake", y: 2048 },
      { x: "crocodile", y: 2600 },
      { x: "alligator", y: 9000 },
    ]}
  />
</VictoryChart>

如果您正在使用以某种方式吐出数据的系统并且您不想对其进行按摩，您可以使用不同的属性格式化您的数据，您只需要传入其他属性 [X215X ] 和 y 所以胜利知道发生了什么：

<VictoryChart>
  <VictoryBar
    data={[
      { reptile: 'lizard', awesomeness: 1234 },
      { reptile: 'snake', awesomeness: 2048 },
      { reptile: 'crocodile', awesomeness: 2600 },
      { reptile: 'alligator', awesomeness: 9000 },
    ]}
    x="reptile"
    y="awesomeness"
  />
</VictoryChart>

饼状图

饼图本质上没有需要标签的轴，因此您可以在没有其他属性的情况下摆脱困境，但您仍然需要具体说明哪个值是 x，哪个是 y：

<VictoryPie
  data={[
    { x: "lizard", y: 1234 },
    { x: "snake", y: 2048 },
    { x: "crocodile", y: 2600 },
    { x: "alligator", y: 9000 },
  ]}
/>

但是等等……还有更多！

我提到我们可以用 Victory 制作漂亮的图表和图形，但老实说，一切都只是灰色的阴影，并没有那么引人注目。正如我还提到的，Victory 公开了一个很棒的 API，可以很容易地自定义（并修复条形图上令人讨厌的重叠）：

<VictoryChart domainPadding={40}>
  <VictoryBar
    style={{ data: { fill: "#6DB65B" } }}
    data={[
      { x: "lizard", y: 1234 },
      { x: "snake", y: 2048 },
      { x: "crocodile", y: 2600 },
      { x: "alligator", y: 9000 }
    ]}
  />
</VictoryChart>

你可以对饼图感到非常疯狂：

<VictoryPie
  colorScale={["#008f68", "#6DB65B", "#4AAE9B", "#EFBB35"]}
  data={[
    { x: "lizard", y: 1234 },
    { x: "snake", y: 2048 },
    { x: "crocodile", y: 2600 },
    { x: "alligator", y: 9000 }
  ]}
/>

结论

Victory 是一个易于使用且易于自定义的库，用于创建数据可视化。在 SVG 相关样式之外，属性很容易理解，并且不乏可用的图表和图形类型。

凭借足够健全的默认值等附加功能，可以利用 Victory 作为图形和图表占位符库以及 React Native 功能，它是满足您所有 React 图形需求的必备工具。

我希望您发现这篇文章内容丰富且对您有所帮助，如果您正在寻找这篇文章中代码的现场演示，您可以在 CodeSandbox 上找到它！