ChartJS：datalabels：显示饼图的百分比值

Question

我有一个带有四个标签的饼图：

 var data = [{
    data: [50, 55, 60, 33],
    labels: ["India", "China", "US", "Canada"],
    backgroundColor: [
        "#4b77a9",
        "#5f255f",
        "#d21243",
        "#B27200"
    ],
    borderColor: "#fff"
}];

使用 chartjs-plugin-datalabels 插件，我想用下面的代码在每个 Pie 块中显示百分比值：

 formatter: (value, ctx) => {

        let datasets = ctx.chart.data.datasets;

        if (datasets.indexOf(ctx.dataset) === datasets.length - 1) {
            let sum = 0;
            datasets.map(dataset => {
                sum += dataset.data[ctx.dataIndex];
            });
            let percentage = Math.round((value / sum) * 100) + '%';
            return percentage;
        } else {
            return percentage;
        }
    },
    color: '#fff',
}

我得到所有馅饼的 100% 价值，而不是各自的百分比。这是 JSFiddle ( https://jsfiddle.net/kingBethal/a1Lvn4eb/7/ )

原文由 theKing 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

更新了 2 位小数精度的小提琴。

您没有计算总和，而是仅将每个值的当前值存储在总和中。

这是工作小提琴： https ://jsfiddle.net/a1Lvn4eb/55/

 var data = [{
    data: [50, 55, 60, 33],
    labels: ["India", "China", "US", "Canada"],
    backgroundColor: [
        "#4b77a9",
        "#5f255f",
        "#d21243",
        "#B27200"
    ],
    borderColor: "#fff"
}];

var options = {
    tooltips: {
        enabled: false
    },
    plugins: {
        datalabels: {
            formatter: (value, ctx) => {
                let sum = 0;
                let dataArr = ctx.chart.data.datasets[0].data;
                dataArr.map(data => {
                    sum += data;
                });
                let percentage = (value*100 / sum).toFixed(2)+"%";
                return percentage;
            },
            color: '#fff',
        }
    }
};

var ctx = document.getElementById("pie-chart").getContext('2d');
var myChart = new Chart(ctx, {
    type: 'pie',
    data: {
        datasets: data
    },
    options: options
});

原文由 Hiteshdua1 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我想在已接受的答案中添加一点， ctx.chart.data.datasets[0].data 即使您通过单击图例过滤掉一些数据，也总是会为您提供完整的数据，这意味着即使您过滤掉一些数据，您也将始终获得一个国家/地区的相同百分比国家。

我已经使用 context.dataset._meta[0].total 来获取过滤后的总数。

这是工作片段：

 var data = [{
  data: [50, 55, 60, 33],
  backgroundColor: [
    "#4b77a9",
    "#5f255f",
    "#d21243",
    "#B27200"
  ],
  borderColor: "#fff"
}];

var options = {
  tooltips: {
    enabled: true
  },
  plugins: {
    datalabels: {
      formatter: (value, ctx) => {

        let sum = ctx.dataset._meta[0].total;
        let percentage = (value * 100 / sum).toFixed(2) + "%";
        return percentage;

      },
      color: '#fff',
    }
  }
};

var ctx = document.getElementById("pie-chart").getContext('2d');
var myChart = new Chart(ctx, {
  type: 'pie',
  data: {
  labels: ['India', 'China', 'US', 'Canada'],
    datasets: data
  },
  options: options
});

 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@0.7.0"></script>
<canvas id="pie-chart"></canvas>

原文由 Muhammad Ashhar Hasan 发布，翻译遵循 CC BY-SA 4.0 许可协议