PHPプログラマーの松永です。
今回は、簡単に数値データをグラフ化することができるChartJSを使用したグラフの作成方法を紹介します。
目次
ChartJS
公式サイトには、60個以上のサンプルがあり、自分のグラフを見つけることができます。
用途により選択することができので、とても参考になります。
HTML
HTMLはとてもシンプルです。
canvasを使用し、枠のみ作成するだけです。
<canvas id="chartjs" width="400" height="120"></canvas>
CSS
今回はCSSはありませんが、ChartJSのオプションでスタイルの指定を行っています。
Js
HTMLがシンプルな代わりに、Jsは少し記述が多くなります。
ただ、グラフを作成するというコードとしては、とても少ないコードでグラフを作成することができます。
一番のメインは、「data→datasets→data」です。
この値がグラフになる数値で、このデータを設定するのみでグラフを描画してくれます！
var ctx = document.getElementById('chartjs').getContext('2d');
var monthsPriceChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
datasets: [{
label: '取得ポイント',
data: [13000, 11000, 14900, 8000, 19000, 12000, 10000, 18000, 11000, 13000, 14900, 18000],
borderColor: 'rgba(54, 162, 235, 1)',
backgroundColor: 'rgba(54, 162, 235, 0.05)',
borderWidth: 1
}]
},
options: {
title: {
display: true,
fontColor: '#334d6e',
fontSize: '20',
text: '2019年',
}
}
});
jsfiddle
実際の動作をjsfiddleで確認できますので、是非動作させてみてください。
ページのローディング直後にヌルッとグラフが整形される挙動は、ChartJSの挙動のまま使用しています。
以上でございます。
まとめ
数値や日々の推移など、1つづつ見ていけば確認することができますが、パッと見で判断できるグラフはとても便利です。
数値を管理するという機能があり、まだグラフを導入していないという方の参考にあれば幸いです。