用实时数据填充数组答案

【问题标题】：Fill an array with real-time data用实时数据填充数组
【发布时间】：2023-03-26 12:28:02
【问题描述】：

我的项目中有一个机器人，它可以移动并给我 x 和 y 坐标。我也在大约 1 秒内得到 2 个数据。我想问一下我是否可以将这些数据加载到一个数组中，以便以后可以使用它。

我想稍后在图中显示它，但要做到这一点，我认为我们需要用数据填充数组。

index.html:
    html>
    <head>

        <script type="text/javascript" src="https://static.robotwebtools.org/roslibjs/current/roslib.min.js">
        </script>
        <script type="text/javascript" src="main.js">
        </script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
    </head>

        <body>

            <h1 style="text-align: center;">Topic visualization</h1>

            <div>

                <h3 id="positionX" style="text-align: center;">X:<span id="posX"></span></h3>
                <h3 id="positionY" style="text-align: center;">Y:<span id="posY"></span></h3>

            </div>

            
        </body>

        
        <canvas id="myChart" width="500" height="150"></canvas>

<script>

/////////////////////////////
let array = [];
array.push(document.getElementById("posX"))
console.log(array)
////////////////////////////


const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
    type: 'line',
    data: {
        datasets: [{
            label: 'GOKART MOVING',
            data: posX//call the function later,    
        }],
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true,
                    suggestedMax: 20,
                }
            }]
        }
    }
});


</script>

</html>

main.js：

//Connecting and message print out

var ros = new ROSLIB.Ros({
    url:'ws://10.0.2.10:9090'
});
ros.on('connection',function(){
    console.log("Connected to websocket server")
});
ros.on('error',function(){
    console.log("Error connecting to websocket server: ",error)
}); 
ros.on('close',function(){
    console.log("Connection to websocket server closed.")
});

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

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

    let h2_y = document.getElementById('posY');
    h2_y.innerHTML = message.y.toFixed(2);
});

【问题讨论】：

标签： javascript arrays charts

【解决方案1】：

您可以在全局范围内声明此数组，并将值推送到订阅中。

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

    let h2_y = document.getElementById('posY');
    h2_y.innerHTML = message.y.toFixed(2);
   
    array.push({x:h2_x, y:h2_y});

});

这会将您的 x 和 y 值作为对象推送到数组中，您可以向对象添加其他详细信息，然后从数组中检索它！

【讨论】：