React.js ライブラリ「victory」を使用して棒グラフや線グラフを実装する
ライブラリである「victory」をインストールすると、複数のグラフの実装が可能です。ここでは、react.jsでvictoryを利用するための手順と簡単な使い方を記述してます。
環境
- OS CentOS Linux release 8.0.1905 (Core)
- node V12.13.1
- npm 6.14.1
- React 16.13.0
react.js環境構築
下記のコマンドで構築してます。ここでは、react-appという名前でプロジェクトを作成してます。
create-react-app react-app
victoryインストール
作成したプロジェクトに移動して、インストールします。
## 作成したプロジェクトに移動
cd react-app
## インストール
npm install victory
victory使い方
srcディレクトリにsample.jsと名前で下記のコードを記述します。
import React from 'react';
import { VictoryBar } from 'victory';
const Sample = () => {
return (
<VictoryBar
data={[
{x: 1, y: 2, label: "A"},
{x: 2, y: 4, label: "B"},
{x: 3, y: 7, label: "C"},
{x: 4, y: 5, label: "D"},
{x: 5, y: 5, label: "E"},
]}
events={[
{
target: "data",
eventHandlers: {
onClick: () => {
return [{
target: "labels",
mutation: (props) => {
return props.text === "クリック" ?
null : { text: "クリック" }
}
}];
}
}
}
]}
/>
);
}
export default Sample;
次に、srcディレクトリ配下にあるApp.jsを下記のように編集します。
import React from 'react';
import Sample from './sample';
import './App.css';
function App() {
const style = {
width: "50%",
margin: "0 auto"
};
return (
<div className="App">
<div style={style}>
<Sample />
</div>
</div>
);
}
export default App;
実行します。
npm start
ブラウザから http://プライベートIP:3000にアクセスすると、棒グラフが実装されていることが確認できます。
グループ化された棒グラフも作成可能です。 sample.jsを下記のコードに編集してください。
import React from 'react';
import { VictoryChart, VictoryGroup, VictoryBar } from 'victory';
const Sample = () => {
return (
<VictoryChart>
<VictoryGroup offset={20}
colorScale={"qualitative"}
>
<VictoryBar
data={[{ x: 1, y: 1 }, { x: 2, y: 2 }, { x: 3, y: 5 }]}
/>
<VictoryBar
data={[{ x: 1, y: 2 }, { x: 2, y: 1 }, { x: 3, y: 7 }]}
/>
<VictoryBar
data={[{ x: 1, y: 3 }, { x: 2, y: 4 }, { x: 3, y: 9 }]}
/>
</VictoryGroup>
</VictoryChart>
);
}
export default Sample;
ブラウザから再度、 http://プライベートIP:3000にアクセスすると、グループ化された棒グラフが実装されていることが確認できます。
線グラフも簡単に作成できます。 sample.jsを下記のコードに編集してください。
import React from 'react';
import { VictoryChart, VictoryLine } from 'victory';
const Sample = () => {
return (
<VictoryChart>
<VictoryLine
style={{
data: { stroke: "#3ab60b" },
parent: { border: "1px solid #ccc"}
}}
data={[
{ x: 1, y: 2 },
{ x: 2, y: 1 },
{ x: 3, y: 5 },
{ x: 4, y: 3 },
{ x: 5, y: 8 }
]}
/>
</VictoryChart>
);
}
export default Sample;
ブラウザから再度、 http://プライベートIP:3000にアクセスすると、線グラフが実装されていることが確認できます。
カラフルなグラフも簡単に作成できます。 sample.jsを下記のコードに編集してください。
import React from 'react';
import { VictoryStack, VictoryBar } from 'victory';
const Sample = () => {
return (
<VictoryStack
colorScale={["tomato", "orange", "gold", "coral", "orangered"]}
>
<VictoryBar
data={[{x: "a", y: 2}, {x: "b", y: 3}, {x: "c", y: 5}]}
/>
<VictoryBar
data={[{x: "a", y: 1}, {x: "b", y: 4}, {x: "c", y: 5}]}
/>
<VictoryBar
data={[{x: "a", y: 3}, {x: "b", y: 2}, {x: "c", y: 6}]}
/>
<VictoryBar
data={[{x: "a", y: 5}, {x: "b", y: 3}, {x: "c", y: 6}]}
/>
<VictoryBar
data={[{x: "a", y: 3}, {x: "b", y: 1}, {x: "c", y: 7}]}
/>
</VictoryStack>
);
}
export default Sample;
ブラウザから再度、 http://プライベートIP:3000にアクセスすると、指定した色でカラフルなグラフが実装されていることが確認できます。
円グラフも sample.jsを下記のコードの通り、編集すれば表示されます。
import React from 'react';
import { VictoryPie } from 'victory';
const Sample = () => {
return (
<VictoryPie
colorScale={["tomato", "orange", "gold" ]}
data={[
{ x: "サッカー", y: 35 },
{ x: "野球", y: 40 },
{ x: "テニス", y: 25 }
]}
/>
);
}
export default Sample;
円グラフ
その他は、こちらの公式サイトより確認可能です。
-
前の記事
Nuxt.js ライブラリ「vue-collapse-transition」を使用してボタンクリックでコンテンツの表示/非表示を実現する 2020.03.21
-
次の記事
React.js ライブラリ「react-sidebar」を使用してサイドバーを作成する 2020.03.21
コメントを書く