Dygraph 动态更新答案

【问题标题】：Dygraph dynamic updateDygraph 动态更新
【发布时间】：2019-11-21 15:01:54
【问题描述】：

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

这正是我需要的。

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

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

请推荐!!!!

【问题讨论】：

标签： javascript dygraphs

【解决方案1】：

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

【讨论】：

感谢您的回复...抱歉给您带来了麻烦...但我需要这样的东西link..这里旧数据向左移动，并且 highcharts 提供了一个滚动条来查看旧数据...如何使用 dygraphs 实现相同...
@danvk，您能否提供一些示例代码或参考链接会有所帮助，即使我也在寻找相同的内容。

【解决方案2】：

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

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

现在要使用它，您只需在 push 新数据之前调用 shift -

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

【讨论】：

这并没有提供问题的答案。要批评或要求作者澄清，请在他们的帖子下方留下评论。 - From Review
@tsturzl ``` .....旧图表点向左移动。```.这就是 shift 所做的。请自行运行并检查。如果它仍然没有回答问题，我将其删除。
这不是我认为它是否回答了这个问题，这只是模棱两可。这是一个低质量的答案，可以编辑以包含可以使其成为可行答案的描述。解释你的答案是提供答案的一部分。

【解决方案3】：

Dygraphs 中已经提供了滚动功能。您可以使用下面演示中提供的范围选择器功能，而不是使用 .shift() 方法。

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

您可以将显示范围固定为总范围的前半部分。所以它会将点向左移动，并且会实时更新，而且您不会从图表中删除任何点。

【讨论】：