Posted at

chart.jsを使っておしゃれなグラフを表示する(入門編)


はじめに

今回は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で描写する8つのグラフについて紹介しました。

紹介したソースコードは非常にシンプルですが、こちらをベースに御自身で必要な要素を追加してみて下さい。

(筆者は、Arduinoで温度等を取得した値をchart.jsで出力して植物の栽培管理をするシステムを作りました)