Question

TL; DR我想用Plotly.js显示长时间运行的条形图。我不知道如何丢弃旧点。

详情

https://codepen.io/Michael-F-Ellis/pen/QvXPQr的CodePen中的以下更新程序几乎可以满足我的需求。它显示了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);

问题是我做想要删除旧点。真正的应用程序需要在内存有限的系统上永远运行。我正在寻找一个Plotly调用，它将丢弃最老的N个跟踪点。它需要合理有效，因为目标系统的性能也是有限的。

谢谢！

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()从数组的开头删除旧点。

我对其他解决方案持开放态度，特别是如果此方法存在已知内存或性能问题。

Plotly：如何丢弃旧点？

1 个答案: