Question

我正在尝试创建流动的Plotly图。但是，我不确定要在示例图像的最底部使用哪个Plotly参数来获得结果。

我的情节在这里：RandomSignalFlow

HTML：

<head>
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
  <div id="graph"></div>
</body>

JS：

function rand() { 
  return Math.random();
}

Plotly.plot('graph', [{
  y: [1,2,3].map(rand),
  mode: 'lines',
  line: {color: '#80CAF6'}
}]);

var cnt = 0;

var interval = setInterval(function() {

  Plotly.extendTraces('graph', {
    y: [[rand()]]
  }, [0])

  if(cnt === 100) clearInterval(interval);
}, 300);

因此，这将创建数据流，但是随着数据的流入，绘图将一直在水平压缩。我处于tracking行为之后（如下面的图像波纹所示）。

我尝试使用.shift()裁剪数据的X和Y组件，但是由于某些原因而无法正常工作。

与图像关联的项目为here。

如何使用JavaScript获取移动的Plotly图？

0 个答案: