ChartJs双层饼图悬浮提示标签显示错误问题求助

问题原因 #

你的tooltip标签匹配逻辑依赖固定索引计算，这种实现方式对Chart.js版本兼容性较差，如果你最近更新过Chart.js版本，很容易出现索引取值异常导致标签匹配错误，这也是你之前代码正常、回滚后仍失效的核心原因。另外你代码中第一个数据集引用的变量名studenGesamt和你备注里定义的stundenGesamt存在1个字母的拼写差异，如果不是笔误也会导致数据异常，你可以优先核对下变量名。

修复方案 #

放弃全局labels+索引计算的匹配方式，把标签拆分到对应数据集内部，直接从当前上下文取对应数据集的标签，逻辑更稳定，不会受版本变更影响：

// 调整data结构，每个dataset自带对应labels
const data = {
    datasets: [
      {
        labels: ['Summe', 'Noch um Ziel zu erreichen'],
        backgroundColor: ['#5ce1e6', '#2acaea'],
        data: [stundenGesamt, (800 - stundenGesamt)] // 注意修正变量名拼写
      },
      {
        labels: ['Tage', 'Verbleibende Tage im Monat'],
        backgroundColor: ['#cd1076', '#8b0a50'],
        data: [dayD, (23 - dayD)]
      },
    ]
  };

// 饼图配置
let outterChart = new Chart(chart, {
    type: 'pie',
    data: data,
    options: {
    responsive: true,
    plugins: {
      legend: {
        labels: {
          generateLabels: function(chart) {
            const original = Chart.overrides.pie.plugins.legend.labels.generateLabels;
            const labelsOriginal = original.call(this, chart);
            var datasetColors = chart.data.datasets.map(function(e) {
              return e.backgroundColor;
            });
            datasetColors = datasetColors.flat();
            labelsOriginal.forEach(label => {
              label.fillStyle = datasetColors[label.index];
            });
            return labelsOriginal;
          }
        },
        onClick: function(mouseEvent, legendItem, legend) {
          legend.chart.getDatasetMeta(
            legendItem.datasetIndex
          ).hidden = legend.chart.isDatasetVisible(legendItem.datasetIndex);
          legend.chart.update();
        }
      },
       tooltips: {
        callbacks: {
          label: function(context) {
            // 直接取当前数据集的对应标签，不需要计算全局索引
            const currentLabel = context.dataset.labels[context.dataIndex]
            return currentLabel + ': ' + context.formattedValue;
          }
        }
      },
    }
  },
});

如果修改后仍有问题，把Chart.js版本回退到你上周正常运行时的版本即可。

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