1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@mikecat_mixc

Chart.js による基本的なグラフの描画

Posted at

Chart.js | Open source HTML5 Charts for your website
を用いることで、Webページ上にグラフを描画できる。
このライブラリは、執筆時点ではMITライセンスである。

この記事では、折れ線グラフおよび棒グラフの基本的な描画方法を確認する。

ライブラリの読み込み

Installation | Chart.js

CDNを用いる

CDNの jsDelivr からライブラリのファイルを読み込むことができる。

chart.js CDN by jsDelivr - A CDN for npm and GitHub
を開くと、以下のような読み込み用の script タグが表示されるので、それをコピペすればよい。

<script src="https://cdn.jsdelivr.net/npm/chart.js@4.5.1/dist/chart.umd.min.js"></script>

Chart.js のドキュメントではCDNとして CDNJS も紹介されているが、執筆時点においてこちらから読み込める最新版は 4.5.0 であり、最新の 4.5.1 は読み込めないようである。

自前で置く

Releases · chartjs/Chart.js
からアーカイブをダウンロードする。
具体的には、使うバージョンの Assets にある chart.js-(バージョン).tgz をダウンロードする。
アーカイブには様々なファイルが入っているが、このうち package/dist/chart.umd.js のみを取り出し、script タグで参照することで、ライブラリを読み込むことができる。

基本的な使い方

グラフのサイズを決めるための要素の中に、グラフとして用いる canvas 要素を配置する。
外側の要素でサイズを指定しないと、グラフは画面いっぱいに広がろうとする。
Responsive Charts | Chart.js

<div style="width: 30em;">
  <canvas id="thecanvas"></canvas>
</div>

第1引数にこの canvas 要素、第2引数にグラフ描画用のデータオブジェクトを指定し、Chart オブジェクトを作成する。
これにより、グラフが描画される。

const canvas = document.getElementById("thecanvas");
const chart = new Chart(canvas, {
  type: /* グラフの種類 */,
  data: {
    /* グラフにするデータ */
  },
  options: {
    /* タイトルや軸などの設定 */
  },
});

点の横位置が各データ系列で共通のグラフを描画する (折れ線・棒)

  • 毎日や毎週など、一定の間隔で測定するデータ
  • 評価の観点ごとのスコアなど、そもそも時系列ではないデータ

などの描画にオススメの形式である。

data で指定するオブジェクトとして、以下の内容のものを指定する。

  • labels メンバに、横軸の値を入れた配列を指定する
  • datasets メンバに、以下のメンバを持つオブジェクトの配列を指定する
    • label：データの名前
    • data：データの値の配列

type に "line" を指定すると、折れ線グラフを描画できる。
Line Chart | Chart.js

const chart = new Chart(canvas, {
  type: "line",
  data: {
    labels: ["A", "B", "C"],
    datasets: [
      {
        label: "data 1",
        data: [20, 15, 100],
      },
      {
        label: "data 2",
        data: [50, 35, 10],
      },
    ],
  },
});

折れ線グラフの描画結果

type に "bar" を指定すると、棒グラフを描画できる。
Bar Chart | Chart.js

const chart = new Chart(canvas, {
  type: "bar",
  data: {
    /* 上のサンプルと同じ */
  },
});

棒グラフの描画結果

データ系列ごとにバラバラの横位置を用いるグラフを描画する (折れ線)

試合での得点状況など、値が変化するタイミングが決まっていないデータなどにオススメの形式である。

type に "scatter" を指定し、data で指定するオブジェクトとして、以下の内容のものを指定する。

  • datasets メンバに、以下のメンバを持つオブジェクトの配列を指定する
    • label：データの名前
    • data：データを表す以下のメンバを持つオブジェクトの配列
      • x：データの横位置
      • y：データの縦位置

"line" や "bar" で使用した labels メンバは不要である。

また、この形式のデフォルトでは線が表示されない。
options メンバ内の showLine に true を設定することで、線を表示できる。

const chart = new Chart(canvas, {
  type: "scatter",
  data: {
    datasets: [
      {
        label: "data 1",
        data: [
          {x: 0, y: 0},
          {x: 30, y: 20},
          {x: 50, y: 30},
          {x: 90, y: 80},
          {x: 100, y: 80},
        ],
      },
      {
        label: "data 2",
        data: [
          {x: 0, y: 0},
          {x: 10, y: 30},
          {x: 40, y: 50},
          {x: 100, y: 50},
        ],
      },
    ],
  },
  options: {
    showLine: true,
  },
});

chartjs-test-20260110-3.png

グラフの設定

new Chart の第2引数の渡すオブジェクトの options メンバで、以下の設定が可能である。

グラフ全体の設定

アニメーションの無効化

Animations | Chart.js

デフォルトでは、グラフはすぐに表示されず、アニメーションを経て表示される。

options での設定内容
animation: false,

を設定することで、このアニメーションをカットし、グラフをすぐに表示できるようになる。

タイトル

Title | Chart.js

以下の設定を行うことで、グラフ全体のタイトルを表示できる。

options での設定内容
plugins: {
  title: {
    display: true, // タイトルを表示させる
    text: "タイトル", // 表示させるタイトルを指定する
  },
},

複数行にする場合は、text に各行のテキストを格納した配列を指定する。

plugins を用いる複数の項目を設定する場合は、plugins メンバを複数用いる (そのようなことはできない) のではなく、1個の plugins メンバの中にそれらの項目を入れる。

凡例の位置変更・非表示

Legend | Chart.js

以下の設定を行うことで、凡例を (デフォルトの上部ではなく) グラフの右側に表示できる。

options での設定内容
plugins: {
  legend: {
    position: "right", // 凡例を表示する位置を指定する
  },
},

以下の設定を行うことで、凡例を無くすことができる。(データセットを1個だけ描画するときなどに便利)

options での設定内容
plugins: {
  legend: {
    display: false, // 凡例を表示しなくする
  },
},

1点で変化する線の使用

Line Chart | Chart.js

通常、2点の間の線は、2点をまっすぐに結ぶ線が用いられる。
stepped を設定すると、これを1点で変化する線に変更できる。
ゲームの得点など、1点で変化するデータを表すのにオススメである。

options での設定内容
stepped: "before",

以下の値を使用できる。

値 表示
"before" データ点の直前まで前のデータ点の値を用いる
"middle" データ点とデータ点の真ん中で値を切り替える
"after" データ点の直後から次のデータ点の値を用いる

stepped の設定

データオブジェクトの解釈の設定

Data structures | Chart.js

以下の設定を行うことで、データ系列の data としてオブジェクトを用い、その中の指定したメンバをグラフ化する値として用いることができる。

options での設定内容
parsing: {
  xAxisKey: "time", // 横軸の値用に用いるメンバの名前
  yAxisKey: "score", // 縦軸の値用に用いるメンバの名前
},

デフォルトでは縦軸の値のみを指定する "bar" や "line" であっても、これを用いる場合、xAxisKey を省略したり適当に設定したりすることは許されず、横軸の値が格納されたメンバを指定しなければならないようである。

ツールチップの設定

Tooltip | Chart.js

plugins.tooltip.callbacks 内の各メンバを設定することで、グラフ上のデータ点にマウスカーソルを合わせた際に表示されるツールチップの内容をカスタマイズできる。

たとえば、以下の項目を設定できる。
(設定できる項目は他にもあるので、詳しくは公式ドキュメントを参照)

メンバ名 設定する内容
title ツールチップ上部に表示するタイトル
beforeLabel ツールチップ内の各項目について、メインデータの前に表示する内容
label ツールチップ内の各項目について表示するメインデータ
afterLabel ツールチップ内の各項目について、メインデータの後に表示する内容

これらの項目には、第1引数で情報オブジェクトまたはその配列を受け取り、表示する文字列、または各行の文字列が格納された配列を返す関数を設定する。

title に設定する関数は、以下の性質がある。

  • 1個のツールチップ生成において、1回呼び出される
  • そのツールチップに載せる情報オブジェクトの配列を受け取る

beforeLabel・label・afterLabel に設定する関数は、以下の性質がある。

  • 1個のツールチップ生成において、複数回呼び出されることがある
    • ツールチップに載せる各項目について1回ずつ呼び出される
  • 今注目している情報オブジェクトを受け取る

データ点が重なっていると、1個のツールチップに複数の情報を載せることがある。

情報オブジェクトは、以下のメンバを持つ。(抜粋)

メンバ名 内容
label データ点のラベル (data.labels で設定したもの)
dataset データ点が属するデータセット (data.datasets の要素)
raw データ点が表すオブジェクト (データセット内の data の要素)

たとえば、以下のように設定する。

options での設定内容
plugins: {
  tooltip: {
    callbacks: {
      title: (dataArray) => `title of ${dataArray[0].label}`,
      beforeLabel: (data) => `before ${data.dataset.label}`,
      label: (data) => `${data.label} of ${data.dataset.label}: ${data.raw}`,
      afterLabel: (data) => `after ${data.dataset.label}`,
    },
  },
},

すると、以下のように表示される。

データが重なった点
データ1個の点

軸の設定

scales メンバ内の x メンバで横軸の設定を、y メンバで縦軸の設定を行う。

scales: {
  x: {
    /* 横軸の設定 */
  },
  y: {
    /* 縦軸の設定 */
  },
},

タイトル

Labeling Axes | Chart.js

title メンバを設定することで、軸のタイトルを表示できる。

options.scales.(軸) での設定内容
title: {
  display: true, // タイトルを表示させる
  text: "アレ", // 表示させるタイトルを指定する
},

複数行にする場合は、text に各行のテキストを格納した配列を指定する。

表示範囲

Axes | Chart.js
Linear Axis | Chart.js (beginAtZero)

min および max メンバにより、表示する最小値と最大値を指定する。
(データ点が範囲外になる場合でも、この値を使用する)

options.scales.(軸) での設定内容
min: 0, // 表示する最小値 (強制)
max: 100, // 表示する最大値 (強制)

suggestedMin および suggestedMax メンバにより、最低限表示する最小値と最大値を指定する。
(全てのデータ点が範囲内に収まるよう、範囲が必要に応じて調整される)

options.scales.(軸) での設定内容
suggestedMin: 0, // 表示する最小値 (調整可)
suggestedMax: 100, // 表示する最大値 (調整可)

beginAtZero メンバを true に設定すると、データの範囲が 0 を含まない場合に表示する最小値または最大値を 0 にする。
(表示する範囲に 0 が含まれるように調整する)

options.scales.(軸) での設定内容
beginAtZero: true,

以下は、同じデータを表示範囲の指定を変えて描画した例である。

表示範囲の指定の効果サンプル

数値に従った間隔を用いる

Axes | Chart.js

グラフの形式が "line" や "bar" のときは、デフォルトでは横軸は数値の間隔を無視し、等間隔で配置される。

等間隔で配置される横軸

options.scales.(軸) での設定内容
type: "linear",

を設定することで、数値に従った間隔での配置にできる。
なお、グラフの形式が "scatter" のときは、デフォルトでこの設定が用いられる。

数値に従って配置される横軸

ラベルの書式

Labeling Axes | Chart.js

ticks.callback を設定することで、目盛に表示する値の書式をカスタマイズできる。
第1引数として値を受け取り、それを表す文字列、または各行の文字列を格納した配列を返す関数を指定する。

たとえば、以下のようにすると、分単位の数値を「時:分」形式で表示できる。

options.scales.(軸) での設定内容
ticks: {
  callback: (v) => Math.floor(v / 60) + ':' + String(v % 60).padStart(2, "0"),
},

グラフの内容の更新

Updating Charts | Chart.js

作成済みのグラフの内容の更新は、以下の手順で行うことができる。

  1. 作成した Chart オブジェクトの data メンバ (データ) や options メンバ (設定) の内容を書き換える
    • これらのメンバの中身は、コンストラクタに渡したオブジェクトの data や options の内容に対応する
  2. update() メンバ関数を呼び出す

おわりに

今回は、Chart.js を用いた基本的な折れ線グラフと棒グラフの描き方を紹介した。
Chart.js には、今回紹介しなかった機能がたくさんある。
たとえば、

  • 今回紹介した以外のグラフの種類
  • 今回紹介した以外の軸の種類
  • グラフの種類ごとやデータ系列ごとの設定

などである。
Chart.js の詳しい使い方は、公式のドキュメントを参照してほしい。

この記事で紹介したドキュメントのリンクは、執筆時点での最新版である 4.5.1 のものとなっている。
必要に応じて新しいバージョンが出ているかをチェックし、用いるバージョンのドキュメントを参照するのがいいだろう。

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?