Chart.js 3.x 标签字段使用动态数组不生效问题咨询

问题根因 #

• 动态更新图表的逻辑中，你错误使用了未定义的newLabelsArray变量赋值标签，没有传入最新的labelsP数组
• Chart.js 3.x 版本中，标签配置挂载在图表实例的data属性下，你直接写barChartProjekt.labels是错误的赋值路径，实际应该修改barChartProjekt.data.labels
• 额外逻辑问题：你把标签赋值逻辑放在了数据集的遍历循环内，会导致重复执行多次无意义赋值，逻辑不严谨。

修正后的代码 #

if (barChartProjekt) {
  // 更新数据集
  data.datasets.forEach((ds, i) => {
    barChartProjekt.data.datasets[i].data = ds.data;
  })
  // 正确更新标签：放在循环外，用最新的labelsP赋值到正确路径
  barChartProjekt.data.labels = labelsP;  
  barChartProjekt.update();
} else {
  // 初始化逻辑无需调整，只需保证执行初始化时接口已返回数据、labelsP已正确赋值即可
  barChartProjekt = new Chart(chart, {
    type: 'bar',
    data: data,
    options: {
      responsive: true,
      plugins: {  
        legend: {
          labels: {
            color: "white",
            font: {
              size: 18 
            }
          }
        }
      },
      scales: {
        y: {  
          ticks: {
            color: "white",
            font: {
              size: 18,
            },
            stepSize: 1,
            beginAtZero: true
          }
        },
        x: { 
          ticks: {
            color: "white",  
            font: {
              size: 14
            },
            stepSize: 1,
            beginAtZero: true
          }
        }
      }
    }
  });
}

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