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

ix0qys7i  于 2023-10-18  发布在  Chart.js
关注(0)|答案(1)|浏览(164)

所以我固有的图表设置是

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是控制台中确认的数组。
当图表重新绘制时,我得到

如果我从
labels:['hello',' goodbye ',' hello ',' goodbye ',' hello ',' goodbye ',' hello ',' goodbye ',' hello ']
我会得到下面的数据适合更新,但标签当然没有更新了...不确定如何执行此操作以使图表正确更新。

368yc8dk

368yc8dk1#

我建议看看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);

更新现有图表

如果可能,请更新现有图表示例。我相应地修改了你的代码片段,其中chartObj是你的Chart示例:

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

chartObj.update();

仔细检查response.data的格式是否正确,并且您实际上可以访问要更新的chart2config对象。然后按照Chart.js文档进行更新,正如我在对数据了解有限的情况下所做的那样,应该可以工作。

示例化新图表

如果您不想更新现有图表,但确实想创建一个新图表,我认为您的代码片段的问题可能是您必须将标签分配给config对象内的data属性。试试这个:

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

相关问题