データ可視化ツールChart.js v4でWebサイトにグラフを表示する
Chart.jsの最新バージョンver4.2.1（2023年4月時点）に関する情報がネット上に少ない、かつ、公式ページで情報が探しにくいため復習を兼ねての備忘録です。基礎的な知識をまとめた記事となっています。
この記事では【 Chart.js v4 】の情報を扱っています。 Chart.js v2や Chart.js v3 とは大きく変更されている部分もあるのでお気をつけください。
目次
実装例
※ 以下サンプルでは幅・高さは固定してます。グラフの数値や名称はフィクションです。
See the Pen Chat.js v4 sample by Masayuki / ウェブ制作者 (@pazfinder) on CodePen.
以下説明です。
Chart.jsとは
JavaScriptを使用して、Webページ上にグラフやチャートを描画するためのオープンソースのグラフ描画ライブラリです。HTMLのcanvas要素を利用して、様々な種類のグラフやチャートを簡単に作成することができます。
データを視覚化することで複雑な情報を分かりやすく表現することができ、傾向やパターンを理解しやすくなります。
使い方
npmでインストール
npm install chart.jsCDNの読み込み
以下のリンクはCDNの一覧です。
https://cdnjs.com/libraries/Chart.jsモジュール化して使うのであれば
https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.2.1/chart.min.jsモジュール化されてないコードであれば
https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.2.1/chart.umd.min.jsGitHubからファイルのダウンロード
詳細は、公式をご覧ください。
公式のyoutubeチャンネルもおすすめです。
現在（2023年4月）もカスタマイズ方法を更新し続けています。
グラフの説明
HTML
<canvas id="test_bar"></canvas>グラフの描画に関しては、HTMLに<canvas>要素と、グラフ用のidを記述することで準備完了です。
CSS
<div class="data__graph">
<canvas id="test_bar"></canvas>
</div><canvas>要素にCSSが効かないので、幅や余白の調節などは<canvas>要素を囲う要素に対して、CSSを当てると効きます。（上記の場合、class名.data__graphに対してグラフの幅や余白のCSSを当てる）
詳細はこちら
JavaScript
グラフのカスタマイズは、基本的にJavaScriptで行います。
大まかな作りは以下の通りです。
const data = { 〜 省略 〜 }; // ⑦
const options = { 〜 省略 〜 }; // ⑧
new Chart( // ①
document.getElementById('test_bar'), { // ②
type: 'bar', // ③
data: data, // ④ data: に変数名 dataを入れている。
options: options, // ⑤ options: に変数名 optionsを入れている。
plugins: [] // ⑥
});① new Chart()
表示するグラフを作ります。
② idが一致する場所にグラフを表示する
document.getElementByIdで、HTMLにある<canvas>に含まれている属性のidを取得します。
③ グラフの種類
計8種類のグラフが用意されています。
[ bar, line, doughnut, pie, polarArea, radar, scatter, bubble ]
type: とそれに伴うoption一覧の詳細は公式をご覧ください
④ data:はグラフの元となる数値や名称を設定します
⑤ options:はグラフの見た目に関する設定をします
（optionsを設定しなくてもグラフを表示することは可能です）
⑥ plugins: [ ] は新しく機能を追加する際に必要な項目です
（外部ファイルのpluginを使わなければ、記述する必要はありません）
詳細は公式をご覧ください。
⑦ 変数名data の説明
グラフの元となる数値や名称を設定するのですが、グラフのtype:によって一部設定も異なってくるので、ここでは type: bar（棒グラフ）を例に説明します。
const data = {
labels: [ // ⑦ - １
'１月', '２月', '３月', '４月', '５月', '６月', '７月', '８月', '９月', '１０月', '１１月', '１２月'
],
datasets: [{ // ⑦ - ２
label: '花粉の量（個/㎠）',
data: [65, 59, 80, 81, 56, 55, 40],
barPercentage: 0.7,
backgroundColor: 'gold',
borderColor: 'gold',
}]
};data: { } の中は大きく以下に分類されています。
⑦ - １ labels: [ ] はグラフのX軸に並べられる目盛の名称です
（optionsの設定によっては、Y軸の名称にすることも可能）
⑦ - ２ datasets [ { } ] は数値と数値に関する記述をする所です
上記の通りdatasetsの中にはさらに項目があり、それぞれ
label: '数値の名称'
data: [ グラフに表す数値 ]
barPercentage: 棒グラフ個々の太さ,
backgroundColor: '棒グラフの背景色'
borderColor: '棒グラフの線の色'
となっています。
この他、多くの項目があるため詳細は公式をご覧ください
⑧ 変数名options の説明
グラフの見た目に関する設定です。
const options = {
responsive: true, // ⑧ - １
maintainAspectRatio: false, // ⑧ - ２
// indexAxis: 'y', // ⑧ - ３
layout: { 〜 省略 〜 }, // ⑧ - ４
animations: { 〜 省略 〜 } // ⑧ - ５
plugins: { 〜 省略 〜 }, // ⑧ - ６
scales: { // ⑧ - ７
x: { 〜 省略 〜 },
y: { 〜 省略 〜 },
},
};options: { } の中は大きく以下に分類されています。（使用率高そうな項目を抜粋しました）
⑧ - １ responsive: はレスポンシブに対応するかどうか
⑧ - ２ maintainAspectRatio: はサイズ変更時に縦横比を維持するかどうか
⑧ - ３ indexAxis: は基本軸を変更します
初期値はx軸で、data: にあるlabelsもx軸に表示されますが、y軸に変更することでlabelsもy軸に並びます。
⑧ - ４ layout: { } は<canvas>要素の余白（padding）を管理します
<canvas>要素にCSSが効かないので、その対処といった具合（でも、paddingのみしか…）
⑧ - ５ animations: { }はグラフに動きをつけることが可能です
詳細は以下の公式をご覧ください。
⑧ - ６ plugins: { } はグラフの表示に関する設定を行なえます
例えばグラフのタイトル・サブタイトル、凡例と言われる数値の名称（ data: { datasets: [{ laebl: '花粉の量' }] }）の表示、tooltip: というグラフをマウスホバーした際の表示方法など。
詳細は以下の公式をご覧ください。
⑧ - ７ scales: { x:{ }, y:{ } } は軸の表示に関する設定を行なえます
例えば目盛（ ticks: ）の最大値・最小値を決めたり、軸線（ border: ）グリッド線（ grid: ）、積み上げグラフ（ stacked: ）の設定などもできます。
詳細は以下の公式をご覧ください。
optionsは多くの項目があるため詳細は公式をご覧ください。
まとめ
Chart.js v4の基礎的な説明は出来たと思います。
今後はカスタマイズしたグラフのサンプルなど上げていければと思います。
お役に立てれば幸いです。
