Chart.js Hello World

Hello Worldということで、まずは最も単純なコードを書いてみます。

ソースコード

Html

<canvas id="myChart"></canvas>

JavaScript

function drawChart(canvasEl) {

	const config = {
		type: 'line',
		data: {
			labels: ['1月', '2月', '3月', '4月', '5月'],
			datasets: [
				{
					data: [96, 112, 113,100,108],
				},
			]
		}
	};

	const myChart = new Chart(canvasEl, config)

}

let canvasEl = document.getElementById("myChart").getContext('2d');
drawChart(canvasEl)

 解説

new Chart(canvasEl, config)

で<canvas>タグにグラフが表示されます。Chart()の引数には描画用のcanvasエレメントとチャート用のconfgオブジェクトが必要です。

chart configでtype: 'line'とすることでチャートの種類を指定することができます。ここでは線グラフ（折れ線グラフ）を指定しています。

data: {
	labels: ['1月', '2月', '3月', '4月', '5月'],
	datasets: [
		{
			data: [96, 112, 113,100,108],
		},
	]
}

グラフ用のデータはconfig.dataプロパティに設定します。

labelsは必須であり、X軸（横軸）にこの値が表示されます。Y軸（縦軸）の値は自動的に付されています。

コードを簡略化するため、凡例（undefinedとなっている）やcolorなどを省いていますが、一応チャートを表示させることができます。

Demo

以下のグラフは上のコードで実際に描画したものです。凡例（undefined）をクリックすると線の表示・非表示をトグルできます。