Chart.jsを使いこなす。

はじめに

あぁぁぁWebアプリ上にダッシュボード作りてぇぇぇという気分になったのでChart.jsを触ってみることにしました。カスタマイズも少し試してみていますので良ければ参考にしてみてください。

Chart.jsとは

「Chart.js」とはその名の通りデータを可視化する際に用いられるJavaScriptのライブラリで、Bar（棒グラフ）、Line（線グラフ）、Pie（円グラフ）、Radar（レーダーチャート）、Scatter（散布図）、Bubble（バブルチャート）等が描画可能です。

使ってみる。（基本）

描画のためのライブラリなのに文字での長ったらしい説明はうんざりですよね、なので早速グラフを作ってみましょう。今回はNext.js上での利用想定しているので、事前に以下の通り必要なライブラリをインストールしましょう。

npm i chart.js
npm i react-chartjs-2

まずは適当に用意した同じデータからBar・Line・Radarチャートを作ってみました。実際に描画できたチャートとそのコードは以下の通りです。ご覧の通り左上がBar、左下がLine、右半分がRadarです。

「一行解説」を見る

1. (l.1-2) Chart.jsを利用するために必要なモジュールをインポートします。
2. (l.3) これは必須ではありませんが、画面割りを簡易化するために今回使用しています。
3. (l.5) 通常Chart.register()内にはスケールや凡例等の必要なコンポーネントのみを登録することでパフォーマンス向上に努める方が良しとされますが、今回は面倒なので登録可能なコンポーネントを全部登録してしまいます。そのために、registerablesを使用します。なおregisterable内にはさまざまなコンポーネントが配列形式で用意されているため、「スプレッド構文」（...）を利用しないとエラーが出るのでご注意を。
4. (l.9) グラフのラベルを配列で用意しています。これはBar・LineではX軸として使われています。今回は4月-9月としました。
5. (l.10-12) Aさん-Cさんのデータを用意しました。テスト結果みたいな感じです。
6. (l.14-18) 10-12行目で用意したデータを1つにまとめてdatasetsという変数に格納します。ここでは各データに対してAさん-Cさんという名称でラベルを付与しています。9行目のlabelsとはもちろん別物なのでご注意ください。
7. (l.20-23) ここまで用意したすべての情報をまとめてfirstChartという変数に格納します。
8. (l.28-29, l.32) Bar・Line・Radarチャートを描画します。<"チャート種類" />に、それぞれのチャート種類を入力します。

（上の例のようなデータの描画にRadarを使うことに強烈な違和感を覚えるのはさておき、）Chart.jsを利用することでデータ整形さえしっかりできていれば簡単にグラフが描画できることが分かると思います。

使ってみる。（応用）

続いて応用編です。今度はオプション（options）を利用することで、より複雑なグラフを描画してみましょう。ここでは以下のことをやってみようと思います。

• 複合グラフの作成
• カラーパレットをカスタマイズ
• ツールチップのホバー設定
• データラベルの表示

複合グラフの作成

実際のグラフはBarだけLineだけというよりそれらを組み合わせたものが用いられることが多いと思います。今回はBar・Lineを組み合わせて描画します。

カラーパレットをカスタマイズ

現状のカラーパレットも良いとは思いますが、Webページ全体の構成を考えると調整したい場合もあると思うので、今回はカラースペースというツールを利用させていただきましてカラーパレットもカスタマイズしていきます。使い方は簡単で、好きな色を選んで"Generate"ボタンを押すだけです。すると画面下部に様々な色の組み合わせが生成されるのですが、今回は"Generic Gradient"というカラーパレットを利用させていただきましょう。

ツールチップのホバー設定

使ってみる。（基本）で作成したグラフでは、各プロットにカーソルを合わせないと正確な数値が出ませんがそれだと見づらいですよね。今回はそれを改善します。

データラベルの表示

グラフの各要素上にその数値を表示させます。データラベルを表示させるにはプラグインを利用する必要があるため、chartjs-plugin-datalabelsというプラグインを予めインストールしておきます。

npm install chartjs-plugin-datalabels

描画（応用）

では上記ポイントを踏まえてグラフを描画していきましょう。

「一行解説」を見る

1. (l.1-4) 上記の使ってみる。（基本）と同様に利用するモジュールをインポートします。また4行目の通り事前にインストールしておいたChartDataLabelsプラグインもインポートしておきましょう。
2. (l.6-7) 上記の使ってみる。（基本）と同様にregisterableを登録します。また、4行目でインポートしたChartDataLabelsプラグインについては7行目の通り別途登録する必要があります。
3. (l.9-16) 上記の通りツールを利用してしてカスタムカラーパレット作成に必要な色とその情報（HEX値）が揃ったので、ここではその値を配列型で入力しcolorPalette1に格納します。
4. (l.20-25) グラフ描画のための元データです。ここの説明は割愛します。
5. (l.27-33) 上記の使ってみる。（基本）と同様に21-25行目で用意したデータを1つにまとめてdatasetsという変数に格納します。labelとdataは基本と同じですが、その後に続く部分は新しく追加となったので説明します。typeではグラフの種類を指定できます。他にも"pie"というものが利用可能です。backgroundColorとborderColorはそれぞれBarとLineに指定しています。orderは必須ではないですが、重なったデータの重なり順を指定可能です。番号は低いほど前に表示されます。
6. (l.35-58) データラベルとツールチップのホバーを設定するために、オプション（options）を操作します。これにはいくつかの値を設定できますが、今回はpluginsとinteractionの内容を修正していきます。37-39行目では凡例legendの表示位置を指定しています。デフォルトでは"top"です。40-43行目ではチャートのタイトルtitleを表示させています。44-53行目ではインポートしたChartDataLabelsプラグインを利用してデータラベルdatalabelsについて指定しています。45行目ではcolorとしてラベルの色を指定します。46-47行目ではラベルの表示位置を調整しています。alignではラベルを基準点から見てどこに表示するか、anchorではその基準点をどこに置くかを設定します。それぞれcontext.dataset.typeを含む条件式を書いていますが、ここのtypeというのが28-32行目で設定しているグラフの形を参照させています。48-51行目ではラベルのフォントについて設定しています。また今回は使用していませんが、formatterというパラメータを利用するとラベル上に各ラベルに"kg"というような単位を設定することができるので便利です。続いてinteraction側の設定です。interactionではグラフに対してホバーやクリック等のマウス操作を実施した場合の挙動を設定できます。今回はツールチップのホバー設定を変更します。55行目でmodeを"index"とすることでx軸に並ぶ全データセットのデータポイントを同時にホバーすることができます。56行目でintersectをfalseとすることで、ポイントの上にカーソルがなくてもツールチップを表示させることができます。
7. (l.60-63) ここまで用意したすべての情報をまとめてsecondChartという変数に格納します。
8. (l.68) チャートを描画します。<"チャート種類" />にsecondChartを入力した上でoptionsを指定します。

まとめ

Chart.jsを使えば本格的なグラフの描画が可能なことが分かりました。またMUIでも似たようなグラフの描画が可能なようなのでいつか試してみたいと思います。