ReactとVictoryを備えた美しいチャートとグラフ

投稿日: 2022-04-20 2022-10-06
タグ: React

大量のデータを持つことは素晴らしいことです。これを使用して、使用パターンと傾向を特定したり、サーバー群の予測障害分析に適用したりできます。悲しいことに、多くの時間データは細心の注意を払って収集され、古いものに表示されます <table>. 幸い、 Victory （by Formidable）を使用すると、データを取得して、データをすばやく簡単に美しいチャートやグラフに変換できます。

Victoryは、インタラクティブなデータ視覚化を構築するための構成可能なReactコンポーネントのコレクションです。意見が分かれていると文書化されていますが、堅牢なAPIを使用すると、完全にカスタマイズするのが簡単です。 victory-native を使用して、ReactNativeプロジェクトで使用することもできます。

入門

開始するには、次の方法でプロジェクトにVictoryを追加する必要があります。 npm また yarn:

# via npm
$ npm install --save victory

# via yarn
$ yarn add victory

最も基本的な例

プロジェクトにVictoryが追加されたので、それをインポートして作業を開始できます。

すぐに使用できるVictoryコンポーネントには、プロジェクトのプレースホルダーとして簡単に使用できる適切なデフォルトのプロパティがあります。チャートやグラフにLoremIpsumを使用するようなものだと考えてください。

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>

データを特定の方法で吐き出すシステムを使用していて、それをマッサージする必要がない場合は、さまざまなプロパティでデータをフォーマットできます。追加のプロパティを渡すだけです。 x と y したがって、Victoryは何が起きているかを知っています。

<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で見つけることができます。

getdocs

13036