Dygraphs 实时趋势和同步

Question

我的页面上有两个 dygraphs。定期从源读取新的时间序列数据并将其写入局部变量，然后使用以下命令更新图形：

    vm.graph1.updateOptions(
      { 'file': customData1, 'labels': vm.labels1 });
    vm.graph2.updateOptions(
      { 'file': customData2, 'labels': vm.labels2 });

这工作得很好，图表显示了预期的实时趋势。但是，当我尝试通过包含 syncrhonizer.js 并使用以下命令来同步这两个图时：

vm.graphSync = Dygraph.synchronize(vm.graph1, vm.graph2);

然后 "live updates" 停止工作。换句话说，图表不显示任何新的传入值（它只显示相同的静态时间跨度）。同步工作正常，无论是选择还是缩放。

数据仍在更新，但现在我必须双击图表（或手动平移）才能查看最新数据。

有人对使用 Dygraphs 同步实时趋势有任何想法或可行的解决方案吗？

Answer 1

您需要在更新数据后显式设置 dateWindow：

vm.graph1.updateOptions(
  { 'file': customData1, 'labels': vm.labels1 });
vm.graph2.updateOptions(
  { 'file': customData2, 'labels': vm.labels2 });
vm.graph1.updateOptions({
  dateWindow: vm.graph1.xAxisExtremes()
});
// ^^^ this will synchronize the other charts, too

你必须这样做的事实可以被认为是同步器的一个错误。随意 file an issue 反对 dygraphs，最好是 link 通过 dygraphs 进行复制。com/fiddle。

Answer 2

这是一个可行的解决方案，但是，我不得不从 dygraphs 更改 "synchronizer.js"，因此仍然欢迎提出意见和其他建议。

在 synchronizer.js 中的 attachZoomHandlers 函数中，我做了以下更改：

for (var j = 0; j < gs.length; j++) {
    if (gs[j] == me) continue;

    //added if/else block, the original code was the stuff inside else block
    if (me.ignoreXrangeSync && me.ignoreXrangeSync === true) {
        //if ignoreXrangeSync flag is set, only update y-range
        gs[j].updateOptions( {
           valueRange: yrange
       });
    }
    else {
      //if ignoreXrangeSync flag is NOT set, run original code (so manual zoom works)
      gs[j].updateOptions( {
         dateWindow: range,
         valueRange: yrange
      });
   }
}

在我的原始代码中，我做了这个更改。

vm.graph1.ignoreXrangeSync = vm.graph2.ignoreXrangeSync = true;
vm.graph1.updateOptions(
      { 'file': customData1, 'labels': vm.labels1 });
vm.graph2.updateOptions(
      { 'file': customData2, 'labels': vm.labels2 });
vm.graph1.ignoreXrangeSync = vm.graph2.ignoreXrangeSync = false;

此外，我需要为我的图表添加这些缩放回调（每个图表一个），以便在手动放大图表后双击开始实时趋势。

var graph1ZoomCallback = function () {   //callback for graph1
    if(!vm.graph1.isZoomed()) {          //if graph1 has been double clicked
      vm.graph2.ignoreXrangeSync = true; //note, graph2
      vm.graph2.resetZoom();
      vm.graph2.ignoreXrangeSync = false;
    }
}

Dygraphs 实时趋势和同步

Dygraphs live trending and synchronization

javascript

dygraphs