Question

我目前正在学习如何使用plotlyJS，并且遇到麻烦了。我可以使用以下功能创建无限滚动的线栏

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

这很好，但我想无限循环特定数字。

我希望能够写类似...

function getData() {
         return [0.5,0.5,1,2,4.5,0.5, ... ];
}

我的问题是，当我运行此命令时，将显示点，但没有像使用Math.random（）;那样的无限滚动效果。我不确定是否应该在函数内部创建for循环或寻找其他方法。

我是JavaScript的新手，所以我正在通过项目进行学习，到目前为止我学到了很多东西，但是我被困住了。

感谢阅读。

Answer 1

您可以使用生成器函数无限循环遍历数组。

var trace1 = {
  x: [1, 2, 3, 4],
  y: [1, 2, 3, 4],
  type: 'scatter',
};

var data = [trace1];
var chartDiv = document.getElementById('myDiv');

Plotly.newPlot('myDiv', data, {}, {});

var myArray = [0.5,1,2,4.5];

var generateData = function* (array) {
  var index = 0;
  while(true) {
    yield array[index++ % array.length];
  }
}

var xValue = 5
var dataGenerator = generateData(myArray);

var addData = () => {
    setTimeout(() => {
      Plotly.extendTraces(chartDiv, {x: [[xValue++]], y: [[dataGenerator.next().value]]}, [0]);
      addData();
  }, 1000);  
}

addData();

<head>
  <!-- Plotly.js -->
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>

<body>
  
  <div id="myDiv"></div>

</body>

如何为Plotly.JS返回数组的无限循环？

1 个答案: