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

2022-01-31Chart.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つのプロパティを持つオブジェクトの配列に形式が限定されるので注意が必要です。

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

プロパティ 設定内容 設定可能な値
data X-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