Chart.jsを使ってグラフの描画
Chart.jsはJavaScriptでグラフを描画するためのライブラリです。
以前少しだけ使用したことがあったのですが、もう一度使い方をおさらいしようと思い、勉強ついでにメモ。
これから使おうと思っている方の参考になればと思います。
バージョン
- Chart.js 3.9.1
使い方
インストール
npmを使用してインストールするか、CDNを利用します。
今回はCDNで。
<head>
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>
</head>
# npmを使用する場合はこのコマンドを実行する
npm install chart.js
描画領域の準備
グラフ描画領域は、canvasタグで指定することができます。
<canvas id="chart"></canvas>
canvas要素のコンテキストを取得して、これに描画のための情報をセットしていきます。
let ctx = document.getElementById('chart');
描画に必要な要素
Chart.jsでは、type, data, optionsの3要素を指定してグラフの描画を行います。
type
typeではグラフの種類を指定します。
typeで定めた値によって、どの形でグラフが描画されるのかが決定します。
| typeの値 | グラフの種類 |
|---|---|
| line | 線グラフ |
| bar | 棒グラフ |
| radar | レーダーチャート |
| pie | 円グラフ |
| doughnut | ドーナツチャート |
| polarArea | 鶏頭図(値によって半径が異なる円グラフ) |
| bubble | バブルチャート |
| scatter | 散布図 |
data
dataではグラフに表示するラベルや、データなどの値を設定します。
dataにはさまざまなプロパティを設定することができます。
以下、プロパティの一例です。
-
labels
グラフのX軸のラベルを設定する。 -
datasets
グラフの色やデータそのものの値(配列)を設定する。
グラフを複数描画する場合はその分だけ配列の中にオブジェクトを設定する。 -
label
グラフのラベル(何のグラフであるかを示す)を設定する。 -
backgroundColor
線グラフなら点の部分、棒グラフなら棒の部分の色を設定する。 -
borderColor
線グラフなら線の部分、棒グラフなら棒の境界線の部分の色を設定する。
options
optionsではアニメーションの設定やX軸・Y軸の設定など、グラフに関するオプション設定を変更することができます。(以下は一例)
-
animation
グラフ描画時のアニメーションを設定する。-
duration
アニメーションにかかる秒数(ミリ秒) -
easing
アニメーションの種類
-
-
scales
軸に関する値を設定する。- scaleLabel
軸ラベルについて設定する。 - ticks
目盛りについて設定する。
- scaleLabel
描画してみる
今回はよく見かけるであろう線グラフ(line)と棒グラフ(bar)、そして私自身描いたことのなかった鶏頭図(polarArea)を描画してみようと思います。
線グラフ
<body>
<canvas id="lineChart"></canvas>
<script>
let lineCtx = document.getElementById("lineChart");
// 線グラフの設定
let lineConfig = {
type: 'line',
data: {
// ※labelとデータの関係は得にありません
labels: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
datasets: [{
label: 'Red',
data: [20, 35, 40, 30, 45, 35, 40],
borderColor: '#f88',
}, {
label: 'Green',
data: [20, 15, 30, 25, 30, 40, 35],
borderColor: '#484',
}, {
label: 'Blue',
data: [30, 25, 10, 5, 25, 30, 20],
borderColor: '#48f',
}],
},
options: {
scales: {
// Y軸の最大値・最小値、目盛りの範囲などを設定する
y: {
suggestedMin: 0,
suggestedMax: 60,
ticks: {
stepSize: 20,
}
}
},
},
};
let lineChart = new Chart(lineCtx, lineConfig);
</script>
</body>
(ブラウザで表示 )
棒グラフ
<body>
<canvas id="barChart"></canvas>
<script>
// 棒グラフの設定
let barCtx = document.getElementById("barChart");
let barConfig = {
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
data: [10, 19, 6, 8, 2, 11],
label: 'label',
backgroundColor: [ // それぞれの棒の色を設定(dataの数だけ)
'#ff0000',
'#0000ff',
'#ffff00',
'#008000',
'#800080',
'#ffa500',
],
borderWidth: 1,
}]
},
};
let barChart = new Chart(barCtx, barConfig);
</script>
</body>
(ブラウザで表示)
鶏頭図
<body>
<canvas id="polarChart"></canvas>
<script>
// 鶏頭図の設定
let polarCtx = document.getElementById("polarChart");
let polarConfig = {
type: 'polarArea',
data: {
labels: ['April','May','June','July','August'],
datasets: [{
label: '月別結果',
data: [7, 10, 9, 4, 5],
backgroundColor: [
'#ff0000',
'#0000ff',
'#ffff00',
'#008000',
'#ffa500',
]
}]
},
};
let polarChart = new Chart(polarCtx, polarConfig);
</script>
</body>
(ブラウザで表示)
おわり
「鶏頭図(けいとうず)」という言葉、Chart.jsを使っているときにはじめて聞きました。
https://dictionary.goo.ne.jp/word/%E9%B6%8F%E9%A0%AD%E5%9B%B3/