Tweet

Pocket

Chart.jsでグラフを描画した際に、グラフにカーソルを載せることで表示される詳細情報（ツールチップ）をパーセント表示にする方法です。

ネット上では幾つかサンプルが見つかるのですが、グラフの一部分のみパーセント表示にする方法が多く、目的とする操作ができなかったので備忘のため記事を残します。

パーセント表示にするために全体の合計値を取っている箇所（変数totalValue）の算出方法が見つからずに苦労しました。

optionsで設定しているcallbacksの中で、引数のtooltipItemとdataに対して、data.dataset[番号].data[tooltipItem.index]としている部分です。

var options = {
    省略
    tooltips: {
        callbacks: {
            label: function (tooltipItem, data){
                var totalValue = 0;
                /* データセットの数だけ繰り返し */
                for (var i = 0; i < data.datasets.length; i++) {
                     /* 数値型でデータの数だけ加算してゆくことで合計値を取る */
                     totalValue += Number(data.datasets[i].data[tooltipItem.index]);
                }
                /* 説明のラベル：％表示（小数点下２桁）：％にする前の値 */
                return data.datasets[tooltipItem.datasetIndex].label
                + ": "
                + (data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index] / totalValue * 100).toFixed(2)
                + " % : "
                + data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
            }
        }
    }
};

以上。

Tweet

Pocket