Chartjs添加和删除数据
Chartjs添加和删除数据
提问于 2020-12-28 22:54:06
希望有人能帮我。基于这个示例https://www.chartjs.org/samples/latest/charts/bar/vertical.html，我想实现“添加”和“删除数据”，但限制为20个标签/月/年(或控制此限制)，而不是随机数据。下面的代码我已经修改了，但是当我删除数据并再次添加时，我也有一些问题。
var MONTHS = ['Year 11', 'Year 12', 'Year 13', 'Year 14', 'Year 15', 'Year 16', 'Year 17', 'Year 18', 'Year 19', 'Year 20'];
var barChartData = {
labels: ['Year 1', 'Year 2', 'Year 3', 'Year 4', 'Year 5', 'Year 6', 'Year 7', 'Year 8', 'Year 9', 'Year 10'],
datasets: [{
label: 'Label 1',
borderWidth: 1,
data: [
1,2,3,4,5,6,7,8,9,10
]
}, {
label: 'Label 2',
borderWidth: 1,
data: [
11,12,13,14,15,16,17,18,19,20
]
}]
};
window.onload = function() {
var ctx = document.getElementById('canvas').getContext('2d');
window.myBar = new Chart(ctx, {
type: 'bar',
data: barChartData,
options: {
responsive: true,
legend: {
position: 'top',
},
title: {
display: true,
text: 'Chart.js Bar Chart'
}
}
});
};
document.getElementById('addData').addEventListener('click', function() {
if (barChartData.datasets.length > 0) {
var month = MONTHS[barChartData.labels.length % MONTHS.length];
barChartData.labels.push(month);
for (var index = 0; index < barChartData.datasets.length; ++index) {
barChartData.datasets[0].data[10] = 500;
barChartData.datasets[1].data[10] = 200;
}
window.myBar.update();
}
});
document.getElementById('removeData').addEventListener('click', function() {
barChartData.labels.splice(-1, 1); // remove the label first
barChartData.datasets.forEach(function(dataset) {
dataset.data.pop();
});
window.myBar.update();
});/years非常感谢
Stack Overflow用户
发布于 2020-12-28 23:37:49
我已经检查了你的代码，你的问题是关于添加数据，所以我修复了它，请在你的循环中添加函数我是认真的。
for (var index = 0; index < barChartData.datasets.length; ++index) {
barChartData.datasets[0].data[10] = 500;
barChartData.datasets[1].data[10] = 200;
}替换那些
barChartData.datasets[0].data[10] = 500;
barChartData.datasets[1].data[10] = 200;有了这个
barChartData.datasets[index].data.push( Math.floor((Math.random() * 10) + 1) );页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65479526
复制相关文章
相似问题
腾讯云开发者
