javascript - ChartJS : Custom legend not showing Labels for Multi-Pie chart

Question

我有一个带有多个环的饼图，并使用以下代码创建了一个自定义图例函数:

function (chart) {
var text = [];
text.push('<ul class="list-inline ' + chart.id + '-legend">');
for (var i = 0; i < chart.data.datasets[0].data.length; i++) {
    text.push('<li class="list-inline-item"><i class="fas fa-circle pr-1" style="color:' +
            chart.data.datasets[0].backgroundColor[i] + '"></i>');
    if (chart.data.labels[i]) {
        text.push('<span class="font-weight-bold">' + chart.data.labels[i] + '</span>');
    }
    text.push('</li>');
}
text.push('</ul>');
return text.join('');
},

上述函数预计会显示饼图中的所有标签，但它只显示项目符号。

这是 JSfille ( https://jsfiddle.net/kingBethal/x03w2qbk/17/ )

Answer 1

要从所有数据集中收集标签，您应该将所有数据集包含到循环中:

for(var j = 0; j < chart.data.datasets.length; j++){
  for (var i = 0; i < chart.data.datasets[j].data.length; i++) {
      text.push('<li class="list-inline-item"><small><i class="fas fa-circle pr-1" style="color:' +
              chart.data.datasets[j].backgroundColor[i] + '"></i>');
      if (chart.data.datasets[j].labels[i]) {
          text.push('<span class="font-weight-bold">' + chart.data.datasets[j].labels[i] + '</span>');
      }
      text.push('</small></li>');
  }
}