chart.jsの導入・使い方
HTMLでグラフを作るとき、画像を載せたりするときもあるかと思います。
そんな時はchart.jsを使うことをおすすめします。
chart.jsというライブラリはグラフをwebサイトに表示させる時に使用されます。
今回はchart.jsの導入方法、使用方法を解説しようと思います
chart.js 導入方法
導入方法は
- CDNを使用したインストール方法
- npmを使用したインストール方法
の二つがあります。
CDNを使用したインストール方法
まずCDNを使用したインストール方法を紹介します。
head内に下のコードを記載します。
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>
これだけでCDNでのchart.jsのインストールは完了です。
npmを使用したインストール方法
次にnpmを使用したインストール方法を紹介します。
npmでダウンロードする場合、ターミナルに下のコードを記載します。
npm install chart.js
これでファイルにchart.jsがインストールされました。
次に本題のグラフを描画するために必要な要素を紹介します。
必要な要素
chart.jsでは、type,data,optionsの3つの要素を指定してグラフの描画をします。
type
type要素ではグラフの種類を指定します。
下のグラフはtypeで設定できるグラフの内容です
| type | グラフの種類 |
| line | 線グラフ |
| bar | 棒グラフ |
| radar | レーダーチャート |
| pie | 円グラフ |
| doughnut | ドーナツチャート |
| polarArea | 鶏頭図 |
| bubble | バブルチャート |
| scatter | 散布図 |
data
data要素ではグラフのラベルや、値を指定します。
dataはさまざまな設定をすることができます。
下のグラフはdataで設定できるグラフの内容です
| data | グラフの設定内容 |
| labels | データの軸のラベル |
| datasets | データセット |
datasetsではlabel、data、borderColor、backgroundColorを設定できます。
下のグラフはdatasetsで設定できるグラフの内容です
| datasets | グラフの設定内容 |
| label | データのラベル |
| data | データの値 |
| borderColor | 線の色 |
| backgroundColor | 線の下の塗りつぶしの色 |
options
optionsではアニメーションやX軸・Y軸の設定など、グラフの設定を変更することができます。
下のグラフはoptionsで設定できるグラフの内容です
| optionsw | グラフの設定内容 |
| title | グラフのタイトル |
| scales | グラフ軸の詳細 |
scalesで目盛線について設定したいときは、ticksを使用します。
ticksではsuggestedMax,suggestedMin,stepSize,callbackを設定できます。
下のグラフはticksで設定できるグラフの内容です。
| ticks | 目盛の設定内容 |
| suggestedMax | 軸の最大値 |
| suggestedMin | 軸の最小値 |
| stepSize | 軸の刻み幅 |
| callback | 軸のラベル |
この要素を使えば自分の好きなグラフができると思います。
chart.jsの使い方
chart.jsの使い方を説明します。今回はCDNを利用したやり方で説明したいと思います。
デモと一緒に進めていきます。
まずhead内に下のコードを記載します。
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>
次に body内にグラフを表示させるためのcanvasタグを指定します。
<canvas id="graph"></canvas>
このcanvasタグのidを取得するためにscriptにしたのコードを記載します。
let graph = document.getElementById('graph');これで下準備は完了です。
次に実際にグラフを制作していきたいと思います。
今回は例として線グラフを制作していきたいと思います。
参考として2023年の岐阜県の平均気温の月平均値をグラフにしたいと思います。
したのコードがグラフのコードになります。
<!DOCTYPE html>
<html>
<head>
<title>Chart.js 円グラフデモ</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>
<meta charset="utf-8">
</head>
<body>
<canvas id="graph"></canvas>
<script>
let graph = document.getElementById("graph");
// 線グラフの設定
let lineset = {
type: 'line', // グラフの種類の設定
data: {
labels: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'], //データの軸のラベル
datasets: [{
label: '岐阜県', //データのラベル
data: [5.0, 6.4, 12.5, 15.7, 20.1, 23.8, 28.8, 29.6, 27.3, 18.2, 13.4, 8.1], //データの値
borderColor: '#f88', //線の色
backgroundColor: '#f00' //線の下の塗りつぶしの色
}],
},
options: {
title: {
display: true,
text: '2023年の岐阜県の平均気温の月平均値' //グラフのタイトル
},
scales: {
// Y軸の最大値・最小値、目盛りの範囲などを設定する
y: {
ticks: {
stepSize: 5, //y軸の目盛幅
suggestedMin: 0, //y軸の最小値
suggestedMax: 35 //y軸の最大値
}
}
},
},
};
let line = new Chart(graph, lineset);
</script>
</body>
</html>この様なコードになりました。
こちらを実行すると
この様に簡単にグラフが作ることができます。
今回最小値が0、最大値が35で設定をして目盛幅が5になる様にしましたが、0〜5℃と30~35℃のデータがなかったので表示されない様になっています。
まとめ
今回は簡単にグラフを作ることができる chart.js というライブラリを紹介しました。
webサイトを制作していて実際にグラフを使ったりすることは多いと思うのでかなり便利だと思います。
また、紹介した線グラフ以外にもたくさんのグラフが作れるので活用してみてはいかがでしょうか。
