はじめに
今回はchart.jsを用いて「動く！」「おしゃれ！」「かんたん！」なグラフを表示していきたいと思います。
⚠️htmlファイルとjsファイルをそれぞれ作ることを推奨しますが、初心者の方は躓く可能性があるため、独断でまとめてhtmlファイルに記述しちゃいます。
chart.jsとは
折れ線グラフ、棒グラフ、円グラフ、レーダーチャートなど、8種類のグラフが簡単に描けてしまうJavascriptのライブラリです。 HTML5のCanvasを使って描画され、表示の際の気持ちいいアニメーションの動きが特徴的です。 とても分かりやすいマークアップなので、誰でも簡単に編集ができるようになっています。
実際に表示すると↓のようになります。
ソースコード
早速ソースコードに入ります。
公式サイトでもサンプルコードが公開されています。
公式サイト内でグラフを弄れるのでぜひ！
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>chart</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.min.js"></script>
</head>
<body>
<canvas id="myChart"></canvas>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],
datasets: [{
label: 'label',
data: [3, 18, 6, 10, 12, 7, 12],
backgroundColor: "rgba(255,153,0,0.4)"
}]
}
});
</script>
</body>
</html>
各グラフの描写方法
棒グラフ：type:'line',
折れ線グラフ：type:'bar',
レーダーチャート：type:'radar',
散布図：type:'scatter',
円グラフ：type:'pie',
ドーナツチャート：type:'doughnut',
バブルチャート：type:'bubble',
鶏頭図：type:'polarArea',
に変更すれば描写できます。
グラフの数値を変数によって動的に変化させたいとき
data: [3, 18, 6, 10, 12, 7, 12],
↓
data: [a, b, c, d, e, d, e],
の数値の部分を任意の変数にするだけでok!
まとめ
今回はchart.jsで描写する８つのグラフについて紹介しました。
紹介したソースコードは非常にシンプルですが、こちらをベースに御自身で必要な要素を追加してみて下さい。