🍩

Reactでドーナッツグラフを作る

2022/10/04に公開

React

charts

tech

ドキュメントや動画通りにやっても作れない?

Reactでグラフを作ってみたくて、便利なライブラリがあったので、ドキュメントやYouTubeの動画を見ながら試してみたが、devtoolsに赤いエラーが出てくる?

こちらが今回使用したReact用のライブラリ

https://react-chartjs-2.js.org/

どうやら、Reactならではのお作法がある未定です?

こちらの記事を参考にしたら、エラーを解消できた!

必要なパッケージをnpmのパッケージをインストールする。

npm install --save chart.js react-chartjs-2

ドーナッツグラフの元になるグラフを作成する

CSSのファイルは必要ないので、削除するかコードを消す。chartsフォルダを作成してその中に、Doughnut.jsを作成する。

charts/Doughnut.js

import React from 'react'
// chart.jsをインポートする
import { Chart, registerables } from "chart.js"
// eact-chartjs-2から、ドーナッツグラフをインポートする
import { Doughnut } from "react-chartjs-2"
// こちらのコードを書かないと画面にグラフを描画できない?
Chart.register(...registerables)
// オブジェクトでグラフの色と数値を設定する
const data = {
  labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
  datasets: [{
    data: [12, 19, 3, 5, 2 ,3]
    }
  ]
}
// グラフのコンポーネントの関数を作成
function DoughnutChart() {

  return (
    <div>
      <h1>DoughnutChart</h1>
      {/* CSSをタグの中に書いてサイズを調整する */}
      <div style={{ width: "500px", margin: "0 auto"}}>
        <Doughnut data={data} />
      </div>
    </div>
  );
}
export default DoughnutChart

コンポーネントをApp.jsで呼び出して使用する。

App.js

import DoughnutChart from "./charts/Doughnut";


function App() {
  return (
    <div className="App">
      <DoughnutChart />
    </div>
  );
}

export default App;

ベースとなるドーナッツグラフ

Doughnut.jsを編集して色とボーダーの追加をする。

charts/Doughnut.js

import React from 'react'
import './Doughnut.css'
// chart.jsをインポートする
import { Chart, registerables } from "chart.js"
// eact-chartjs-2から、ドーナッツグラフをインポートする
import { Doughnut } from "react-chartjs-2"
// こちらのコードを書かないと画面にグラフを描画できない?
Chart.register(...registerables)
// オブジェクトでグラフの色と数値を設定する
const data = {
  // 画面に色のついたラベルを表示
  labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
  datasets: [{
    // グラフのダミーデータ
    data: [12, 19, 3, 5, 2 ,3],
    // CSSと同じ色でないといけない
    backgroundColor: [
      "#f58787",
      "#aaa2f5",
      "#deeb6a",
      "#4de375",
      "#af74ed",
      "#f2a75c"
    ],
    borderColor: [
      "red",
      "blue",
      "yellow",
      "green",
      "purple",
      "orange"
    ],
    borderWidth: 1,
    }
  ]
}
// グラフのコンポーネントの関数を作成
function DoughnutChart() {

  return (
    <div>
      <h1>DoughnutChart</h1>
      {/* CSSをタグの中に書いてサイズを調整する */}
      <div style={{ width: "500px", margin: "0 auto"}}>
        <Doughnut data={data} />
      </div>
    </div>
  );
}

export default DoughnutChart

CSSも追加して、文字を中央揃えにした。

Doughnut.css

h1 {
  text-align: center;
  color: #ccc;
}

やってみた感想

簡単だと思ったら、以外と難しかったですね。謎のエラー苦しめられました。入力フォームの数値を配列に保存して、グラフを動的に変化させたかったのですが、うまくいきませんでしたね。
そちらは調べて今後作っていこうと思います。