Chart.js 2 での折れ線グラフの作り方&軸設定やスタイルの変更方法
はじめに
今日は Chart.js 2 での折れ線グラフの基本的な実装方法と、軸設定やスタイルの変更方法をご紹介します。
今回使用したのは Chart.js 2.9.3 です。
1. 下準備
今回使用した HTML と Javascript です。
app.js にグラフ描画の処理を記述しますが、そちらは後ほどご紹介します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Line chart</title>
<script>
var plotLabels = ['1月', '2月', '3月', '4月', '5月', '6月'];
var plotData = {
site1: [28, 42, 31, 56, 63, 79],
site2: [17, 32, 35, 41, 47, 50],
};
</script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"
integrity="sha512-s+xg36jbIujB2S2VKfpGmlC3T5V2TF3lY48DX7u2r9XzGzgPsa6wTpOQA7J9iffvdeBN0q9tKzRxVxw1JviZPg=="
crossorigin="anonymous"></script>
<script src="app.js"></script>
</head>
<body>
<canvas id="myChart" width="640" height="270"></canvas>
</body>
</html>
Chart.js の CDN は下記で確認できます。
- 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 = {
labels: plotLabels,
datasets: [
{
label: 'Site A',
data: plotData.site1,
},
{
label: 'Site B',
data: plotData.site2,
},
],
};
// グラフオプション
var options = {
// 自動サイズ変更をしない
responsive: false,
};
// 折れ線グラフを描画
var ctx = document.getElementById('myChart').getContext('2d');
var myLineChart = new Chart(ctx, {
type: 'line',
data: data,
options: options,
});
};
Web サイトの月間アクセス数の比較を想定しています。
実行すると下記のようなシンプルな折れ線グラフが表示されます。
3. 軸の設定とスタイル変更
基本的な実装だけでは情報が不十分で、視認性もあまり良くないので、軸ラベルの追加やグラフの色付けなどのオプションを追加します。
今回作成したコードは以下の通りです。
説明用にコメントを多めにつけています。
window.onload = function() {
// データ
var data = {
labels: plotLabels,
datasets: [
{
label: 'Site A',
data: plotData.site1,
// 背景色
backgroundColor: '#7fcfff',
// 線の色
borderColor: '#7fcfff',
// 塗りつぶし
fill: false,
// 折り目をカクカクにする
lineTension: 0,
// マーカー背景色
pointBackgroundColor: '#7fcfff',
// マーカーの Hover 時のサイズ
pointHoverRadius: 3
},
{
label: 'Site B',
data: plotData.site2,
backgroundColor: '#ff978f',
borderColor: '#ff978f',
fill: false,
lineTension: 0,
pointBackgroundColor: '#ff978f',
pointHoverRadius: 3
},
],
};
// グラフオプション
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: [{
// 軸線を表示しない
gridLines: {
display: false,
},
// 目盛り
ticks: {
fontColor: '#333',
},
}],
// Y 軸
yAxes: [{
scaleLabel: {
display: true,
labelString: 'アクセス数(万件)',
},
gridLines: {
color: '#f3f3f3',
zeroLineColor: '#ddd'
},
ticks: {
fontColor: '#333',
min: 0,
max: 100,
stepSize: 20,
}
}]
}
};
// 折れ線グラフを描画
var ctx = document.getElementById('myChart').getContext('2d');
var myLineChart = new Chart(ctx, {
type: 'line',
data: data,
options: options,
});
};
実行結果は下記のようになります。
細かいところでは、縦軸を非表示にしたり、マウスをマーカーに乗せた時のサイズ調整などもしています。
項目ごとの説明は割愛しますが、サンプルコードと公式ドキュメントを比較することで、様々なカスタムができるようになると思います。
以下に参考になりそうな公式ドキュメントのページをまとめますので、ご確認いただければと思います。
- Dataset Properties (Line · Chart.js documentation)
- https://www.chartjs.org/docs/latest/charts/line.html#dataset-properties
- 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
- Cartesian · Chart.js documentation
- https://www.chartjs.org/docs/latest/axes/cartesian/
- Grid Line Configuration (Cartesian · Chart.js documentation)
- https://www.chartjs.org/docs/latest/axes/styling.html#grid-line-configuration
4. おわりに
折れ線グラフは散布図のコードと非常に近くて、
これまでの経験や、先月投稿した「Chart.js 2 で散布図(Scatter plot)を実装する方法」のコード流用などのおかげで短時間で実装できました。
当初はマーカーを消そうと考えて、実際に試してみたのですが、単純に pointRadius を 0 にすると、ツールチップ表示の判定がシビアになってしまいました。
時間をみて、うまいことマーカーを消す方法を探ってみようと思っています。