Chart.jsを使ってグラフの描画

Chart.jsはJavaScriptでグラフを描画するためのライブラリです。
以前少しだけ使用したことがあったのですが、もう一度使い方をおさらいしようと思い、勉強ついでにメモ。
これから使おうと思っている方の参考になればと思います。

https://www.chartjs.org/

バージョン

Chart.js 3.9.1

使い方

インストール

npmを使用してインストールするか、CDNを利用します。
今回はCDNで。

<head>
    <script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>
</head>

# npmを使用する場合はこのコマンドを実行する
npm install chart.js

描画領域の準備

グラフ描画領域は、canvasタグで指定することができます。

<canvas id="chart"></canvas>

canvas要素のコンテキストを取得して、これに描画のための情報をセットしていきます。

let ctx = document.getElementById('chart');

描画に必要な要素

Chart.jsでは、type, data, optionsの3要素を指定してグラフの描画を行います。

type

typeではグラフの種類を指定します。
typeで定めた値によって、どの形でグラフが描画されるのかが決定します。

typeの値	グラフの種類
line	線グラフ
bar	棒グラフ
radar	レーダーチャート
pie	円グラフ
doughnut	ドーナツチャート
polarArea	鶏頭図(値によって半径が異なる円グラフ)
bubble	バブルチャート
scatter	散布図

data

dataではグラフに表示するラベルや、データなどの値を設定します。
dataにはさまざまなプロパティを設定することができます。
以下、プロパティの一例です。

labels
グラフのX軸のラベルを設定する。
datasets
グラフの色やデータそのものの値(配列)を設定する。
グラフを複数描画する場合はその分だけ配列の中にオブジェクトを設定する。
label
グラフのラベル(何のグラフであるかを示す)を設定する。
backgroundColor
線グラフなら点の部分、棒グラフなら棒の部分の色を設定する。
borderColor
線グラフなら線の部分、棒グラフなら棒の境界線の部分の色を設定する。

options

optionsではアニメーションの設定やX軸・Y軸の設定など、グラフに関するオプション設定を変更することができます。(以下は一例)

animation
グラフ描画時のアニメーションを設定する。
- duration
  アニメーションにかかる秒数(ミリ秒)
- easing
  アニメーションの種類
scales
軸に関する値を設定する。
- scaleLabel
  軸ラベルについて設定する。　　
- ticks
  目盛りについて設定する。

描画してみる

今回はよく見かけるであろう線グラフ(line)と棒グラフ(bar)、そして私自身描いたことのなかった鶏頭図(polarArea)を描画してみようと思います。

線グラフ

<body>
    <canvas id="lineChart"></canvas>
    <script>
        let lineCtx = document.getElementById("lineChart");
        // 線グラフの設定
        let lineConfig = {
          type: 'line',
          data: {
            // ※labelとデータの関係は得にありません
            labels: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
            datasets: [{
              label: 'Red',
              data: [20, 35, 40, 30, 45, 35, 40],
              borderColor: '#f88',
            }, {
              label: 'Green',
              data: [20, 15, 30, 25, 30, 40, 35],
              borderColor: '#484',
            }, {
              label: 'Blue',
              data: [30, 25, 10, 5, 25, 30, 20],
              borderColor: '#48f',
            }],
          },
          options: {
            scales: {
              // Y軸の最大値・最小値、目盛りの範囲などを設定する
              y: {
                suggestedMin: 0,
                suggestedMax: 60,
                ticks: {
                  stepSize: 20,
                }
              }
            },
          },
        };
        let lineChart = new Chart(lineCtx, lineConfig);
    </script>
</body>

(ブラウザで表示 )

棒グラフ

<body>
    <canvas id="barChart"></canvas>
    <script>
        // 棒グラフの設定
        let barCtx = document.getElementById("barChart");
        let barConfig = {
          type: 'bar',
          data: {
            labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
            datasets: [{
              data: [10, 19, 6, 8, 2, 11],
              label: 'label',
              backgroundColor: [  // それぞれの棒の色を設定(dataの数だけ)
                '#ff0000',
                '#0000ff',
                '#ffff00',
                '#008000',
                '#800080',
                '#ffa500',
              ],
              borderWidth: 1,
            }]
          },
        };
        let barChart = new Chart(barCtx, barConfig);
    </script>
</body>

(ブラウザで表示)

鶏頭図

<body>
    <canvas id="polarChart"></canvas>
    <script>
        // 鶏頭図の設定
        let polarCtx = document.getElementById("polarChart");
        let polarConfig = {
          type: 'polarArea',
          data: {
            labels: ['April','May','June','July','August'],
            datasets: [{
              label: '月別結果',
              data: [7, 10, 9, 4, 5],
              backgroundColor: [
                '#ff0000',
                '#0000ff',
                '#ffff00',
                '#008000',
                '#ffa500',
              ]
            }]
          },
        };
        let polarChart = new Chart(polarCtx, polarConfig);
    </script>
</body>