ITエンジニア勉強ブログ

自分が学んだことを共有していきます。

Chart.jsの基本的な使い方

IT

この記事ではJavaScriptのグラフ描画ライブラリの一つであるChart.jsを紹介します。


See the Pen
Untitled by Imai (@imai1)
on CodePen.


基本的な使い方

サンプルコード

まずはChart.jsのライブラリを読み込みます。CDNにリンクする他、GitHubやnpmからでも使用可能です。

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

なお、この記事のサンプルは上記の通りバージョン3.8.0で動作確認しました。

次に、グラフを描画するためのcanvasをID付きで用意します。

<div style="width: 400px;">
  <canvas id="canvas1" width="300" height="150">
    <p>First Chart.js Sample</p>
  </canvas>
</div>

最後に、用意したcanvasタグへの描画するデータをChartクラスに与えると、タグにグラフが描画されます。

const ctx = document.getElementById("canvas1").getContext("2d");
const myChart = new Chart(ctx, {
  type: "bar",  // 棒グラフ
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [
      {
        label: "# of Votes",
        data: [12, 19, 3, 5, 2, 3],
        backgroundColor: [ /* 長いので省略 */ ],
        borderColor: [ /* 長いので省略 */ ],
        borderWidth: 1
      }
    ]
  }
});

Chartクラス

Chartクラスの第二引数に与えるオブジェクトによってグラフの見た目を様々に制御することができます。

  • type：グラフの種類。
  • data：グラフの中身のデータ。値そのものだけでなく描画の情報も含む。
  • option：グラフ全体の見た目や挙動を制御するオプション。

dataプロパティに与えるオブジェクトは、論理的には多次元配列のようなものだと考えると分かり易いです。

new Chart(ctx, {
  data: {
    labels: [1つ目のデータのラベル, 2つ目のデータのラベル, ...],
    datasets: [
      {
        label: "# of Votes",
        data: [1つ目のデータの値, 2つ目のデータの値, ...],
        backgroundColor: [1つ目のデータの色, 2つ目のデータの色, ...],
        borderColor: "rgb(0, 0, 0)",  // 共通で黒
        borderWidth: 1  // 共通で1
      }
    ]
  }
});

データセット内のdataやbackgroundColorは、インデクス0の要素は1つ目のデータの値・色を表し、インデクス1の要素は2つ目のデータの値・色を表す、というように同じインデクスが同じデータのプロパティに対応しています。

いくつかのプロパティは配列の代わりに単一の値を設定することも可能です。例えば上の例では、borderColorに配列の代わりに共通の値を設定しています。

datasetsに複数の要素を与えると、一つのグラフに複数の棒や折れ線が描画されます。

new Chart(ctx, {
  data: {
    labels: [1つ目のデータのラベル, 2つ目のデータのラベル, ...],
    datasets: [
      { // 1つ目のデータセット
        label: "# of Votes",
        data: [1つ目のデータの値, 2つ目のデータの値, ...],
        backgroundColor: [1つ目のデータの色, 2つ目のデータの色, ...],
      },
      { // 2つ目のデータセット
        label: "# of Votes2",
        data: [1つ目のデータの値, 2つ目のデータの値, ...],
        backgroundColor: [1つ目のデータの色, 2つ目のデータの色, ...],
      }
    ]
  }
});

canvasのサイズ

<div style="width: 400px;">
  <canvas id="canvas1" width="300" height="150">
    <p>First Chart.js Sample</p>
  </canvas>
</div>

canvasタグのwidth height属性はキャンバスのアスペクト比を制御する要素として扱われるようです。ただし、それは棒グラフや折れ線グラフなど縦横比が自由なtypeのグラフに限られる話で、円グラフのように縦横比が1:1に固定されるグラフには無関係なようです。

アスペクト比ではなくグラフの描画領域のサイズを変更したい場合は、canvasタグをdivで囲んでスタイルを設定すれば良いようです。外側のタグのサイズを動的に変更した場合は、グラフも追従して再描画されます。

更に詳しく知りたい方は下記のページをご覧ください。

www.chartjs.org

グラフの種類

この節では棒グラフ、折れ線グラフなどといったグラフの種類を紹介します。

前置き

この節で紹介する種類のグラフは、全く同じ共通のdataをグラフ化することが可能です。この節の描画例の画像は、以下のようにtype（とcanvasのID）以外は全く共通のコードを用いて作成しました。

function two_datasets(canvasId, type) {
  const ctx = document.getElementById(canvasId).getContext("2d");
  const myChart = new Chart(ctx, {
    type: type,
    data: {
      labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
      datasets: [
        {
          label: "# of Votes",
          data: [12, 19, 3, 5, 2, 3],
          backgroundColor: [
            "rgba(255, 99, 132, 0.2)",
            "rgba(54, 162, 235, 0.2)",
            "rgba(255, 206, 86, 0.2)",
            "rgba(75, 192, 192, 0.2)",
            "rgba(153, 102, 255, 0.2)",
            "rgba(255, 159, 64, 0.2)"
          ],
          borderColor: [
            "rgba(255, 99, 132, 1)",
            "rgba(54, 162, 235, 1)",
            "rgba(255, 206, 86, 1)",
            "rgba(75, 192, 192, 1)",
            "rgba(153, 102, 255, 1)",
            "rgba(255, 159, 64, 1)"
          ],
          borderWidth: 1
        },
        {
          label: "# of Votes2",
          data: [11, 20, 5, 2, 3, 1],
          backgroundColor: [
            "rgba(255, 99, 132, 0.2)",
            "rgba(54, 162, 235, 0.2)",
            "rgba(255, 206, 86, 0.2)",
            "rgba(75, 192, 192, 0.2)",
            "rgba(153, 102, 255, 0.2)",
            "rgba(255, 159, 64, 0.2)"
          ],
          borderColor: [
            "rgba(255, 99, 132, 1)",
            "rgba(54, 162, 235, 1)",
            "rgba(255, 206, 86, 1)",
            "rgba(75, 192, 192, 1)",
            "rgba(153, 102, 255, 1)",
            "rgba(255, 159, 64, 1)"
          ],
          borderWidth: 1
        }
      ]
    }
  });
}

two_datasets("canvas3", "bar");
two_datasets("canvas4", "line");
two_datasets("canvas5", "pie");
two_datasets("canvas6", "doughnut");
two_datasets("canvas7", "radar");
two_datasets("canvas8", "polarArea");

棒グラフ

type: "bar"で棒グラフが作成できます。横軸はlabelsおよび個別のdataのインデクスに対応します。複数のデータセットはインデクスごとに横に並べられます。

折れ線グラフ

type: "line"で折れ線グラフが作成できます。一つのデータセットでひとまとまりの折れ線が作られます。横軸はlabelsおよび個別のdataのインデクスに対応します。

円グラフ（pie）

type: "pie"で穴なしの円グラフが作成できます。一つのデータセットで一つの円が構成されます。複数のデータセットは半径の異なる同心円として並べられます。labelsおよび個別のdataのインデクスは個別の扇に対応します。

円グラフ（doughnut）

type: "doughnut"で穴空きの円グラフが作成できます。データの並び方はpieと同様です。一つのデータセットで一つの円が構成されます。複数のデータセットは半径の異なる同心円として並べられます。labelsおよび個別のdataのインデクスは個別の扇に対応します。

レーダーチャート

type: "radar"でレーダーチャートが作成できます。labelsおよびdataの要素数と同じ頂点数の多角形が描画されます。複数のデータセットは（デフォルトでは別の色で）重ねて描画されます。

鶏頭図

type: "polarArea"で鶏頭図が作成できます。labelsおよびdataの要素数で円を等分した扇が形成されます。扇の半径がdataの値に対応します。複数のデータセットは同心円状に重ねて表示されます。

データの追加・削除とアニメーション

静的なデータを一度描画するだけでなく、後からデータを追加することも可能です。

const chart = new Chart(ctx, {
    data: { /* 省略 */ },
    options: {
      animation: true or false,
    }
  }
);
chart.data.labels.push("新しいlabel");
chart.data.datasets[0].data.push("0番目のデータセットの新しい値");
chart.update(); // 更新

やり方は、Chartのインスタンスを保持しておいて、data.labelsやdata.datasetsに値をpushするだけです。配列への要素追加が完了したら、updateを実行すれば反映されます。

削除の場合もpushの代わりに配列の要素をpopしてからupdateするだけです。複数の要素をpushまたはpopしたり、sliceで一部の要素を取り出したりしてからupdateすることも可能です。

また、options.animationでデータ更新がアニメーションされるかどうかが変更できます。

参考文献

www.chartjs.org