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是我创建的小提琴。

请告诉我plotlyjs中是否缺少某些内容？问题仅是在一秒钟内绘制100个以上的点。

如果在PlotlyJs中无法实现，我愿意接受任何其他图表库建议。

Answer 1

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

plotly.js：如何在一秒钟内绘制100点

1 个答案: