【Chart.js】グラフやチャートが簡単に作れるライブラリ
Chart.js（ver.3）を用いて作ったグラフをご紹介します。
どれもアニメーション付きなので、ぜひグラフの画面に来たらページを更新して見てください。（スマホだとわかりにくいかもしれません。）
またオプションの設定では、コードの入れ子がかなり深くなってわかりにくいですが、項目としてはそんなに多く設定してはいないので、焦らなくても大丈夫です。
ライブラリを使う準備
ファイルをGitHubからダウンロードするかcdnjsからCDNを利用します。
グラフの種類や使い方、詳しいオプションはChart.jsで確認してください。
Line Chart（折れ線グラフ）
例：〇〇市 1週間の予想気温
マウスホバーまたはタップでデータの詳細が表示されます。
コード例
<canvas id="myChart1"></canvas>const labels1 = ['6日', '7日', '8日', '9日', '10日', '11日', '12日'];
const data1 = {
labels: labels1,
datasets: [{
label: '最低気温',
backgroundColor: '#4C3F91',
borderColor: '#4C3F91',
data: [15, 16, 16, 17, 14, 13, 14]
},{
label: '最高気温',
backgroundColor: '#C84B31',
borderColor: '#C84B31',
data: [21, 24, 23, 25, 19, 19, 22]
}]
};
const config1 = {
type: 'line',
data: data1,
options: {
plugins: {
legend: {
labels: {
boxHeight: 1 // 凡例ボックス高さ
}
},
tooltip: {
callbacks: { // ツールチップの表示を設定
label: function(context) {
let label = context.dataset.label || '';
if (label) {
label += ': ';
}
if (context.parsed.y !== null) {
label += context.parsed.y + '℃';
}
return label;
}
}
}
},
scales: {
x: {
grid: {
display: false // 目盛線を非表示
}
},
y: {
min: 0, // スケール最小値
max: 30, // スケール最大値
ticks: {
callback: function(value){
return value + '℃';
} // 目盛ラベルに単位を付与
}
}
}
}
};
const myChart1 = new Chart(
document.getElementById('myChart1'),
config1
);Bar Chart（棒グラフ）
例：年代別 ○○の所有率
マウスホバーまたはタップでデータの詳細が表示されます。
コード例
<canvas id="myChart2"></canvas>const labels2 = ['10代', '20代', '30代', '40代', '50代', '60代','70代', '80代'];
const data2 = {
labels: labels2,
datasets: [{
label: '所有率',
backgroundColor: 'rgba(201, 203, 207, 0.5)',
data: [61, 90, 84, 72, 49, 28, 12, 4]
}]
};
const config2 = {
type: 'bar',
data: data2,
options: {
plugins: {
legend: {
display: false // 凡例を非表示に
},
tooltip: {
displayColors: false, // ツールチップ内のカラーボックスを非表示に
callbacks: { // ツールチップの表示を設定
label: function(context) {
let label = context.dataset.label || '';
if (label) {
label += ': ';
}
if (context.parsed.y !== null) {
label += context.parsed.y + '％';
}
return label;
}
}
}
},
scales: {
x: {
grid: {
display: false // 目盛線を非表示
}
},
y: {
min: 0, // スケール最小値
max: 100, // スケール最大値
title: {
display: 'true', // スケールのタイトル表示
text: '所有率（％）' // タイトル名
}
}
}
}
};
const myChart2 = new Chart(
document.getElementById('myChart2'),
config2
);Pie Chart（円グラフ）
例：○○の開催についての賛否
マウスホバーまたはタップでデータの詳細が表示されます。
コード例
<canvas id="myChart3"></canvas>const labels3 = ['賛成', '反対', 'わからない'];
const data3 = {
labels: labels3,
datasets: [{
data: [64, 31, 5],
backgroundColor: [
'rgb(54, 162, 235)',
'rgb(255, 99, 132)',
'rgb(201, 203, 207)'
],
hoverOffset: 4
}]
};
const config3 = {
type: 'pie',
data: data3,
options: {
plugins: {
tooltip: {
callbacks: { // ツールチップの表示を設定
label: function(context) {
if (context.parsed.y !== null) {
return context.label + ': ' + context.parsed + '％';
}
}
}
}
}
}
};
const myChart3 = new Chart(
document.getElementById('myChart3'),
config3
);まとめ
いかがでしたか？
Chart.jsライブラリを使えば、アニメーション付きのグラフを簡単に作ることができます。
ここでご紹介したはほんの一部で、他にもグラフの種類やオプションがあるので、是非いろいろ試してみてください。
最後までご覧いただきありがとうございました。
★参考にさせていただいたサイト
