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);

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

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

任何人都有使用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，最好通过dygraphs.com/fiddle链接到repro。

Answer 2

这是一个有效的解决方案，但我必须更改＆＃34; synchronizer.js＆＃34;来自dygraphs，所以仍然欢迎评论和其他建议。

在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实时趋势和同步

2 个答案: