实时更新dygraphs并对rangeSelector位置产生影响

Question

查看updating a chart with live data的dygraphs示例，然后将其与dygraphs rangeSelector组合，生成的图表似乎可以正常工作，除非您开始拖动rangeSelector的句柄。

rangeSelector缩小了主图表数据的视图，但主图表被参数冻结，rangeSelector处理开始移出屏幕，只有rangeSelector图表显示更新数据。

所以我选择一个带有范围手柄条的范围，然后随着时间的推移，范围手柄不会留在原位，而是被推离滑块，这使它们完全没用。

此外，当选择范围时，主图表窗口中的数据点变为静态，这也是无用的。除非用户移动范围把手，否则不应移动范围把手，并且实时数据应该明显地在主图表和范围滑块内的图表中移动。

我认为理想的行为是：

1. 主图表应反映实时更新。 （除非手柄开始从画布上掉下来，否则当它被“范围”处理设置的窗口“卡住”时，它不会反映更新。）
2. 主图表应仅限于rangeSelector句柄施加的窗口，其中“window”表示不是开始时间和结束时间，而是时间窗口手柄间距表示。因此，即使x轴涉及日期，就好像这是范围选择器表示数字（例如1到100）的情况，如果滑动手柄以显示45-50之间的范围，则45-50范围应保持固定：数据更新应通过小图表和主图表上的选择，并且不应将范围句柄推离画布。

Highcharts有一个如何运作的例子。 http://www.highcharts.com/stock/demo/dynamic-update 如果缩放到1M，则将范围拖到最左侧，范围选择器保持原位，主图表仍然有效。

dygraphs有办法解决这个问题，有没有一个有效的例子？

JSBin示例

http://jsbin.com/xevonixode/1/edit?html,js,output

HTML

<div id="div_g" style="width:800px; height:400px;"></div>

的Javascript

var data = [];
      var t = new Date();
      for (var i = 10; i >= 0; i--) {
        var x = new Date(t.getTime() - i * 1000);
        data.push([x, Math.random()]);
      }

      var g = new Dygraph(document.getElementById("div_g"), data,
                          {
                            drawPoints: true,
                            showRoller: true,
                            valueRange: [0.0, 1.2],
                            color: '#4292c6',
                            labels: ['Time', 'Random'],
                            strokeWidth: 2,
                            showRangeSelector: true    
                  });

      setInterval(function() {
        var x = new Date();  // current time
        var y = Math.random();
        data.push([x, y]);
        data.shift();
        g.updateOptions( { 'file': data } );
      }, 2000);

Answer 1

好的所以我实际上找到了一种方法，它看起来有点像一个技巧，但它有效并且它使用了dygraph对象的接口函数，所以这个解决方案看起来足够合法。

const goExtreme = dygraph.xAxisRange()[1] === dygraph.xAxisExtremes()[1];

dygraph.updateOptions({file: newData});

if (goExtreme) {
  dygraph.updateOptions({
    dateWindow: [dygraph.xAxisRange()[0], dygraph.xAxisExtremes()[1]]
  });
}

这里的技巧是首先更新 updateOptions 以更新图表中的数据，如示例中建议的那样。
然后使用相同的函数 updateOptions 使用当前 xAxis 最小值和 xAxis 最大值更新 dateWindow。
但是我们在更新数据之前确保最大值是极端值 (goExtreme)，因为我们不想在图表内选择一个范围时保持最大值。