我正在开发一个仪表板页面,该页面显示来自MQTT代理的数据,并且我希望这些数据显示在动态图表(画布图表)中。
我找到了一个示例,其中使用“ $ .getJSON”方法(URL,function())通过捕获JSON更新了图表
let dataPoints = [];
let dpsLength = 0;
let chart = new CanvasJS.Chart("chartContainer",{
exportEnabled: true,
title:{
text:"Monitoraggio parametro: VALUE"
},
data: [{
type: "spline",
dataPoints : dataPoints,
}]
});
$.getJSON("https://canvasjs.com/services/data/datapoints.php?xstart=1&ystart=25&length=20&type=json&callback=?", function(data) {
$.each(data, function(key, value){
dataPoints.push({x: value[0], y: parseInt(this.valore)});
});
dpsLength = dataPoints.length;
chart.render();
updateChart();
});
//UPDATECHART
function updateChart() {
$.getJSON("https://canvasjs.com/services/data/datapoints.php?xstart=" + (dpsLength + 1) + "&ystart=" + (dataPoints[dataPoints.length - 1].y) + "&length=1&type=json&callback=?", function(data) {
$.each(data, function(key, value) {
dataPoints.push({
x: parseInt(value[0]),
y: parseInt(value[1])
});
dpsLength++;
});
if (dataPoints.length > 20 ) {
dataPoints.shift();
}
chart.render();
setTimeout(function(){updateChart()}, 1000);
});
此代码位于“ ngOnInit()”(chart.component.ts)中。与mqtt代理的连接在app.component.ts
中完成