ChartJs 显示错误的标签

Question

首先，我想说我是一名学生，学习编程大约一个月，所以期待看到很多错误。

我正在一个网站上工作，我在该网站上使用 ChartJs 库中的图表。我有一个外圈，显示在公司工作的时间以及达到每月目标的剩余时间。内圈显示该月的天数和该月的剩余天数。代码如下：

const data = {
    labels: ['Summe', 'Noch um Ziel zu erreichen', 'Tage', 'Verbleibende Tage im Monat'],
    datasets: [
      {
        backgroundColor: ['#5ce1e6', '#2acaea'],
        data: [studenGesamt, (800 - studenGesamt)]
      },
      {
        backgroundColor: ['#cd1076', '#8b0a50'],
        data: [dayD, (23 - dayD)]
      },
  
    ]
  };

// Configuration of the pie chart
let outterChart = new Chart(chart, {
    type: 'pie',
    data: data,
    options: {
    responsive: true,
    plugins: {
      legend: {
        labels: {
          generateLabels: function(chart) {
            // Get the default label list
            const original = Chart.overrides.pie.plugins.legend.labels.generateLabels;
            const labelsOriginal = original.call(this, chart);

            // Build an array of colors used in the datasets of the chart
            var datasetColors = chart.data.datasets.map(function(e) {
              return e.backgroundColor;
            });
            datasetColors = datasetColors.flat();

            // Modify the color and hide state of each label
            labelsOriginal.forEach(label => {

              // Change the color to match the dataset
              label.fillStyle = datasetColors[label.index];
            });

            return labelsOriginal;
          }
        },
        onClick: function(mouseEvent, legendItem, legend) {
          // toggle the visibility of the dataset from what it currently is
          legend.chart.getDatasetMeta(
            legendItem.datasetIndex
          ).hidden = legend.chart.isDatasetVisible(legendItem.datasetIndex);
          legend.chart.update();
        }
      },
       tooltips: {
        callbacks: {
          label: function(context) {
            const labelIndex = (context.datasetIndex * 2) + context.dataIndex;
            return context.chart.data.labels[labelIndex] + ': ' + context.formattedValue;
          }
        }
      },
    }
  },
});

悬停时，外圈完成部分应显示标签“Summe：X”，外圈未完成部分应显示“Noch um Ziel zu erreichen：X”，效果很好。当您将鼠标悬停时，内圈的已完成部分应显示“Tage: X”，内圈未完成部分应显示“Verbleibende Tage im Monat: X”。

我上周完成了这张图表，它运行良好，显示了我上面解释的标签，但是当我今天打开它时，它不再以那种方式显示标签了。我确实做了一些更改，但据我所知，我恢复了所有更改。

这些是图表及其行为的一些图片：

在最后一张图片上，标签应显示“Tage: 6”。数据正确，但标签文本不正确。这也发生在内圈的未完成部分，其中数据是正确的，但它显示与外圈未完成部分相同的标签（“Noch um Ziel zu erreichen”而不是“Verbleibende Tage im Monat” ）。正如我所说，这段代码上周工作正常，所以我不确定发生了什么，我无法弄清楚。如果有人可以帮助我，我将不胜感激，感谢阅读！

注意：我用于图表的数据是通过对服务器的请求获取的，该服务器包含带有信息的 JSON 文件，然后存储在不同的变量中，如“stundenGesamt”和“dayD”。

Answer 1

您遇到的错误是您的 tooltip 配置错误，在 v3 中，命名从 tooltips 更改为 tooltip，如果您更改它可以正常工作：

const data = {
  labels: ['Summe', 'Noch um Ziel zu erreichen', 'Tage', 'Verbleibende Tage im Monat'],
  datasets: [{
      backgroundColor: ['#5ce1e6', '#2acaea'],
      data: [200, (800 - 200)]
    },
    {
      backgroundColor: ['#cd1076', '#8b0a50'],
      data: [4, (23 - 4)]
    },

  ]
};

var ctx = document.getElementById('chartJSContainer').getContext('2d');

// Configuration of the pie chart
let outterChart = new Chart(ctx, {
  type: 'pie',
  data: data,
  options: {
    responsive: true,
    plugins: {
      legend: {
        labels: {
          generateLabels: function(chart) {
            // Get the default label list
            const original = Chart.overrides.pie.plugins.legend.labels.generateLabels;
            const labelsOriginal = original.call(this, chart);

            // Build an array of colors used in the datasets of the chart
            var datasetColors = chart.data.datasets.map(function(e) {
              return e.backgroundColor;
            });
            datasetColors = datasetColors.flat();

            // Modify the color and hide state of each label
            labelsOriginal.forEach(label => {

              // Change the color to match the dataset
              label.fillStyle = datasetColors[label.index];
            });

            return labelsOriginal;
          }
        },
        onClick: function(mouseEvent, legendItem, legend) {
          // toggle the visibility of the dataset from what it currently is
          legend.chart.getDatasetMeta(
            legendItem.datasetIndex
          ).hidden = legend.chart.isDatasetVisible(legendItem.datasetIndex);
          legend.chart.update();
        }
      },
      tooltip: {
        callbacks: {
          label: function(context) {
            const labelIndex = (context.datasetIndex * 2) + context.dataIndex;
            return context.chart.data.labels[labelIndex] + ': ' + context.formattedValue;
          }
        }
      },
    }
  },
});

<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.js"></script>
</body>