ReactとVictoryを備えた美しいチャートとグラフ
大量のデータを持つことは素晴らしいことです。 これを使用して、使用パターンと傾向を特定したり、サーバー群の予測障害分析に適用したりできます。 悲しいことに、多くの時間データは細心の注意を払って収集され、古い<table>
で表示されます。 幸い、 Victory (by Formidable)を使用すると、データを取得して、データをすばやく簡単に美しいチャートやグラフに変換できます。
Victoryは、インタラクティブなデータ視覚化を構築するための構成可能なReactコンポーネントのコレクションです。 意見が分かれていると文書化されていますが、堅牢なAPIを使用すると、完全にカスタマイズするのが簡単です。 victory-native を使用して、ReactNativeプロジェクトで使用することもできます。
入門
開始するには、npm
またはyarn
を使用してプロジェクトにVictoryを追加する必要があります。
# 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>
データを特定の方法で吐き出すシステムを使用していて、それをマッサージする必要がない場合は、さまざまなプロパティでデータをフォーマットできます。追加のプロパティを渡すだけです [X215X ]と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で見つけることができます。