Chart.jsを使ったグラフの作り方

ある案件で「売り上げ管理」っていうページを頼まれてもないのに作ってみました。

月々の売り上げ一覧をグラフで表せたらなぁと思って、ライブラリを探してみたんですが、「Chart.js」というよさげなのがありましたのでご紹介します。

Chart.js : https://www.chartjs.org/

まずは完成形

完成したスクショがコチラ。

赤で囲ってる部分がライブラリで作れる分です。

表示させたいものは増やせます。

サンプル一覧はコチラ

サンプル : https://www.chartjs.org/samples/latest/

Chart.jsの使い方

まずはHTML CDN読み込み

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>

グラフを表示させたい場所へコレ

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

続きましてJSの記述がコチラ

<script>
var ctx = document.getElementById('myChart');
var myChart = new Chart(ctx, {
type: 'line', //タイプを指定
data: {
labels: ['01月', '02月', '03月', '04月', '05月', '06月', '07月', '08月', '09月', '10月', '11月', '12月'], //月とかを配列で記入
datasets: [{
label: '売り上げ',
data: ['100', '150', '200', '250', '300', '400', '500', '100', '200', '300', '400', '100'], //データ数値を配列で（本来は変数で引っ張って使うようにする）
backgroundColor: [ //この辺は全部カラーの設定↓
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)',
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)',
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)',
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)',
],
borderWidth: 1,
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
</script>

今回は割愛してますが、動的に売り上げを表示させてく必要があるので、配列に入れてその時その時の合計売上額が表示できるように変数に入れたりして使えます。

・例えばこんな使い方↓

申込

↓

完了（ここで売り上げが発生）

↓

完了したものだけデータベースから引っ張る

↓

月毎に数値を合計して引っ張る

↓

表示させる

という形ですね。

で、後は前年と次年の送りボタンをつけて完成って感じです。

簡単ですので、機会があればお試しください。

現場から以上です！

【参考】

公式 : https://www.chartjs.org/

使い方 : https://www.chartjs.org/docs/latest/

サンプル : https://www.chartjs.org/samples/latest/