Plotly: How to discard older points?

Question

TL; DR我想使用Plotly.js显示长时间运行的带状图。我不知道该如何抛弃旧观点。

细节

我的CodePen的以下更新程序位于https://codepen.io/Michael-F-Ellis/pen/QvXPQr，几乎可以满足 我的要求。它显示了2条迹线中的20个样本，它们以500毫秒的间隔连续更新。在演示的最后，它将绘制所有点以显示它们仍然存在。

var cnt = 0;
var interval = setInterval(function() {
  // Add next point to each trace
  Plotly.extendTraces('graph', {
    y: [[rand()], [rand()]]
  }, [0, 1])
  // Display only 20 most recent points
  Plotly.relayout('graph', { 'xaxis.range': [cnt-20, cnt]})

  cnt = cnt+1;
  if(cnt === 100) {
    // Before ending the run, show all points
    // to demonstrate they still exist in Plotly.
    Plotly.relayout('graph', { 'xaxis.range': [0, cnt]});
    clearInterval(interval);
  }
}, 500);

问题是我确实要删除较旧的点。真正的应用程序需要在内存有限的系统上永远永久运行。我正在寻找将删除最旧的N个跟踪点的Plotly调用。由于目标系统的性能也受到限制，因此它必须合理有效。

谢谢！

Answer 1

https://codepen.io/Michael-F-Ellis/pen/YxeEwm

从行为的角度来看，以上似乎是可行的。这是修改后的更新例程：

Plotly.plot('graph', data);
var cnt = 0;
var max = 20;
var interval = setInterval(function() {
  // Add next point to each trace
  Plotly.extendTraces('graph', {
    y: [[rand()], [rand()]]
  }, [0, 1])
  // Keep only 'max' most recent points
  if(cnt > max) {
    data[0].y.shift();
    data[1].y.shift();
  }
  cnt = cnt+1;
  if(cnt === 100) {
    // Before ending the run, show all points
    // to demonstrate that only 'max' points
    // still exist in Plotly.
    Plotly.relayout('graph', { 'xaxis.range': [0, cnt]});
    clearInterval(interval);
  }
}, 500);

解决方案是将数据对象保留在Plotly外部的var中，并shift()在添加新点时使用它从数组的开头删除旧点。

我对另一种解决方案持开放态度，尤其是在这种方法存在已知的内存或性能问题的情况下。