chartjs 将百分比添加到饼图图例答案

【问题标题】：chartjs Adding percentages to Pie Chart Legendchartjs 将百分比添加到饼图图例
【发布时间】：2020-01-10 12:16:03
【问题描述】：

将百分比值添加到图例标签的最简单方法是什么？

我相信它会使用 generateLabels: function (chart) {}，谁能提供一个干净的例子？

【问题讨论】：

能否提供目前用于绘制图表的代码？以及您要添加的百分比值的示例？

【解决方案1】：

似乎没有任何本地方式来显示百分比，但计算并将它们设置为标签非常简单：

const data = [1, 2, 3],
  // ref: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce
  total = data.reduce((accumulator, currentValue) => accumulator + currentValue),
  // ref: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map
  labels = data.map(value => Math.round((value / total) * 100) + '%');

new Chart(document.getElementById('chart'), {
  type: 'doughnut',
  data: {
    labels: labels,
    datasets: [{
      data: data
    }]
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="chart" height="75"></canvas>

（注意：使用Math.round() 可能会导致某些数字集在求和时不等于 100%。）

【讨论】：

感谢这完美的工作。我补充说： const 猫 = ['A','B','C'];标签 = data.map(值 => 猫 [值 - 1] + ' ' + Math.round((值 / 总数) * 100) + '%');这为我提供了我正在寻找的类别和价值。

【解决方案2】：

如果您已经有一组图例，则可以使用此代码向其中添加百分比。这里 i 是数组中当前元素的索引。

data=[2,4,5,7];
legend=['A','B','C','D']
total = data.reduce((accumulator, currentValue) => parseInt(accumulator) + parseInt(currentValue));
labelsvalues = data.map(function(value,i){
let p= Math.round((value / total) * 100) + '%';
return legend[i]+' '+p;
});

【讨论】：