javascript - Dygraph动态更新

Question

我是 Dygraphs 库的新手，我需要使用 Dygraph 绘制动态数据的帮助。我在 Dygraph 中看到过这个例子

$(document).ready(function() {
  var data = [];
  var t = new Date();

  var g = new Dygraph(document.getElementById("div_g"), data, {
    drawPoints: true,
    showRoller: true,
    valueRange: [0.0, 1.2],
    labels: ['Time', 'Random']
  });
  // It sucks that these things aren't objects, and we need to store state in window.
  window.intervalId = setInterval(function() {
    var x = new Date(); // current time
    var y = Math.random();
    data.push([x, y]);
    g.updateOptions({
      'file': data
    });
  }, 1000);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/dygraph/1.1.1/dygraph-combined.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

<div id="div_g" style="width:600px; height:300px;"></div>
<p>This test is modeled after a
  <a href="http://www.highcharts.com/demo/?example=dynamic-update&amp;theme=default">highcharts
test</a>. New points should appear once per second. Try zooming and panning over to the right edge to watch them show up.</p>

这正是我所需要的。

但是，我可以看到没有滚动选项(如果我错了，请纠正我)。因此，我的问题是如何模拟滚动功能，使旧的图表点向左移动。

可以通过编程方式平移图表来完成吗？。或者通过其他更好的方式。

请大家推荐!!!

Answer 1

您可以使用 dateWindow 设置 x 轴范围选项。如果您想平滑地对图表范围进行动画处理，我建议使用 requestAnimationFrame 进行调用。