使用 React 和 Victory 制作精美的图表和图形

拥有大量的数据是一件好事,你可以用它来识别使用模式和趋势,或者将其应用于你的服务器舰队的预测性故障分析上。不幸的是,很多时间的数据都被精心收集,并呈现在一个老旧的<表>中。幸运的是,有了 Victory(由 Formidable)你可以快速地将数据转化为美丽的图表和图表。

Victory 是一组可复制的 React 组件,用于构建交互式数据可视化。它被记录为被评论,但凭借强大的 API,它很容易完全自定义。

开始的

要开始,我们需要通过npm或yarn来添加Victory到我们的项目:

1# via npm
2$ npm install --save victory
3
4# via yarn
5$ yarn add victory

最基本的例子

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

除了盒子之外,Victory组件具有合理的默认属性,允许它们在您的项目中轻松地被用作位置持有者。

胜利有各种各样的图表和图表,但为了这个文章,我们只会使用条形图表,线形图表和饼干图表。

所有胜利图表类型都以胜利一词为前缀,可以单独从导入中导入,或者您可以同时导入它们:

 1// Generic import
 2import victory from "victory";
 3
 4// Individual component imports
 5import {
 6  VictoryBar,
 7  VictoryChart,
 8  VictoryLine,
 9  VictoryPie,
10} from "victory";

正如上面提到的,没有指定任何属性,组件仍然会显示图表和图表,其中包含少量的愚蠢数据,因此,这个例子是最基本的例子 ;)

 1import React from "react";
 2import { render } from "react-dom";
 3
 4import {
 5  VictoryBar,
 6  VictoryChart,
 7  VictoryLine,
 8  VictoryPie,
 9} from "victory";
10
11import "./styles.css";
12
13function App() {
14  return (
15    <div className="App">
16      <h1>The Most Basic Example</h1>
17      <VictoryChart>
18        <VictoryBar />
19      </VictoryChart>
20      <VictoryChart>
21        <VictoryLine />
22      </VictoryChart>
23      <VictoryPie />
24    </div>
25  );
26}
27
28const container = document.createElement("div");
29document.body.appendChild(container);
30render(<App />, container);

您可能已经注意到条形图和条形图嵌入到一个胜利图组件中,这是因为这些特定组件只提供图形数据,而不是图形的轴。

您可能也注意到条形图是重叠的轴,我们会得到一个在一点点:)

向图表和图表提供数据

上面的例子是好的,但它只是有益的,如果你需要一些随机图作为位置持有者. 如果你想实际上给图表和图表用自己的数据,你需要通过一个数据属性,基于你正在使用的图表或图表的正确格式数据。

酒吧和线图表

在最基本的形式中,条形图和条形图预计包含一个x和y属性的对象组合:

 1<VictoryChart>
 2  <VictoryBar
 3    data={[
 4      { x: "lizard", y: 1234 },
 5      { x: "snake", y: 2048 },
 6      { x: "crocodile", y: 2600 },
 7      { x: "alligator", y: 9000 },
 8    ]}
 9  />
10</VictoryChart>

如果你正在使用一个以某种方式喷出数据的系统,而你不想按摩它,你可以用不同的属性格式化你的数据,你只需要输入额外的属性x和y,以便Victory知道发生了什么:

 1<VictoryChart>
 2  <VictoryBar
 3    data={[
 4      { reptile: 'lizard', awesomeness: 1234 },
 5      { reptile: 'snake', awesomeness: 2048 },
 6      { reptile: 'crocodile', awesomeness: 2600 },
 7      { reptile: 'alligator', awesomeness: 9000 },
 8    ]}
 9    x="reptile"
10    y="awesomeness"
11  />
12</VictoryChart>

五张图

皮图自然没有需要标签的轴,所以你可以没有额外的属性,但你仍然需要指定哪个值是x和哪个值是y:

1<VictoryPie
2  data={[
3    { x: "lizard", y: 1234 },
4    { x: "snake", y: 2048 },
5    { x: "crocodile", y: 2600 },
6    { x: "alligator", y: 9000 },
7  ]}
8/>

但等待...还有更多!

我提到我们可以用Victory创建美丽的图表和图表,但要诚实地说,一切都只是灰色的阴影,而不是所有这些吸引人的。

 1<VictoryChart domainPadding={40}>
 2  <VictoryBar
 3    style={{ data: { fill: "#6DB65B" } }}
 4    data={[
 5      { x: "lizard", y: 1234 },
 6      { x: "snake", y: 2048 },
 7      { x: "crocodile", y: 2600 },
 8      { x: "alligator", y: 9000 }
 9    ]}
10  />
11</VictoryChart>

而且你可以真正疯狂地用饼图:

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

结论

Victory 是一个易于使用和易于自定义的库,用于创建数据可视化。除了 SVG 相关的样式,属性很容易理解,并且没有缺少图表和图表类型。

有了额外的功能,例如足够的默认值来利用Victory作为图表和图表位置库,以及React Native功能,它对于您的所有React图形需求都是必不可少的。

我希望你发现这篇文章有信息和有帮助,如果你在这个帖子中寻找代码的实时演示,你可以在 CodeSandbox找到它!