Question

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

＆＃13;

$(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);
});

＆＃13;

<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>

＆＃13;

这正是我需要的。

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

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

请建议!!!!

Answer 1

您可以使用dateWindow选项设置x轴范围。如果您想平滑地为图表范围制作动画，我建议您使用requestAnimationFrame调用该图表。

Answer 2

您可以通过删除“推入”图中相同数量的点以从图的左侧“移出”来实现这一点，就像您显示的示例一样。

幸运的是，已经有一个函数可以执行此操作-shift()

现在要使用它，您要做的就是在shift新数据之前调用push-

data.shift();
data.push([x, y]);

Answer 3

dygraphs中已经提供了滚动功能。您可以使用下面的演示中提供的范围选择器功能来代替使用.shift（）方法。

http://dygraphs.com/gallery/#g/range-selector

您可以将显示范围固定为总范围的前一半。因此，它将点向左移动并将是实时更新，并且您也不会从图形中删除任何点。

Dygraph动态更新

3 个答案: