使用ajax从数据库接收到新数据后，更新chart.js不起作用

Question

这是我在初始化图表的脚本中的脚本

JavaScript

$(document).ready( () => {
setInterval( () => {
var sensorUpdatedData = new XMLHttpRequest();
sensorUpdatedData.onreadystatechange = () => {
if(sensorUpdatedData.readyState === 4) {
if(sensorUpdatedData.status === 200) {
console.log("ready");           
var Data = JSON.parse(sensorUpdatedData.responseText);
console.log(Data);
valueTemp = Data.temperature;
valueHum = Data.humidity;
valueSmoke = Data.smoke;
reading_time = Data.reading_time;
reading_time_hour = Data.reading_time_hour;

myChartTemp.update();
myChartHum.update();
myChartSmoke.update();
myChartData.update();
} else {
alert('Error Code: ' +  sensorUpdatedData.status);
alert('Error Message: ' + sensorUpdatedData.statusText);
}
}
}
sensorUpdatedData.open('POST', 'data.php', true);
sensorUpdatedData.send();
}, 5000);
});

所有值都在正确更新(我用一些console.log进行了测试(

这就是我创建其中一个图表的方式：

var ctxTempChart = document.getElementById("chartLineTemp").getContext("2d");
var gradientStrokeTempChart = ctxTempChart.createLinearGradient(0, 230, 0, 50);
gradientStrokeTempChart.addColorStop(1, 'rgba(29,140,248,0.2)');
gradientStrokeTempChart.addColorStop(0.4, 'rgba(29,140,248,0.0)');
gradientStrokeTempChart.addColorStop(0, 'rgba(29,140,248,0)'); //blue colors
var dataTemp = {
labels: reading_time_hour,
datasets: [{
label: "Temperature",
fill: true,
backgroundColor: gradientStrokeTempChart,
borderColor: '#1f8ef1',
borderWidth: 2,
borderDash: [],
borderDashOffset: 0.0,
pointBackgroundColor: '#1f8ef1',
pointBorderColor: 'rgba(255,255,255,0)',
pointHoverBackgroundColor: '#1f8ef1',
pointBorderWidth: 20,
pointHoverRadius: 4,
pointHoverBorderWidth: 15,
pointRadius: 4,
data: valueTemp,
}]
};
var myChartTemp = new Chart(ctxTempChart, {
type: 'line',
data: dataTemp,
options: gradientBarChartConfigurationTempSmall
});

HTML

<canvas id="chartLineTemp"></canvas>

一切似乎都很好，但我不知道如何显示更新的数据。vavalueTemp、valueHum。。。在脚本开始时在全球范围内解密

更新如果我添加这个：

myChartTemp.data.labels = reading_time_hour; 
myChartTemp.data.datasets[0].data = valueTemp; 
window.myChartTemp.update();

我得到了这个(还有文档(：无法读取XMLHttpRequest.sensorUpdatedData.onreadystatechange中未定义的属性"update">

如果我这样做：

myChartTemp.data.labels = reading_time_hour;
myChartTemp.data.datasets[0].data = valueTemp;
myChartTemp.update();

(前面没有窗口或文档(我得到了ths:TypeError:Object.defineProperty在非对象上调用

Answer 1

您是否尝试过将更新函数作为DOM对象访问？

window.myChartTemp.update();或document.myChartTemp.update();

Answer 2

问题是我正在传递一个对象，而它需要一个数组。我的var Data是一个包含多个JSON对象的单个JSON对象。在我应用valueTemp = JSON.parse(Data.temperature);之后，它会返回一个温度值数组，这正是我所需要的。