charts - Chartjs 将百分比添加到饼图图例

Question

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

我相信它会使用generateLabels: function (chart) {}，任何人都可以提供一个干净的例子吗？

Answer 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%。)