Chart.jsのパイチャートで、データ割合をパーセント表示する方法！

Chart.jsのパイチャートやドーナッツチャートで、データ割合をパーセント表示する方法を紹介します。

方法

次のような流れで、パーセント表示を行います。

1. データの合計値を求めます
2. データ値を合計値で割ってデータ割合を求めます
3. ラベルとしてパイ中に表示します

データの合計値を求める

まず、データの合計値は、次のようにデータセットごとに求めます。

chart.data.datasets.forEach(function (dataset, i) {
    var dataSum = 0;
    dataset.data.forEach(function (element){
        dataSum += element;
    });
});

data配列を、forEachで回して総和を求めています。

データ割合を求める

次に、パーセント表示に使うデータ割合は、次のように求めます。

(Math.round(dataset.data[index] / dataSum * 100 * 10)/10).toString() + "%";

そのまま、float値をtoString()にかけると、”12.3456789″などと、小数点以下の桁数が多くなってしまうので、適宜Math.round()で丸めます。

上の例では、10倍したものを丸めてから10で割ることにより、12.3% などと小数点以下1桁まで表示するようにしています。

パイ中にラベルを表示する

パイ中にラベルを表示するには、プラグインを使用します。具体的な方法は次の記事で詳しく解説していますので参考にしてください。

Chart.jsで、ラベルやデータ値を常に表示する方法。パイチャートで便利！

例

この一連の作業を行うと、次のようにパイ中にパーセント割合をラベル表示することができます。

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.min.js"></script>
<div class="chart-container" style="position: relative; height:50vh; width:80vw">
<canvas id="myChart"></canvas>
</div>
<script>
                    var dataLabelPlugin = {
                        afterDatasetsDraw: function (chart, easing) {
                            // To only draw at the end of animation, check for easing === 1
                            var ctx = chart.ctx;

                            chart.data.datasets.forEach(function (dataset, i) {
                                var dataSum = 0;
                                dataset.data.forEach(function (element){
                                    dataSum += element;
                                });

                                var meta = chart.getDatasetMeta(i);
                                if (!meta.hidden) {
                                    meta.data.forEach(function (element, index) {
                                        // Draw the text in black, with the specified font
                                        ctx.fillStyle = 'rgb(255, 255, 255)';

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

                                        // Just naively convert to string for now
                                        var labelString = chart.data.labels[index];
                                        var dataString = (Math.round(dataset.data[index] / dataSum * 1000)/10).toString() + "%";

                                        // Make sure alignment settings are correct
                                        ctx.textAlign = 'center';
                                        ctx.textBaseline = 'middle';

                                        var padding = 5;
                                        var position = element.tooltipPosition();
                                        ctx.fillText(labelString, position.x, position.y - (fontSize / 2) - padding);
                                        ctx.fillText(dataString, position.x, position.y + (fontSize / 2) - padding);
                                    });
                                }
                            });
                        }
                    };
                   
                    // Chart
                    var myChart = "myChart";
                    var chart = new Chart(myChart, {
                        type: 'pie',
                        data: {
                            labels: ["A", "B", "C", "D", "E", "F", "G"],
                            datasets: [{
                                label: "Sample",
                                backgroundColor: ["#3F51B5", "#F44336", "#FF9800", "#4CAF50", "#9C27B0", "#00BCD4", "#E91E63"],
                                data: [128, 120, 46, 82, 67, 46, 16],
                            }]
                        },
                        options: {
                            title: {
                                display: true,
                                text: "Sample"
                            },
                            legend:{
                            },
                            maintainAspectRatio: false,
                        },
                        plugins: [dataLabelPlugin],
                    });
</script>

まとめ

このようにChart.jsでもgoogle chart APIのようにパイチャート中にパーセント表示を行う事ができます。

是非試してみてくださいね。

以上、Chart.jsのパイチャートで、データ割合をパーセント表示する方法！でした。