对 dygraphs 的实时更新和对 rangeSelector 位置的影响答案

【问题标题】：live update to dygraphs and impact on rangeSelector position对 dygraphs 的实时更新和对 rangeSelector 位置的影响
【发布时间】：2021-02-27 21:46:41
【问题描述】：

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

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

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

Moreover, when the range is selected, the data points in the main chart window become static, which is also useless.除非用户移动范围把手，否则不应移动范围把手，实时数据应在主图表和范围滑块内的图表中明显移动。

我认为期望的行为是：

主图表应反映实时更新。（当前，当它“卡”在由范围手柄移动设置的窗口上时，它不会反映更新，除非手柄开始从画布上脱落。）
主图表应保持限制在 rangeSelector 句柄所施加的窗口内，其中“窗口”表示不是开始时间和结束时间，而是时间窗口 strong> 手柄间距表示。因此，即使 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);

【问题讨论】：

我不太确定你想要什么。如果要在每次更新时重置视图窗口，可以使用dateWindow 参数。
@danvk - 再次尝试澄清问题。有趣的是，如果您将右侧滑动手柄靠近左侧，则可以在人力车中复制相同的问题。 code.shutterstock.com/rickshaw/examples/extensions.html
所以您希望范围句柄对应于数据域的 45-50%，无论这些值是什么？就像我之前说的，如果你想要一些不寻常的东西，你必须在调用 updateOptions 时自己更新可见范围。
@danvk - Highcharts 做得对，我只是不明白 dygraphs 是如何做到的。 highcharts.com/stock/demo/dynamic-update

标签： dygraphs

【解决方案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)，因为我们不想在图表内选择范围时保持最大值。

【讨论】：