【JavaScript】Chart.jsで散布図を表示する
ブラウザ上でグラフを表示できる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 |
目盛文字列の大きさ | 数値 |
軸ラベルの設定
title
オブジェクトに設定できる主なプロパティを以下に示します。
プロパティ | 設定内容 | 設定可能な値 |
---|---|---|
display |
軸ラベル表示の有無 | true / false |
align |
軸ラベルの表示位置 | 'start' / 'center' / 'end' |
text |
軸ラベル文字列 | 任意の文字列 |
font.size |
軸ラベル文字列の大きさ | 数値 |
目盛線・軸・軸上の目盛線の設定
grid
オブジェクトに設定できる主なプロパティを以下に示します。
プロパティ | 設定内容 | 設定可能な値 |
---|---|---|
display |
目盛線・軸・軸上の目盛線の表示の有無 | true / false |
drawBorder |
軸の表示の有無 | true / false |
drawOnChartArea |
目盛線表示の有無 | true / false |
drawTicks |
軸上の目盛線の表示の有無 | true / false |
boarderWidth |
軸の太さ | 数値 |
lineWidth |
目盛線の太さ | 数値 |
tickWidth |
軸上の目盛線の太さ | 数値 |
tickLength |
軸上の目盛線の長さ | 数値 |
実際の設定例
2次関数$f(x) = a_{0} + a_{1}x + a_{2}x^{2}$をChart.jsの散布図としてプロットするコードの例を以下に示しました。
まとめ
Chart.jsの使い方をまとめてみました。それほど設定は難しくなく、シンプルで使いやすいライブラリと言えます。
ちなみに、検索するとChart.jsの日本語ドキュメントなるものが見つかります。これは、有志の方が翻訳したものであり公式のものではありません。内容が古く、Chart.jsのver.3以降では一部オプションの設定方法が異なっているところがあるので注意してください。同様にブログの記事にも古い記述が見られるので、対応バージョンにご注意ください。
ディスカッション
コメント一覧
まだ、コメントがありません