ChartJS环形图图例设为true仍不可见，寻求解决办法

问题根源在于数据结构错误：labels应该放在data对象的根层级，而非dataset数组内部。ChartJS需要从data根节点的labels获取图例文本，你现在把它写在dataset里，导致图表无法识别图例对应的标签，所以即使开启了legend.display: true也不会显示。

修改后的完整代码如下：

var data = [{
    data: [successfulBuildsCount, failureBuildsCount],
    backgroundColor: [
      "green",
      "red"
    ],
    borderColor: "#fff"
}];

var options = {
    legend: { display: true },
    title: {
      display: true,
    },
    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("chartContainer");
var myChart = new Chart(ctx, {
    type: 'doughnut',
    data: {
      datasets: data,
      labels: ["Successes", "Failures"] // 把labels移到这里
    },
    options: options
});

关键改动说明 #

• 将原来写在dataset里的labels数组，移动到data对象的根层级，和datasets同级。
• 移除dataset内部的labels属性，因为这不是ChartJS规定的dataset属性字段。

这样调整后，ChartJS就能正确关联每个数据项的标签，自动渲染出对应的图例。

内容的提问来源于stack exchange，提问作者Arhan Sethi