Plotly怎么实现实时数据更新 - 问答

要实现实时数据更新，可以使用Plotly.js中的Plotly.relayout()和Plotly.extendTraces()方法来更新图表。下面是一个简单的例子，演示了如何使用这两个方法来实现实时数据更新：

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>

<div id="plot"></div>

<script>
    var trace1 = {
        x: [1, 2, 3, 4, 5],
        y: [10, 15, 13, 17, 20],
        type: 'scatter',
        mode: 'lines+markers'
    };

    var layout = {
        title: 'Real-time Data Update'
    };

    Plotly.newPlot('plot', [trace1], layout);

    var cnt = 5;
    var interval = setInterval(function() {
        var update = {
            x: [[cnt]],
            y: [[Math.random() * 10]]
        };

        Plotly.extendTraces('plot', update, [0]);

        cnt++;

        if(cnt === 100) {
            clearInterval(interval);
        }
    }, 1000);
</script>

</body>
</html>

在这个例子中，我们首先创建了一个包含一条线型图的trace和一个包含标题的layout。然后使用Plotly.newPlot()方法初始化图表。接着，我们设置一个定时器，每隔一秒生成一个随机数据点并使用Plotly.extendTraces()方法将数据点添加到图表中。最后，在计数器cnt达到100时清除定时器。

通过类似这样的方式，您可以实现实时数据更新的效果。您可以根据自己的需求调整定时器的时间间隔和数据更新的方式。

0 赞

0 踩