Chart.jsで横軸が日付のグラフを作成する

webサイト上で横軸が日付情報のグラフを作りたかったのでChart.js周りで色々調べた。
横軸が単純な数値じゃない場合は面倒くさくなるかなと思っていたが、Chart.jsが非常に使いやすく、すんなりできた。

最終的に作ったもの

画像で貼ろうと思ったが、結構サイズが大きいのでリンクで貼り付けておく。

グラフ類を描画するためのJavaScriptライブラリ。
HTMLの<canvas>要素に2Dグラフィックを描画できる。
ライセンスはMIT。

基本的な使い方を公式に従って確認してみる。

今回はとりあえず手軽そうなCDNを使う。
よってHTMLに以下のタグを追加する。

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>

なお、ここで Chart.bundle.min.js を選択したのは、今回日付データを扱うため。
Chart.min.js の方は日付データを扱うためのライブラリMoment.jsが含まれていない。

HTML側はグラフ描画用の<canvas>タグを作成する。
先ほどのCDNの参照及び今回作成するJavaScriptの読み込みを合わせて、HTML側のソースは以下のようになる。

	<html>
	<body>
	<canvas id="myChart"></canvas>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
	<script src="./main.js"></script>
	</body>
	</html>

view raw index.html hosted with ❤ by GitHub

JavaScript側は公式のサンプルを参考にして以下のようにする。

	var ctx = document.getElementById('myChart').getContext('2d');
	var chart = new Chart(ctx, {
	// The type of chart we want to create
	type: 'line',

	// The data for our dataset
	data: {
	labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
	datasets: [{
	label: 'My First dataset',
	backgroundColor: 'rgb(255, 99, 132)',
	borderColor: 'rgb(255, 99, 132)',
	data: [0, 10, 5, 2, 20, 30, 45]
	}]
	},

	// Configuration options go here
	options: {}
	});

view raw main.js hosted with ❤ by GitHub

これら2つのファイルを適当なところに保存して、index.htmlをブラウザで開く。
以下のようなグラフがブラウザ上に表示される。

サンプルが動いたので、今回扱いたい、横軸が日付情報のデータをプロットする。
HTML側は特に変更せず、JavaScript側を以下のように変更する。

	var ctx = document.getElementById('myChart').getContext('2d');
	var chart = new Chart(ctx, {
	// The type of chart we want to create
	type: 'line',

	// The data for our dataset
	data: {
	datasets: [{
	label: 'My First dataset',
	backgroundColor: 'rgb(255, 99, 132)',
	borderColor: 'rgb(255, 99, 132)',
	fill: false,
	data: [{
	x: '1995-12-17T00:00:00',
	y: 1
	}, {
	x: '1995-12-18T00:00:00',
	y: 10
	}, {
	x: '1995-12-20T00:00:00',
	y: 20
	}, {
	x: '1995-12-21T12:00:00',
	y: 30
	}, {
	x: '1996-01-01T00:00:00',
	y: 40
	}]
	}]
	},

	// Configuration options go here
	options: {
	scales: {
	xAxes: [{
	type: 'time',
	time: {
	unit: 'day'
	}
	}]
	}
	}
	});