chart.jsで描いた円グラフにラベルと値を表示する方法 | IT工房｜AI入門とWeb開発

chart.jsを使うと簡単にグラフが描けます。

ところで、どういうわけかグラフ上にラベルの表示ができないようになっています。

デフォルトの円グラフ

ラベルと値を追加した円グラフ

ラベルと値を追加するにはプラグインを使います。プラグインはどこからか持ってくるのではなく、自分で作成します。
プラグインは、チャートのデフォルト動作をカスタマイズまたは変更する方法です。 この機能はバージョン 2.1.0 (グローバルプラグインのみ)で導入され、バージョン 2.5.0 (グラフごとのプラグインとオプション)で拡張されました.

参考ページ

今回円グラフにプラグインを付けますのでchart.jsのバージョンは2.5.0以上のものを用意します。

サンプルページ：ブラウザ別シェアの円グラフ　

参考コード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Chart</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.bundle.min.js"></script>
</head>
<body>
<canvas id="myChart"></canvas>
</body>
</html>

JavaScriptコード

var myChart = document.getElementById("myChart").getContext('2d');
var dataLabelPlugin = {
    afterDatasetsDraw: function (chart, easing) {
        var ctx = chart.ctx;
        chart.data.datasets.forEach(function (dataset, i) {
            var meta = chart.getDatasetMeta(i);
            if (!meta.hidden) {
                meta.data.forEach(function (element, index) {
                    ctx.fillStyle = 'rgb(255, 255, 255)';

                    var fontSize = 16;
                    var fontStyle = 'normal';
                    var fontFamily = 'Helvetica Neue';
                    ctx.font = Chart.helpers.fontString(fontSize, fontStyle, fontFamily);

                    var dataString = chart.data.labels[index]+' : '+dataset.data[index].toString();

                    ctx.textAlign = 'center';
                    ctx.textBaseline = 'middle';

                    var padding = 5;
                    var position = element.tooltipPosition();
                    ctx.fillText(dataString, position.x, position.y - (fontSize / 2) - padding);
                })
            }
        })
    }
}


var chart = new Chart(myChart, {
  type: 'pie',
  data: {
    labels: ["Chrome69", "IE11", "Chrome70", "Firefox62", "Edge17", "Chrome/Android", "Safari12"],
    datasets: [{
      backgroundColor: [
        "#E60012",
        "#F39800",
        "#FFF100",
        "#009944",
        "#0068B7",
        "#1D2088",
        "#920783"
      ],
      data: [36.5, 16.2, 6.6, 6.4, 6.4, 5.3, 4.1]
    }]
  },
    options: {
  		title: {
    	display: true,
    	text: 'ブラウザ別シェア（日本）2018・10'
  		}
	},
    plugins: [dataLabelPlugin],
});