Question

我有一个用于流式传输实时数据的plotly.js仪表板。实时数据流部分工作得非常好，但我真的希望在数据进入的同时为所有跟踪设置动画。但是，我无法一次设置多个跟踪动画，无论是什么我转到Plotly.animate。我使用他们网站上的代码重新创建了这个问题。

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

<body>
  <div id="graph"></div>
  <button onclick="javascript:randomize();">Randomize!</button>
</body>

<script>
 Plotly.plot('graph', [{
 x: [1, 2, 3],
 y: [0, 0.5, 1],
 line: {simplify: false},
 }, 
 {
 x: [3, 2, 1],
 y: [0, 0.5, 1],
 line: {simplify: false}
 }]);

 function randomize() {
  Plotly.animate('graph', {
  data: [{y: [Math.random(), Math.random(), Math.random()]}],
  traces: [0,1],
  layout: {}
  }, {
  transition: {
  duration: 500,
  ease: 'cubic-in-out'
  }
  })


  }</script>
  </html>

观察即使我传递了痕迹[0,1]，它也只会为该阵列中的第一条轨迹设置动画！我找不到任何可以解决这个问题的文档。

Answer 1

我找到了答案。问题在于我传递给Plotly.animate的数据，它只有一条跟踪的更新信息。

如果有人想知道，这是工作代码：

<html>
<head>
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
  <div id="graph"></div>
  <button onclick="javascript:randomize();">Randomize!</button>
</body>

<script>
Plotly.plot('graph', [{
  x: [1, 2, 3],
  y: [0, 0.5, 1],
  line: {simplify: false},
}, 
{
  x: [3, 2, 1],
  y: [0, 0.5, 1],
  line: {simplify: false}
}]);

function randomize() {
  Plotly.animate('graph', {
    data: [{y: [Math.random(), Math.random(), Math.random()]}, {y: [Math.random(), Math.random(), Math.random()]}],
    traces: [0,1],
    layout: {}
  }, {
    transition: {
      duration: 500,
      ease: 'cubic-in-out'
    }
  })


}</script>
</html>

使用plotly.js动画API为多个轨迹设置动画

1 个答案: