时间戳

首页 > 解决方案 > 如何为 Plotly.JS 返回一个无限循环的数组？

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

问题描述

我目前正在学习如何使用 plotlyJS 并且遇到了麻烦。我可以使用以下函数创建一个无限滚动线条

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

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

我希望能够写出类似...

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

我的问题是，当我运行它时，会显示点，但没有像使用 Math.random(); 那样的无限滚动效果。我不确定是否应该在函数内部创建一个 for 循环或找到不同的方法。

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

谢谢阅读。

标签： javascriptplotlyplotly.js

解决方案

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

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>

推荐阅读