React/TypeScriptでグラフを作成する①

はじめに

• 前回、TypescriptでReactコンポーネントを作成したので試しにグラフのコンポーネントを作成する

利用するライブラリ

• 下記のreact-chartjs-2を使ってみる github.com

インストール

• 下記のコマンドを実行する

yarn add react-chartjs-2 chart.js

折れ線グラフのコンポーネント

• コンポーネントフォルダにLinePlot.tsxファイルを作成する

import React from 'react'
import {Line} from 'react-chartjs-2'

const data ={
    labels: ["Mon","Tue","Wed","Thu","Fir","Sat","Sun"],
    datasets: [
        {
            label: "Demo line plot",
            backgroundColor: "#008080",
            borderColor: "#7fffd4",
            pointBorderWidth: 10,
            data: [5,6,9,15,30,40,80]

        }
    ]
}

export const LinePlot: React.FC = () => {
    return (
        <div>
            <Line data={data} />
        </div>
    )
}

円グラフのコンポーネント

• コンポーネントフォルダにPiePlot.tsxファイルを作成する

import React from 'react'
import {Pie, Doughnut } from 'react-chartjs-2'

const data = {
    labels: ['Windows', 'Mac', 'Linux'],
    datasets: [
        {
            data: [60,30,10],
            backgroundColor: ["#4169e1","#ff1493","#FFCE56"],
            hoverBackgroundColor:  ["#36A2EB","#FF6384","#FFCE56"],
            borderColor: ["transparent","transparent","transparent"]
        }
    ]
} 

export const PiePlot: React.FC = () => {
    return (
        <div>
            <Pie data={data} />
            <Doughnut data={data} />
        </div>
    )
}

App.tsxファイルにコンポーネントを指定する

import React from 'react';
import './App.css';
import { LinePlot } from './components/LinePlot';
import { PiePlot } from './components/PiePlot';

const App: React.FC = () => {
  return (
    <div className="App">
      <LinePlot />
      <PiePlot />
    </div>
  );
}

export default App;

実行結果