动态动态更新

Question

我是新的动态图形库，我需要帮助绘制动态数据使用动态图形。我在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进行调用。

Answer 2

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

幸运的是，已经有一个函数可以这样做-- shift()。

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

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

Answer 3

动态图形中已经提供了滚动功能。与使用.shift()方法不同，您可以使用下面演示中提供的范围选择器特性。

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

您可以将显示范围修正为总范围的前半部分。因此，它将把点向左移动，并将是一个实时更新，而且您也不会从图中移除任何点。