組み込み系で今ままでJavascriptをあまり使ってこなかった事を悔い改め、
今回chart.jsを初めて使ってみました。
環境
Mac (OS High Sierra 10.13.6)
chart.js のインストール
$ npm install chart.js --save
ファイルの準備
index.html/chart.htmlを準備する。
$ mkdir test
$ cd test
$ ls
index.html # インデックスファイル
chart.html # chart.jsを使うファイル
index.html
index.html
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Sample</title>
</head>
<body>
<h1>sample</h1>
<p>
<a href="chart.html">chart-棒グラフ</a>
</p>
</body>
</html>
chartjsを使用したファイルの準備
以下のchart.htmlを使わせて頂きます。
chart.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>グラフ</title>
</head>
<body>
<h1>棒グラフ</h1>
<canvas id="myBarChart"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script>
<script>
var ctx = document.getElementById("myBarChart");
var myBarChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['8月1日', '8月2日', '8月3日', '8月4日', '8月5日', '8月6日', '8月7日'],
datasets: [
{
label: 'A店 来客数',
data: [62, 65, 93, 85, 51, 66, 47],
backgroundColor: "rgba(219,39,91,0.5)"
},{
label: 'B店 来客数',
data: [55, 45, 73, 75, 41, 45, 58],
backgroundColor: "rgba(130,201,169,0.5)"
},{
label: 'C店 来客数',
data: [33, 45, 62, 55, 31, 45, 38],
backgroundColor: "rgba(255,183,76,0.5)"
}
]
},
options: {
title: {
display: true,
text: '支店別 来客数'
},
scales: {
yAxes: [{
ticks: {
suggestedMax: 100,
suggestedMin: 0,
stepSize: 10,
callback: function(value, index, values){
return value + '人'
}
}
}]
},
}
});
</script>
</body>
</html>
httpサーバの起動
index.htmlのあるディレクトリで以下を実行
$ python -m http.server 8000
アクセス
webブラウザから、localhost:8000 にアクセスしてchart.jsのグラフが表示されればOK
データの可視化に便利かな？（今はもっと良いライブラリがある？）
課題
- もっと良い可視化ライブラリを探してみる
- データの読み書き方法について調べてみる
- chart.jsをGitHub Pagesでも使えるか試す