Chart.js 2 で散布図（Scatter plot）を実装する方法
はじめに
今日は Chart.js 2 で散布図を実装する方法と、軸や凡例、マーカーなどの設定方法をご紹介します。
今回使用したのは Chart.js 2.9.3 です。
1. 下準備
今回サンプルで使用した HTML です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>散布図（Scatter plot）</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<script>
// データ
var plotData = {
group1: [
{ x: 1, y: 81}, { x: 1, y: 124}, { x: 2, y: 130},
{ x: 2, y: 101}, { x: 3, y: 137}, { x: 3, y: 132},
{ x: 3, y: 152}, { x: 4, y: 137}, { x: 5, y: 134},
{ x: 5, y: 142}, { x: 6, y: 149}, { x: 7, y: 152},
{ x: 8, y: 158}, { x: 9, y: 155}, { x: 10, y: 166},
],
group2: [
{ x: 1, y: 41}, { x: 1, y: 121}, { x: 1, y: 100},
{ x: 2, y: 96}, { x: 3, y: 113}, { x: 4, y: 89},
{ x: 5, y: 124}, { x: 5, y: 137}, { x: 5, y: 151},
{ x: 6, y: 161}, { x: 6, y: 130}, { x: 7, y: 126},
{ x: 7, y: 122}, { x: 9, y: 149}, { x: 10, y: 205},
]
}
</script>
<script src="js/app.js"></script>
</head>
<body>
<canvas id="chart-area" width="640" height="320"></canvas>
</body>
</html>グラフで使用するデータを HTML ファイルに書いていますが、後ほどご紹介する JS ファイルが長くなるために、便宜上こうしています。
今回作る散布図は、ある集団 Group 1、Group 2 の、ゲームのプレイ回数と得点の関係性を調べる場面を想定し、データは x がプレイ回数、y が得点を表しています。
（データは適当に作っています）
軸は縦横入れ替えても差し支えありませんが、書籍「データビジュアライゼーションの教科書」（2019年 藤 俊久仁、渡部 良一）では、横軸を「原因」、縦軸を「結果」がよいとされています。
chart.js の CDN は下記で確認できます。
（執筆時点での最新版は 3.0.0-alpha です）
- Chart.js - cdnjs.com - The best FOSS CDN for web related libraries to speed up your websites
- https://cdnjs.com/libraries/Chart.js/2.9.3
- CDN (Installation · Chart.js documentation)
- https://www.chartjs.org/docs/latest/getting-started/installation.html#cdn
2. シンプルに散布図を描画
まずは、オプションをほとんど付けない、シンプルな散布図を実装してみます。
window.onload = function () {
// データ
var data = {
datasets: [
// Group 1
{
label: 'Group1',
data: plotData.group1,
},
// Group 2
{
label: 'Group2',
data: plotData.group2,
},
],
};
// グラフオプション
var options = {
// 自動サイズ変更をしない
responsive: false,
};
// 散布図を描画
var ctx = document.getElementById('chart-area').getContext('2d');
new Chart(ctx, {
type: 'scatter',
data: data,
options: options,
});
}実行結果は下記のようになります。
このサンプルコードは、下記 Chart.js 公式ドキュメントで紹介されているコードに少し手を加えた感じですが、やはりこのままだと情報が足りないですし、視認性もよくないですね。
- Scatter · Chart.js documentation
- https://www.chartjs.org/docs/latest/charts/scatter.html
次に、それらを改善するためにオプションの設定方法をご紹介します。
3. 軸ラベル追加、色変更などのオプションを追加
先に紹介したコードにオプションを追加して、軸ラベルの表示や、マーカーの変更などを行います。
コードは以下の通りです。
ビギナーの方向けに、コメントを多めにつけています。
window.onload = function () {
// データ
var data = {
datasets: [
// Group 1
{
label: 'Group1',
data: plotData.group1,
// マーカー 背景色
backgroundColor: 'rgba(0, 159, 255, 0.45)',
// マーカー 枠線の色
borderColor: 'rgba(0, 159, 255, 0.5)',
// マーカー 大きさ
pointRadius: 5,
},
// Group 2
{
label: 'Group2',
data: plotData.group2,
backgroundColor: 'rgba(255, 48, 32, 0.45)',
borderColor: 'rgba(255, 48, 32, 0.5)',
pointRadius: 5,
},
],
}
// オプション
var options = {
// 自動サイズ変更をしない
responsive: false,
// タイトル
title: {
display: true,
fontSize: 14,
fontStyle: 'normal', // 太字にしない
padding: 20,
text: '各グループのプレイ回数と得点の関係'
},
// 凡例
legend: {
// 右上に配置
align: 'start',
position: 'right',
// 余白
labels: {
padding: 15
}
},
// 軸
scales: {
// X 軸
xAxes: [{
// 軸ラベル
scaleLabel: {
display: true,
labelString: 'プレイ回数',
},
// 軸線のスタイル
gridLines: {
color: '#f3f3f3',
zeroLineColor: '#ddd'
},
// 目盛り
ticks: {
fontColor: '#333',
min: 0,
stepSize: 2,
},
}],
// Y 軸
yAxes: [{
scaleLabel: {
display: true,
labelString: 'スコア（点）',
},
gridLines: {
color: '#f3f3f3',
zeroLineColor: '#ddd'
},
ticks: {
fontColor: '#333',
min: 0,
stepsize: 25,
}
}]
}
};
// 散布図を描画
var ctx = document.getElementById('chart-area').getContext('2d');
new Chart(ctx, {
type: 'scatter',
data: data,
options: options,
});
}
「datasets」で指定できる項目は、公式ドキュメントの下記ページに掲載されています。
Line chart のページになりますが、Scatter のページにそこを見るように書かれています。
- Dataset Properties (Line · Chart.js documentation)
- https://www.chartjs.org/docs/latest/charts/line.html#dataset-properties
- Dataset Properties (Scatter · Chart.js documentation)
- https://www.chartjs.org/docs/latest/charts/scatter.html#dataset-properties
（上記 Line のページへのリンクがあるだけです）
「options」で指定した項目は、下記ページに説明があります。
- Responsive · Chart.js documentation
- https://www.chartjs.org/docs/latest/general/responsive.html
- Title · Chart.js documentation
- https://www.chartjs.org/docs/latest/configuration/title.html
- Legend · Chart.js documentation
- https://www.chartjs.org/docs/latest/configuration/legend.html
以下は options で指定した軸に関する項目です。
ちょっと分かりづらかったので、他の資料を調べたり、試行錯誤しながら実装しました。
- Axes · Chart.js documentation
- https://www.chartjs.org/docs/latest/axes/
- Linear · Chart.js documentation
- https://www.chartjs.org/docs/latest/axes/cartesian/linear.html
- Labelling · Chart.js documentation
- https://www.chartjs.org/docs/latest/axes/labelling.html
- Styling · Chart.js documentation
- https://www.chartjs.org/docs/latest/axes/styling.html
4. おわりに
Chart.js は色々なことができて便利なのですが、公式ドキュメントのサンプルコードが少ないため、各種オプションの資料を見ながら試行錯誤しています。
公式以外にも様々な方が情報を公開していますので、検索してみると良いかもしれません。
検索する際には日本語だけでなく「chart.js scatter」のように英語でも調べると良いと思います。英語の解説文は理解できなくても、ソースコードは読めたりします。ただ、公開されているコードの中には「このコードではできなかった」と紹介されている場合もありますので、ご注意ください。
また、非公式資料で実装方法が分かったときには、それをヒントに当該箇所を公式ドキュメントで探してみると良いと思います。バージョンが上がって書き方が変わった場合にも対応できます。
ところで散布図の英訳ですが、chart.js の公式ドキュメントでは Scatter chart なのですが、Google で調べてみると Scatter plot の方が多いようで、本記事内でも後者で統一しています。
