React.js ライブラリ「victory」を使用して棒グラフや線グラフを実装する

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;

円グラフ

その他は、こちらの公式サイトより確認可能です。