ChartJs 2.9.4多层饼图标签与图表不匹配问题求助

我使用Chart.js 2.9.4版本，因为最新版本与显示该图表的TV设备不兼容。我尝试在饼图顶部添加标签，但标签与图表的对应关系不符合预期：前两个标签与外圈匹配，但后两个标签并未如我预想的那样匹配内圈。请问我哪里操作出错了？

相关代码 #

JavaScript代码

const chart = document.getElementById("multie-pie-chart") as HTMLCanvasElement;

function renderChart(data) {
  outterChart = new Chart(chart, {
    type: 'pie',
    data: data,
    options: {
      responsive: true,
      plugins: {
        datalabels: {
          font: {
            family: "'PT Sans', sans-serif",
            weight: 'bold',
            size: 20
          },
          color: '#1e1e1e',
        },
        legend: {
          labels: {
            color: '#333',
            font: {
              size: 14,
              family: "'PT Sans', sans-serif",
              weight: 'bold'
            },
          },
        },
      }
    }
  });

  return outterChart
}

const data = {
  labels: ['Summe', 'Noch um Ziel zu erreichen', 'Vergangene Tage', 'Verbleibende Tage'],
  datasets: [{
    backgroundColor: ['#ffff00', '#d8d800'],
    // @ts-ignore
    data: [stundenGesamt.toFixed(2), ((Number(ziel) - stundenGesamt)).toFixed(2)]
  },
  {
    backgroundColor: ['#666666', '#444444'],
    borderColor: ['#000000'],
    data: [workdaysCount(), (monatInputValidation() - workdaysCount())]
  },
  ]
};

HTML代码

<div id="container">
    <canvas id="multie-pie-chart" height="200" width="200"></canvas>
</div>

问题展示图 #

问题原因 #

在Chart.js 2.9.4里，多层饼图的全局labels数组是按顺序分配给所有数据集的切片的。你的第一个数据集只有2个切片，用掉前两个标签后，剩下的两个标签会继续分配给后续的切片（也就是第二个数据集的内圈切片），这和你期望的“内圈用专属标签”逻辑不匹配，导致标签错位。

解决方法 #

给每个数据集单独定义对应的labels，再通过datalabels插件的格式化函数，指定标签从当前数据集的labels中取值。

修改后的JavaScript代码

const chart = document.getElementById("multie-pie-chart") as HTMLCanvasElement;

function renderChart(data) {
  outterChart = new Chart(chart, {
    type: 'pie',
    data: data,
    options: {
      responsive: true,
      plugins: {
        datalabels: {
          font: {
            family: "'PT Sans', sans-serif",
            weight: 'bold',
            size: 20
          },
          color: '#1e1e1e',
          // 让标签取当前数据集对应的labels内容
          formatter: (value, context) => context.dataset.labels[context.dataIndex]
        },
        legend: {
          labels: {
            color: '#333',
            font: {
              size: 14,
              family: "'PT Sans', sans-serif",
              weight: 'bold'
            },
          },
        },
      }
    }
  });

  return outterChart
}

const data = {
  // 移除全局labels，每个数据集单独设置自己的标签
  datasets: [{
    labels: ['Summe', 'Noch um Ziel zu erreichen'], // 外圈切片对应标签
    backgroundColor: ['#ffff00', '#d8d800'],
    // @ts-ignore
    data: [stundenGesamt.toFixed(2), ((Number(ziel) - stundenGesamt)).toFixed(2)]
  },
  {
    labels: ['Vergangene Tage', 'Verbleibende Tage'], // 内圈切片对应标签
    backgroundColor: ['#666666', '#444444'],
    borderColor: ['#000000'],
    data: [workdaysCount(), (monatInputValidation() - workdaysCount())]
  },
  ]
};

关键修改点

1. 删除全局的labels数组，给每个dataset添加独立的labels数组，分别对应外圈和内圈的切片。
2. 在datalabels配置里添加formatter函数，确保每个切片的标签来自当前数据集的labels，这样内圈的切片就能正确显示对应的标签了。

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