Chart.js 3.9.1

1. HTMLの記法

2. シンプルな棒グラフ

3. グラフの大きさについて

4. 棒グラフの色と太さを変える

5. タイトル、X軸、Y軸の設定

6. 余白の設定

7. 折れ線グラフを作成する

8. 円グラフを作成する

scriptタグで Chart.jsファイルを参照する。本例では、ドキュメントルートの下の node_modulesに Chart.jsがインストールされている。参照するファイルは、dist/chart.js である。canvasタグを記述する。JavaScriptの記述により作成されるグラフはこの位置に描画される。

必要最小限の記述でシンプルな棒グラフを作成する。

キャンバスの二次元描画コンテキストを元に Chartクラスのオブジェクトを作成し、そのプロパティに、表示データやグラフの属性を設定していく。

typeプロパティには、グラフの種類を指定する。'bar'は棒グラフで、他に 'line' 折れ線グラフ、'pie' 円グラフがある。

labelsプロパティには、X軸の見出しになる "1月"〜"12月"の 12個の要素を持った配列を指定する。

datasetsプロパティには、labelプロパティと dataプロパティをメンバに持ったオブジェクトの配列を設定する。dataプロパティには、各グラフ要素の値を配列として格納する。配列の要素は、labelプロパティの要素に対応している。ここでは、1月から12月の各月の売り上げ金額を設定している。labelプロパティはデータの凡例に表示される。

labelsプロパティと、datasetsの dataプロパティはグラフ作成の上で最も重要な２つのプロパティである。本例ではこの組み合わせは１つであるが、ここに複数の組み合わせを指定すれば、後述する「複数の要素を持つ棒グラフ」を作成することができる。

デフォルトでは、グラフは、表示時のウインドウに収まる大きさに自動的に調整され表示される。このサイズは固定で、そのあとウインドウの大きさを変えてもグラフの大きさは変化しない。

グラフの大きさをウインドウの大きさの変化に合わせて自動的に伸縮させるには、canvasタグを ブロック要素（divタグ）で囲み、canvasの position属性を absoluteに、ブロック要素を relativeにする。

（注）positionプロパティは CSSで指定しても有効にならないので、タグの要素に書かないといけないようだ。

自動的に伸縮するグラフ  ソースコード

一方、グラフの大きさを指定したサイズで固定したい場合もある。実際このような表示の仕方が好まれるケースは多い。 設定方法は canvas要素を囲む divタグの width属性にグラフの横幅をピクセル単位で設定する。

高さは、JavaScriptにおいて Chartオブジェクトのプロパティに定義する。描画コンテキストから canvasプロパティを取得し、widthと Heightに、グラフを描画する矩形サイズの縦横比を措定する。この例では縦横比に 100:60 を指定したので、700ピクセルの幅に対して高さは 420ピクセルになる。 あくまで比率なので、4:3 でも結果は同じである。

大きさを固定したグラフ  ソースコード

デフォルトでは棒グラフの色は薄いグレーで非常に見づらい。ここでは棒グラフの色と太さを設定してみる。

棒グラフの色は backgroundColorプロパティに指定する。

backgroundColorプロパティを配列にすると要素ごとに色を変えることができる。色の指定が要素数に満たない場合、残りは指定した色が繰り返される。

要素ごとに色を変えたグラフ  ソースコード

棒の太さは barPercentageプロパティを指定するのが良いだろう。これは、棒の太さを「割合」で示すもので、グラフの横幅と要素(棒)の数から、1要素あたりの幅を求め、棒の太さとその幅の比率を指定するものである。値は 0〜1 の範囲で指定する。1に近づくほど棒は太くなり、1で各棒グラフの隙間がなくなる。 要素の数が変わったときでも、自動的に間隔を調整してくれる。

barThicknessプロパティにより太さを定数で指定することもできるが、要素の数が変わったの調整が面倒である。

optionプロパティの設定によってグラフの外観を変更することができる。対象はの３領域である。

① グラフのタイトルと凡例

② X軸方向の目盛り（最大値/最小値、刻み値の幅、見出しなど）

③ Y軸方向の目盛り（同上）

かなりの種類のオプションがあるが、代表的なものだけ取り上げる。

① グラフのタイトルと凡例

グラフのタイトルを表示する。凡例の見出しのフォントサイズを変える。

② X軸方向の目盛（最大値/最小値、刻み値の幅、見出しなど）

scales.xプロパティに記述する。titleプロパティは x軸のタイトル、ticksプロパティは x軸のラベルの属性、gridプロパティは境界線や補助線の属性を定義する。

③ Y軸方向の目盛（最大値/最小値、刻み値の幅、見出しなど）

Y軸方向の目盛りは scales.yプロパティに記述する。

maxプロパティは y軸の値の最大値、minプロパティは最大値を指定する。省略すると maxは要素の最大値が収まる程度、minはゼロとなる。

値にマイナス値を指定することもできる。グラフは 0を起点に下向きに伸びる。

マイナス値を表示するグラフ  ソースコード

titleプロパティには y軸のタイトルを指定する。ticksプロパティはラベルを定義する。stepSizeプロパティは、ラベルの刻み幅を指定する。本例では、値 10ごとにラベルを表示する。デフォルトのラベル名は各要素の値となるが、callbackプロパティに無名関数を定義すれば、戻り値をラベル名にすることができる。引数valueには各要素の値が渡ってくる。ここでは値の後ろに金額の単位 "万円" を付与している。

gridプロパティは境界線や補助線を定義する。

グラフの余白は optionプロパティの paddingを指定することにより設定することができる。余白を追加することによって、グラフの縦横比が変わってくるので、グラフの大きさを固定している場合、コンテキストの canvasプロパティ（width/height）を調整する必要があるかもしれない。

typeプロパティを 'line' に変える。折れ線や各点の属性は、独自のプロパティで変更する。

typeプロパティを'pie'にする。円グラフの場合、各要素の色を分けないと、ラベルと要素の対応（何月の金額がどれなのか？）がわからない。backgroundColoプロパティを配列にして、各月毎の要素の色を個別に指定している。