スタートページ＞ Javascript＞ Chart.js

Chart.jsでの数値表示プラグイン

基本的な記述法

Chart.jsでは、グラフのデータ数値表示は、グラフにマウスを乗せると数値が表示されるのを標準仕様としており、下図のようにグラフに表示させるにはプラグインが必要になります。

Chart.jsの公式ページ（ http://www.chartjs.org/samples/latest/advanced/data-labelling.html）に、そのプラグインが公開されています。
ここでは、関数をグローバル変数（dataLabelPlugin）に格納する形式に修正しました。また、設定値などを適宜変更しました。

dataLabelPluginは、棒グラフや折れ線グラフ作成のChart.jsプログラムより先に定義しておく必要があります。
そして個々のグラフ作成プログラムでは、次のように plugins: [dataLabelPlugin] を組み込むことにより、上図が表示されます。

           :
        data: {
           :
        },
        options: {
           :
        },
        plugins: [dataLabelPlugin]

プラグインの説明

ステップ１　データの数値を文字列として取り出す

データの数値は、系列ごとに配列 dataset.data[要素] に入っています。ここでは単純に toString() で文字列に変換していますが、この段階で加工を加えることができます。

ステップ２　文字列のフォントを設定する

説明の必要はないでしょう。

ステップ３　文字列の位置指定の基準点を設定する

実際に表示位置を指定するのはステップ４ですが、その位置が文字列の先頭なのは末尾なのか、文字の高さの上端か下端かを設定します。一般には中央指定（center）でしょうが、水平棒グラフなどで棒の右側に表示させるには start 指定にします。

ステップ４　表示位置を指定する

この指定は、一般的なグラフを対象とする場合は妥当な設定ですが、個々のグラフに特化した場合には、もっと適切な式があるでしょう。グラフの種類に応じた式が公開されているらしいのですが確認しておりません。実際にグラフを表示してから修正するのが単純かもしれません。
このとき、Ｙ軸方向が Chart.jsでは上向きなのに対して ctx では下向きなことに留意してください。

プラグインのカスタマイズ例

系列、要素で表示色を変えました。
　　　　　　　　　　　　　　　　　　// ステップ２　文字列の書体
　　　　if (系列 == 0) ctx.fillStyle = "red";　　　// 系列Ａ
　　　　else　　　　　 ctx.fillStyle = "blue";　　 // 系列Ｂ
　　　　if (要素 == 1) ctx.fillStyle = "green";　　// ０５年


表示位置を修正しました。
　　　　　　　　　　　　　　　　　　// ステップ３　文字列の位置の基準点
　　　　ctx.textAlign = "start";
　　　　ctx.textBaseline = 'middle';
　　　　　　　　　　　　　　　　　　// ステップ４　文字列のグラフでの位置
　　　　// var padding = 5;　　　削除
　　　　var position = element.tooltipPosition();
　　　　ctx.fillText(dataString, position.x, position.y);


人数と百分率の２つを表示しました。
　　　　　　　　　　　　　　　　　　// ステップ１　数値を文字列に変換
　　　　var 要素値 = dataset.data[要素]; 　　　　　　　　　　　　　　　　// 人数
　　　　var dataString = 要素値.toString();
　　　　var 百分率 = "(" + 100/500*要素値.toFixed(1).toString() + "%)";　// (百分率%) の形式にする
　　　　　　　　　　　　：
　　　　　　　　　　　　　　　　　　// ステップ４　文字列のグラフでの位置
　　　　ctx.fillText(dataString, position.x, position.y - fontSize/2 - padding);　// 人数の表示
　　　　ctx.fillText(百分率, position.x, position.y + fontSize/2);　　　　　　　　// 百分率の表示