更新数据和标签时，图表无法添加更多列

Question

所以我固有的图表设置是

var chart2config = {
    type: "bar",
    plugins: [ChartDataLabels],
    data: {
    //labels:['hello','goodbye','hello','goodbye','hello','goodbye','hello','goodbye','hello','goodbye','hello'],
    labels:[],
      datasets: [{
        label: 'Summer Semester',
        pointRadius: 4,
        pointBackgroundColor: "rgba(0,0,255,1)",
        data: [500,1000],
        stack: "number1"
      }]
    },
    options:{
        responsive: true,
        scales: {
            x: {
                stacked: false
            },
            y: {
                stacked: true
            }
        },
        plugins: {
            datalabels: {
                color:'red',
                rotation:90,
                maintainAspectRatio: false,
                anchor:'end',
                labels: {
                    title: {
                      font: {
                        weight: 'bold',
                        color:'red'
                      }
                    }
                },
              font: {
                weight: 'bold'
              }
            }
    }
    }
  };

然后我就跑了

 axios.post('/allyears_semester_archive', {
})
.then(function (response) {
  chart2data = response.data;
  console.log(response.data);
  console.log(chart2data.years);

  chart2config.labels = chart2data.years;
  chart2config.data.datasets[0].data = chart2data.summer;
  var chart2 = new Chart(ctx_archive_live,chart2config);

})
.catch(function (error) {
  console.log(error);

});

chartdata2.summer和chartdata2.labels是控制台中确认的数组。

当图表被重新绘制时，我得到了

如果我从

开始

标签：['你好'，'再见'，'你好'，'再见'，'你好'，'再见'，'你好'，'再见'，'你好'，'再见'，'你好']

我会得到下面的数据适合更新的内容，但标签当然不会再次更新...不知道如何执行此操作以使图表正确更新。

Answer 1

我建议查看 https://www.chartjs.org/docs/latest/developers/updates.html 以了解如何更新 Chart.js 数据和标签。

查看您的代码片段，它更新了此处的图表：

chart2data = response.data;
console.log(response.data);
console.log(chart2data.years);

chart2config.labels = chart2data.years;
chart2config.data.datasets[0].data = chart2data.summer;
var chart2 = new Chart(ctx_archive_live,chart2config);

确实不需要创建新的 Chart 实例。相反，从上面的代码来看，

chart2config

已经是您的图表实例，因此我们可以使用它来更新数据并修改您的代码片段，如下所示：

chart2config.data.labels = response.data.year;
chart2config.data.datasets[0].data = response.data.summer;

chart2config.update();

仔细检查您的

response.data

是否采用正确的形式，并且您实际上可以访问要更新的

chart2config

对象。然后按照有关更新的 Chart.js 文档进行操作，正如我在上面尝试的那样，对您的数据了解有限，应该可行。