在画布动态图表中显示来自MQTT代理的数据

Question

我正在开发一个仪表板页面，该页面显示来自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

中完成