はじめに
「Chart.jsでグラフを表示できたけれど、棒グラフや円グラフに数値のラベルを表示するにはどうすればいいの？」「Datalabels Pluginを使いたいけれど、CDNから何を読み込めば正しく動くの？」と迷っていませんか。
Chart.jsをCDNで読み込んでグラフを作成していても、Datalabels Pluginの読み込み方や設定する場所が分からないと、ラベルが表示されず原因を探すのに時間がかかります。
この記事では、CDNからChart.jsとDatalabels Pluginを読み込む方法、プラグインを登録する方法、グラフに数値ラベルを表示する設定まで順を追って説明していきます。
chartjs-plugin-datalabelsをCDNで読み込む方法は？
chartjs-plugin-datalabelsをCDNから利用するには、まずChart.js本体とプラグインの両方を読み込む必要があります。
ここでは、Chart.js本体とchartjs-plugin-datalabelsをCDNで読み込む方法から、正しい読み込み順まで順を追って説明します。
Chart.js本体をCDNで読み込む
Chart.js本体は、script要素のsrc属性にCDNのURLを指定して読み込みます。
jsDelivrなどを利用し、使用するChart.jsのバージョンをURLに含めておくと管理しやすくなります。
chartjs-plugin-datalabelsをCDNで読み込む
データラベルを表示するには、Chart.jsとは別にchartjs-plugin-datalabelsをCDNから読み込みます。
script要素にプラグインのURLとバージョンを指定すれば、グラフ上にデータラベルを表示する機能を利用できます。
Chart.js本体より後にDatalabelsを読み込む
読み込む順番は、Chart.js本体を先にして、その後にDatalabelsを配置します。
順番が逆になると正常に動作しない場合があるため、Chart.jsのscript要素の直後にDatalabelsを記述しておくと安心です。
CDNで読み込んだDatalabelsをChart.jsで使う方法
CDNで読み込んだchartjs-plugin-datalabelsをChart.jsで使うには、プラグインとして登録したうえで、ラベルの表示位置や内容を設定します。
ここでは、プラグインの登録方法から各設定項目の使い方、CDNで読み込んだDatalabelsを表示する最小コード例まで順を追って説明します。
ChartDataLabelsをプラグインとして登録する
CDNから読み込んだchartjs-plugin-datalabelsは、Chart.jsのプラグインとして登録して使用します。
JavaScriptでChart.register(ChartDataLabels)を記述するとoptions.plugins.datalabelsからラベルの表示を設定できるようになります。
formatter・anchor・alignでラベルの表示を設定する
ラベルの内容はformatter、配置する基準位置はanchorそこからの方向はalignで設定します。
表示する文字列や位置を調整できるため、グラフに合わせて見やすい場所へラベルを配置できます。
CDNからラベルを表示する最小コード例
基本的な流れは、Chart.jsとDatalabelsをCDNから読み込みChartDataLabelsを登録してからグラフを生成します。
options.plugins.datalabelsでformatterやanchoralignを指定すれば、グラフ上にデータラベルを表示できます。
Datalabelsが表示されないときの確認ポイント
Datalabelsを読み込んだはずなのにグラフ上へラベルが表示されない場合は、CDNの読み込み順やプラグインの登録状態を確認する必要があります。
ここでは、読み込み順、ChartDataLabelsの登録、使用しているバージョンの3点に分けて確認方法を説明します。
CDNの読み込み順を確認する
HTML内では、Chart.jsがchartjs-plugin-datalabelsより先に読み込まれているか確認します。
順番が逆になると正常に動作しない場合があるため、Chart.jsの直後にDatalabelsのscript要素を配置しましょう。
ChartDataLabelsが登録されているか確認する
Datalabelsを読み込んだだけではなく、Chart.register(ChartDataLabels)を記述しているか確認します。
プラグインが登録されていないと、設定に問題がなくてもデータラベルが表示されません。
Chart.jsとDatalabelsのバージョンを確認する
Chart.jsとDatalabelsのバージョンが対応しているかも確認しておきましょう。
CDNのURLに指定したバージョンを確認し、組み合わせに問題がある場合は対応するバージョンへそろえてから再度表示します。
バージョンを確認してもラベルが表示されない場合は、ブラウザの開発者ツールでJavaScriptエラーが出ていないか確認すると、原因を絞り込みやすくなります。
▶JavaScriptのエラーを確認する方法｜開発者ツールで原因を調べる手順
まとめ
CDNでChart.jsのDatalabels Pluginを使うときは、Chart.js本体、Datalabelsの順に読み込み、ChartDataLabelsを登録してからラベルの表示を設定します。
ラベルが表示されない場合も、読み込み順やプラグインの登録、バージョンを一つずつ確認すると原因を見つけやすくなります。
まずは基本的な設定でラベルが表示されることを確認してから、formatterやanchor、alignを使って見やすい表示に整えていきましょう。
