所以我固有的图表设置是
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 ']
我会得到下面的数据适合更新,但标签当然没有更新了...不确定如何执行此操作以使图表正确更新。
1条答案
按热度按时间368yc8dk1#
我建议看看https://www.chartjs.org/docs/latest/developers/updates.html,看看如何更新Chart.js数据和标签。
看看你的代码片段,它更新了这里的图表:
您需要修改的代码片段
更新现有图表
如果可能,请更新现有图表示例。我相应地修改了你的代码片段,其中
chartObj
是你的Chart示例:仔细检查
response.data
的格式是否正确,并且您实际上可以访问要更新的chart2config
对象。然后按照Chart.js文档进行更新,正如我在对数据了解有限的情况下所做的那样,应该可以工作。示例化新图表
如果您不想更新现有图表,但确实想创建一个新图表,我认为您的代码片段的问题可能是您必须将标签分配给config对象内的data属性。试试这个: