javascript - plotly.js:如何在一秒钟内绘制 100 个点

Question

所以我想要完成的是在一秒钟内绘制超过 100 个点。我现在正在使用 plotlyJs。

但绘图时看起来相当慢。我将时间设置为 10，这样一秒内可以绘制 100 个点。但正如我所看到的，图表的运行速度非常慢，它在一秒钟内绘制的点数量较少。

这是我正在尝试的代码:

代码:

<script>
    function getData() {
        console.log(Math.random());
        return Math.random();
    }  
    Plotly.plot('chart',[{
        y:[getData()],
        type:'line'
    }]);

    var cnt = 0;
    setInterval(function(){
        Plotly.extendTraces('chart',{ y:[[getData()]]}, [0]);
        cnt++;
        if(cnt > 1000) {
            Plotly.relayout('chart',{
                xaxis: {
                    range: [cnt-1000,cnt]
                }
            });
        }
    },10);
</script>

Here是我创建的 fiddle 。

请告诉我，如果我遗漏了某些内容，或者这在 plotlyjs 中是不可能的？ 仅在一秒钟内绘制超过 100 个点时才会出现问题。

如果在 PlotlyJs 中不可能，我愿意接受任何其他图表库建议。

Answer 1

您的眼睛只能以 < 60 fps 的速度看到变化，因此显示器只能以 60 fps 的速度重新渲染。即每 16 毫秒。以较小的时间间隔运行计时器是没有意义的，因为无论如何您都不会以这种速度看到更新。相反，放慢间隔，一次显示多个点。这样速度更快，并且可以更轻松地调整绘图显示的速度。