Chart.js - 无法刷新页面

Question

我有来自机器人的 X 和 Y 坐标。 我想更新图表，以便在汽车移动时单独显示数据。

错误抛出：无法读取未定义的属性“数据”。

有人可以帮助我，我怎样才能让升级成功？

var ros = new ROSLIB.Ros({
    url:'ws://10.0.2.5:9090'
});

var tag5617 = new ROSLIB.Topic({
    ros:ros,
    name:"/dwm1001/tag5617",
    messageType:"dwm1001/anchor"
});

var myChart;
var canvas = document.getElementById('myChart');
var ctx = canvas.getContext('2d');

function init(){
    const myChart = new Chart(ctx, {
        type: 'scatter',
        data: {
            datasets: [{
                label: 'GOKART MOVING',
                data: [{x:1,y:1}], 
                backgroundColor: ['#087037'],   
            }],
        },
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true,
                        suggestedMax: 20,
                    }
                }]
    ,            xAxes: [{
                    ticks:{
                        suggestedMax:15,
                    }
                }]
            }
        }
        });
}
init();

tag5617.subscribe(function(message) {
    //console.log("X: " + message.x);
    //console.log("Y: " + message.y);
    let X = document.getElementById('posX');
    X.innerHTML = message.x.toFixed(2);

    let Y = document.getElementById('posY');
    Y.innerHTML = message.y.toFixed(2);
   
    myChart.data.datasets[0].push({X,Y});
    myChart.update();
});

Answer 1

您定义 2 myChart。 所以你的第一个声明保持为空；）重新分配你的变量，不要让一个新的人留在你的初始化 function scope 中。

function init(){
    myChart = new Chart(ctx, {
       ...
    });
}