Chart.js 如何修改现有图例

Question

如何修改 Chart.js 中的现有图例？

我见过创建自定义 HTML 图例的复杂方法（使用generateLegend或），以及一个应该接受数组legendCallback的简单方法，但没有看到任何变化，因此假设这是版本 1 的变化。options.legend.legendText

我正在寻找向默认图例添加文本：

type: 'doughnut',
data: {
    datasets: [{
        data: series,
    }],
    labels: labels,                
},
options: {
   legend: {
     legendText = labels.map((label, index) => `${label} - ${series[index]}%`);
   }
}

Answer 1

编辑：

我注意到，如果重新绘制图表（例如，如果调整浏览器窗口大小），图例将丢失额外的文本。

我修改了作为内联插件工作的方法，以便label在绘制图例之前修改对象。

let labels = ['a', 'b', 'c', 'd'],
  series = [4, 2, 1, 3],
  myChart = new Chart(document.getElementById('chart'), {
    type: 'doughnut',
    data: {
      labels: labels,
      datasets: [{
        data: series,
        backgroundColor: ['red', 'blue', 'green', 'orange']
      }]
    },
    options: {
      maintainAspectRatio: false
    },
    plugins: [{
      afterLayout: function(chart) {
        let total = chart.data.datasets[0].data.reduce((a, b) => {
          return a + b;
        });
        chart.legend.legendItems.forEach(
          (label) => {
            let value = chart.data.datasets[0].data[label.index];

            label.text += ' - ' + (value / total * 100).toFixed(0) + '%'
            return label;
          }
        )
      }
    }]
  });

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<canvas id="chart"></canvas>