绘制JS-扩展轨迹在看不到选项卡时的行为很奇怪

Question

我一直在查看用于实时绘图的 plotly js 库。我找到了这个代码笔，它帮助我得到了一个简单的例子：

var plotDiv = document.getElementById('plotDiv');

var data = [{
    x: [ new Date().getTime() / 1000 ],
    y: [0]
}];

Plotly.plot(plotDiv, data, { title: 'Random Over Time'});

setInterval(function(){
    var update = {
        x: [[ new Date().getTime() / 1000 ]],
        y: [[ Math.random() ]]
    };

    Plotly.extendTraces(plotDiv, update, [0], 20);
}, 100);

http://codepen.io/plotly/pen/LGEyyY?editors=001

它工作得很好——除了当你离开 codepen window 时它似乎会明显地降低采样率（或其他东西）。重现很容易：将图中的点数更改为例如20（extendTraces 函数的最后一个参数）并将超时更改为 100 毫秒。让图表充满点并切换到另一个选项卡 5 秒左右。当你返回时，很明显，由于下采样，点在一段时间内消失得更快。我还用正弦波做了一些测试，显示得更清楚。

我的问题是 - 是否可以改变或消除这种行为？数据以 1 秒的间隔发送，如果您可以使用 maxpoints=60 来显示最后一分钟的数据，那就太好了。

Answer 1

经进一步调查，似乎 Chrome 在选项卡不可见时未以 100 毫秒的间隔调用间隔函数。在这里更详细地讨论：Chrome: timeouts/interval suspended in background tabs?

绘制JS-扩展轨迹在看不到选项卡时的行为很奇怪

Plotly js - extendTraces behaves weird when tab is not visible

javascript

plotly