Reactでグラフを動的に更新する

やりたいこと

　Reactでグラフを動的に更新したい。

前提

• react 18.2.0
• chart.js 3.9.1
• react-chartjs-2 4.3.1

やり方

次のようにコンポーネントを作る。

Mainコンポーネント(親)

　他のコンポーネントを呼び出す要素。ソースコードではApp関数。
　データの変数をstateとして宣言し、子コンポーネントにstateを渡す。

グラフ描画コンポーネント(子)

　データ整形やグラフの設定管理を行う要素。ソースコードではSampleChart関数。
　データ(props)を整形し、importしたグラフコンポーネント(例. Line)に渡す。

このようにコンポーネントを作ると、次のような流れでグラフが動的に更新される。

1. グラフの値(state)を更新する
2. グラフの値(props)が更新される
3. グラフが再レンダリングされる

ソースコード

app.js

import React, { useState} from "react";
import { Line } from "react-chartjs-2";

import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend,
} from 'chart.js';

ChartJS.register(
    CategoryScale,
    LinearScale,
    PointElement,
    LineElement,
    Title,
    Tooltip,
    Legend
  );

function SampleChart(props) {
  const labels = ["2022-01", "2022-02", "2022-03", "2022-04", 
  "2022-05", "2022-06", "2022-07", "2022-08", 
  "2022-09", "2022-10", "2022-11", "2022-12"]

  const GraphData = {
    labels: labels, 
    datasets: [
      {
        label: "Sample", 
        data: props.data, 
        borderColor: 'rgb(255, 99, 132)',
        backgroundColor: 'rgba(255, 99, 132, 0.5)',
      }
    ], 
  };

  const options = {
    maintainAspectRatio: false, 
    responsive: true, 
    plugins: {
      legend: {
        position: 'top', 
      },
      title: {
        display: true,
        text: 'Sample-Chart',
      }, 
    }, 
  };

  return (
    <div className="Chart">
      <Line options={options} data={GraphData} height={400} width={800} />
    </div>
  )
  
}

function App() {
  let initial_data = []
  for (let i=0; i< 12; i++) {
    initial_data.push(Math.random());
  }
  const [data, setData] = useState(initial_data);

  return (
    <div className="App">
      <SampleChart data={data} />
      <button type="button" onClick={() => {
        let random_data = []
        for (let i=0; i < 12; i++) {
          random_data.push(Math.random());
        }
        setData(random_data);
      }}
      >ランダム</button>
    </div>
  );
}

export default App;

まとめ

　Reactはすばらしいです。