实际上，在按下我网站中的一个按钮后，我调用了一个引导模式，其中有一个Chart.js，该图表的数据是通过Ajax调用以以下方式加载的
function loadReports(data) {
$.ajax({
type: "POST",
url: "Default.aspx/getReports",
contentType: "application/json; charset=utf-8",
data: JSON.stringify({ data: data }),
dataType: "json",
success: function (r) {
data = r.d;
if (data != '[]') {
data = jQuery.parseJSON(data);
var dataObject = {
labels: data.map(ora => ora.ORARIO),
datasets: [{
label: 'Coperti',
backgroundColor: gradient,
hoverBackgroundColor: gradient,
data: data.map(cop => cop.COPERTI)
}]
};
chart.data = dataObject;
chart.update(0);
} else {
var dataObject = {
labels: [],
datasets: []
}
chart.data = dataObject;
chart.update();
}
},
error: function (error) {
alert(error.responseText);
}
});
}
现在我想“实时更新”该图表，但问题显然是通过对该函数执行Ajax轮询来更新所有图表数据
虽然我将只更新新数据，因此如果我有一个图表构建为标签[“15:00”,“16:00”]数据集[5,8]当一个新数据已添加到数据库为17:00/9时，我将只添加新值，或者另一个例子，如果15:00的数据已更改为10，我将只更新标签15:00中设置的值。
是的，你可以更新这两个东西
>
更新现有数据点
document.getElementById('addData').addEventListener('click', function() {
if (config.data.datasets.length > 0) {
var month = MONTHS[config.data.labels.length % MONTHS.length];
config.data.labels.push(month);
config.data.datasets.forEach(function(dataset) {
dataset.data.push(randomScalingFactor());
});
window.myLine.update();
}
});
document.getElementById('updateOnlyPoint').addEventListener('click', function() {
if (config.data.datasets.length > 0) {
var month = config.data.labels.indexOf("March");//change point
var olddata=config.data.datasets[0].data
olddata[month]=randomScalingFactor(); //new data
window.myLine.update();
}
});
下面是工作示例
