使用 ajax 从数据库收到新数据后,更新 chart.js 不起作用
2020-04-18
552
这是我在脚本中初始化图表的脚本
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 中未定义的属性“更新”
如果我像这样操作:
myChartTemp.data.labels = reading_time_hour;
myChartTemp.data.datasets[0].data = valueTemp;
myChartTemp.update();
(前面没有窗口或文档)我得到以下信息: TypeError:在非对象上调用 Object.defineProperty
2个回答
您是否尝试过将更新函数作为 DOM 对象访问?
window.myChartTemp.update();
或
document.myChartTemp.update();
Alexander Riedel
2020-04-18
问题是我传递了一个对象,但它期望一个数组。我的
var Data
是一个包含多个 JSON 对象的 JSON 对象。在我应用
valueTemp = JSON.parse(Data.temperature);
之后,它返回一个温度值数组,这正是我需要的。
reyork
2020-04-21