【JavaScript】Chart.jsで散布図を表示する

2024-04-16Chart.js,JavaScript

ブラウザ上でグラフを表示できるJavaScriptライブラリの1つである、Chart.jsについて使い方をまとめてみました。

更新履歴
2021/05/30 修正
2022/01/31 文体修正

Chart.js公式

Chart.jsの機能拡張プラグインの使い方と応用例は次のエントリーを参照してください。

前準備

ブラウザ上でJavaScriptを使用するので、HTMLファイルを前もって用意します。Chart.js自体はCDNにあるものを利用するのが簡単です。

Chart.jsは<canvas>にグラフを表示するので、<body>内に<canvas>を入れておきます。id属性を忘れずに。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.2.0/chart.min.js"></script>
  <title>Chart.jsで散布図を描く</title>
</head>
<body>
  <!-- グラフを表示 -->
  <canvas id="chart"></canvas>
  <script type="text/javascript">
    <!-- ファイルを読み込んで散布図を表示する部分のコード -->
  </script>
</body>
</html>

散布図の表示

散布図を作成するには、typeを'scatter'に設定してChartオブジェクトを生成します。

const ctx = document.getElementById('chart');
const myChart = new Chart(ctx, {
  type: 'scatter',
  data: {
    datasets: [{
      // 実際のデータ
      data: [
        // オブジェクトの配列
        // { x: 0, y: 0 }, ...
      ],
    }],
  },
  // options: {}, ...
});

データ系列の設定

データ系列の設定をするには、生成する（した）Chartオブジェクトのdata.datasetsプロパティにオブジェクトの配列を与えます。

実際のデータはdata.datasets[].dataに与える必要がありますが、散布図の場合、xとyの2つのプロパティを持つオブジェクトの配列に形式が限定されるので注意が必要です。

設定可能な主なプロパティは以下。

プロパティ設定内容設定可能な値
dataX-Yデータ{ x: 数値, y: 数値 }の配列
labelデータ系列の名前（凡例表示用）任意の文字列
showLine線表示の有無true / false
pointStyle点のスタイル'circle' / 'cross' / 'crossRot' / 'dash' / 'line' / 'rect' / 'rectRot' / 'rectRounded' / 'star' / 'triangle'またはImageオブジェクト
pointBorderColor点の枠線の色色
pointBackgroundColor点の塗りつぶしの色色
pointRadius点の大きさ数値（0で点を描画しない）
borderColor線の色色
borderWidth線の太さ数値
cubicInterpolationMode点と点の補間方法default（折れ線） / monotone（曲線）

データ系列で設定可能なプロパティ一覧

データ系列の設定を後から変更した場合は、update()メソッドを呼び出して表示を必ず更新する必要があります。

グラフの設定

グラフの設定を変更する場合には、生成したChartオブジェクトのoptionsプロパティにオブジェクトを設定します。

グラフの設定を後から変更した場合は、update()メソッドを呼び出して表示を必ず更新する必要があります。

グラフタイトル

グラフタイトルを設定するには、options.plugins.titleプロパティに値を設定します。古いドキュメントでは、ここがoptions.titleとなっていることに注意してください。

設定可能な主なプロパティを以下に示します。

プロパティ設定内容設定可能な値
displayタイトル表示の有無true / false
positionタイトルの表示位置'top' / 'bottom' / 'right' / 'left'
textタイトル文字列任意の文字列
font.sizeタイトルの大きさ数値

グラフタイトルで設定可能なプロパティ一覧

凡例

凡例を設定するには、options.plugins.legendプロパティに値を設定します。古いドキュメントでは、ここがoptions.legendとなっていることに注意してください。

設定可能な主なプロパティを以下に示します。

プロパティ設定内容設定可能な値
display凡例表示の有無true / false
position凡例の表示領域'top' / 'bottom' / 'right' / 'left' / 'chartArea'
align凡例の表示位置'start' / 'center' / 'end'
labels.font.size凡例文字列の大きさ数値

positionをtop / bottom / right / leftに設定した場合は、グラフの外側に、chartAreaに設定した場合は、グラフ内部の左側に表示されます。

alignではpositionで指定した領域の先頭(start)、中央(center)、末尾(end)のどこに凡例を表示するかを指定します。

凡例で設定可能なプロパティ一覧

X軸・Y軸

X軸・Y軸は、それぞれoptions.scales.x, options.scales.yプロパティで設定します。設定可能な主なプロパティを以下に示します。

プロパティ設定内容設定可能な値
type軸の種類'linear'（線形軸） / 'logarithmic'（対数軸）
display軸ラベルと目盛の表示の有無true / false / 'auto'
position軸ラベルと目盛の表示位置'top'/'bottom' / 'right' / 'left'
ticks軸上の目盛の設定オブジェクト →
title軸ラベルの設定オブジェクト →
grid目盛線の設定オブジェクト →
minグラフに表示する最小値数値
maxグラフに表示する最大値数値

軸で設定可能なプロパティ一覧

目盛の設定

ticksオブジェクトに設定できる主なプロパティを以下に示します。

プロパティ設定内容設定可能な値
display目盛表示の有無true / false
stepSize目盛の間隔数値
font.size目盛文字列の大きさ数値

ticksで設定可能なプロパティ一覧

軸ラベルの設定

titleオブジェクトに設定できる主なプロパティを以下に示します。

プロパティ設定内容設定可能な値
display軸ラベル表示の有無true / false
align軸ラベルの表示位置'start' / 'center' / 'end'
text軸ラベル文字列任意の文字列
font.size軸ラベル文字列の大きさ数値

titleで設定可能なプロパティ一覧

目盛線・軸・軸上の目盛線の設定

gridオブジェクトに設定できる主なプロパティを以下に示します。

プロパティ設定内容設定可能な値
display目盛線・軸・軸上の目盛線の表示の有無true / false
drawBorder軸の表示の有無true / false
drawOnChartArea目盛線表示の有無true / false
drawTicks軸上の目盛線の表示の有無true / false
boarderWidth軸の太さ数値
lineWidth目盛線の太さ数値
tickWidth軸上の目盛線の太さ数値
tickLength軸上の目盛線の長さ数値

gridで設定可能なプロパティ一覧

実際の設定例

2次関数$f(x) = a_{0} + a_{1}x + a_{2}x^{2}$をChart.jsの散布図としてプロットするコードの例を以下に示しました。

まとめ

Chart.jsの使い方をまとめてみました。それほど設定は難しくなく、シンプルで使いやすいライブラリと言えます。

ちなみに、検索するとChart.jsの日本語ドキュメントなるものが見つかります。これは、有志の方が翻訳したものであり公式のものではありません。内容が古く、Chart.jsのver.3以降では一部オプションの設定方法が異なっているところがあるので注意してください。同様にブログの記事にも古い記述が見られるので、対応バージョンにご注意ください。

Chart.js,JavaScript

Posted by izadori