2023.11.02

【お役立ち情報】Chart.jsのご紹介

お役立ち情報

はじめに

こんにちは、株式会社エヌ・エイ・シー　システムインテグレーション事業部です。
今回はchart.jsについてご紹介いたします。

chart.jsとは?

chart.jsとは、JavaScriptでグラフを描画するためのライブラリです。
MITライセンスで、商用・私用を問わず無償で利用可能です。

実装方法

まずは、基本的なグラフの実装方法を見ていきたいと思います。

インストール

CDNを利用する場合は、ライブラリを提供しているサイトにアクセスし、対象のバージョンと形式を選択して、表示されたscriptタグを記述します。
jsDelivrの場合はこちらをクリックしてください。
例として、jsDelivrの最新のバージョンの場合はこちらになります。
スクリプトタグのイメージ

npmを利用する場合は、下記のコマンドの実行により、インストールができます。
npmの場合のイメージ

※以降は、最新のバージョンでCDNを利用する方法をご紹介します。

描画領域の指定

グラフを設置したい領域に、canvasタグを記述します。
キャンバスタグ

script

scriptタグに以下を追加します。

1.canvasの要素の取得

要素の取得

2.取得した要素に関してのグラフの設定

new chart()により、設定を行います。
要素の設定

以上の設定を行い、親コンテナを用いてサイズ等の調整を行うと・・・

初期グラフ画面のイメージ

棒グラフが表示されました。

各設定項目

次に、new chart()の内部にある各設定項目を、type、data、optionsごとに見ていきたいと思います。

■type

まずは、typeです。
typeでは、グラフの種類を設定できます。
設定できるグラフの種類は、下記の通りとなります。

1.棒グラフ

コード：棒グラフのコード
棒グラフ画面のイメージ

2.折れ線グラフ

コード：折れ線グラフのコード
折れ線グラフ画面のイメージ

3.レーダーチャート

コード：レーダーチャートのコード
レーダーチャートのイメージ

4.円グラフ

コード：円グラフのコード
円グラフのイメージ

5.ドーナツチャート

コード：ドーナツチャートのコード
ドーナツチャートのイメージ

6.鶏頭図

コード：鶏頭図のコード
鶏頭図のイメージ

7.バブルチャート

コード：バブルチャートのコード
バブルチャートのイメージ

8.散布図

コード：散布図のコード
散布図のイメージ

■data

次は、dataです。
dataでは、実際に表示するデータの内容を設定できます。
最初に表示した棒グラフを例として、項目を一つ追加してみましょう。

初期グラフ画面のイメージ

labels

各項目のラベルを配列で指定します。今回は、「F級」を追加してみます。

ラベル追加

datasets

各項目のデータを追加します。設定内容の一例は下記の通りとなります。

label	データ全体の項目の名称を指定します。
data	データの内容を指定します。
backgroundColor	グラフの内部や点の色を指定します。
borderColor	グラフの境界線や線の色を指定します。
xAxisID	該当データセットのx軸のスケールIDです。
yAxisID	該当データセットのy軸のスケールIDです。

※xAxisIDとyAxisIDは、後述のoptionsで設定するために使用します。

今回は、データに「F級」の人数である、「1人」を黒色で追加します。

データ追加

以上の設定を行うと、「F級」の項目を追加することができました。

項目追加のグラフ

なお、datasetsは複数の記述が可能であり、2種類のデータを比較したグラフを作成することができます。

複数グラフ変更
複数のグラフ

また、片方のデータセットを違うtypeに指定すると、別の種類の複合グラフを作成することができます。

複合グラフ変更

■options

最後は、optionsです。
optionsでは、グラフのオプションを設定できます。
設定できる内容は数多くありますが、今回はその一部をご紹介します。

下記画像は、オプションを何も設定していない状態の棒グラフです。
各オプションについて、こちらの棒グラフに変更を加えながらご紹介します。

棒グラフ画面のイメージ

1.scales

スケールに関する設定を行います。x軸、y軸、バブルチャートの円などの半径、datasetsに設定したxAxisID、yAxisIDに設定できます。

1-1.grid

軸線や目盛り線に関する設定を行うことができます。設定内容の一例は下記の通りとなります。

drawBorder,borderColor,borderWidth	(左から)軸線の表示の可否、色、太さを設定します。
display,color,lineWidth	(左から)目盛線とグリッド線両方の表示の可否、色、太さを設定します。

試しに、グリッド線と目盛線を、x軸は非表示にして、y軸は線の色や太さを変更してみましょう。

軸オプション変更
軸オプション変更のイメージ

1-2.title

軸ごとのグラフのタイトルを設定できます。設定内容の一例は下記の通りとなります。
主に、棒グラフや折れ線グラフなどの直交しているグラフで使用することができます。

display	タイトルの表示の可否を設定します。
text	タイトルの内容を設定します。
align	タイトルの開始位置を設定します。
color	タイトルの色を設定します。
font	{}で囲って、タイトルのフォントのサイズ等を設定します。
padding	タイトルとグラフの軸のパディングを設定します。

試しに、x軸とy軸のそれぞれにタイトルを表示して、y軸のタイトルを上部に寄せてみましょう。

タイトルオプション変更
タイトルオプション変更のイメージ

1-3.ticks

目盛や目盛ラベルの詳細に関する設定を行うことができます。設定内容の一例は下記の通りとなります。

stepSize	目盛のステップ幅を設定します。
color	目盛ラベルの色を設定します。
font	目盛ラベルのフォントサイズを設定します。
padding	目盛ラベルとグラフの軸のパディングを設定します。

試しに、y軸のみ、目盛のカウントを1ずつにして、目盛の色とサイズを変更してみましょう。

軸オプション変更
軸オプション変更のイメージ

1-4.pointLabels

主にレーダーチャートなどのラベル(以下ポイントラベル)の設定を行うことができます。設定内容の一例は下記の通りとなります。

display	ポイントラベルの表示の可否を設定します。
backdropColor	ポイントラベルの背景色を設定します。
backdropColor	ポイントラベルの背景のパディングを設定します。
color	ポイントラベルの色を設定します。
font	{}で囲って、ポイントラベルのフォントのサイズ等を設定します。
padding	ポイントラベルとグラフの軸のパディングを設定します。

先ほどのレーダーチャートに、ポイントラベルの背景色やフォントサイズを設定してみましょう。

ポイントラベル変更
ポイントラベル変更のイメージ

1-5.その他

軸のブロックに直接記述を行うことができます。設定内容の一例は下記の通りとなります。

min	目盛の最小値を設定します。
max	目盛の最大値を設定します。
reverse	目盛の並び方の反転の可否を設定します。
beginAtZero	目盛の開始位置を0にするかどうかを設定します。

2.plugins

プラグインに関する設定を行います。今回は、凡例とグラフ全体のタイトルをご紹介します。

2-1.legend

凡例の設定を行うことができます。設定内容の一例は下記の通りとなります。

display	凡例の表示の可否を設定します。
position,align	凡例の表示位置を設定します。
maxHeight	凡例の高さを設定します。
maxWidth	凡例の幅を設定します。
title	凡例のタイトルを設定します。先ほどの1-2に記載の設定内容が使用できます。