Chart.js 3.9.1 / 4.4.1

JvavaScriptのライブラリーである Chart.jsを利用すれば、簡単な方法でブラウザにグラフを表示することができる。作成できる主なグラフの種類は、二次元の棒グラフ、折れ線グラフと円グラフである。

大まかな手順は、Chartクラスのオブジェクトを作成し、プロパティに値を設定するというものである。主要なプロパティは、グラフの種類を指定するtypeプロパティ、グラフに表示する元データを設定するdataプロパティと グラフの外観を規定する optionsプロパティである。

オブジェクトを作成した時点で即グラフが表示される。グラフを再表示するときは、オブジェクトを再作成するか、または、データを更新して Chartオブジェクトの updateメソッドを実行する。

棒グラフや折れ線グラフは、同じ意味を持った複数の値が、X軸または Y軸に沿って並んだものである。グラフの二大構成要素は、値とラベルである。

例えば、1年間の月ごとの売り上げデータを表示するグラフでは1月から12月のそれぞれの月の売り上げ金額が「値」、"1月", "2月",..."12月"という値を識別する 12個の文字列が「ラベル」ということになる。

dataプロパティの設定方法

labelsプロパティにラベル名の配列を、datasetsプロパティの dataプロパティに値の配列を設定する。labelプロパティは値の凡例に表示される。

datasetsプロパティに複数のオブジェクトを指定すると、各ラベルに複数の値を表示することができる。また、これを応用して積み上げ棒グラフを作成することができる。

以上が Chart.jsでグラフを作成するときの必要最小限のコーディングである。これさえできていれば、一応グラフは表示できる。

あと行うことは、グラフの見せ方（グラフの種類、棒や折れ線の色、タイトル、凡例、値の最大値と最小値、軸目盛りの刻み幅や値、文字のフォントやサイズ、補助線の指定など）を定義するだけである。これらは主に optionsプロパティの設定により行う。

Chart.js では、ツールチップがデフォルトの機能として実装されている。何もコードを追加しなくても、ラベルと値を表示したツールチップが自動的に表示される。optionsプロパティの設定により細かいカスタマイズが可能である。

Chart.js では実績のある多くのプラグインを利用することができる。これらは　npmインストール、または、GitHubからダウンロードして入手する。また、カスタムプラグインを自前で作成することもできる。