Chart.jsでの数値表示プラグイン<Chart.js<Javascript<木暮仁

スタートページJavascriptChart.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]

プラグインの説明

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

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

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

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

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

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

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

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

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

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


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


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