为两个 DyGraph 设置一个 showRangeSelector？

Question

我正在使用来自https://smartadmin-ng2.github.io/#/graphs/dygraphs 的 DyGraph。我想用一个 showRangSelector 控制两个 dygraph。现在两个 dygraph 都有自己的范围选择器。但是我想用一个范围选择器来控制，因为两个范围选择器都有相同的工作。显示我想显示一个屏幕截图以便更好地理解。

dygraphsNoRollTimestamp.js

angular.module('app.xyz').directive('dygraphsNoRollTimestamp', function (DygraphsDataDemo) {
    return {
        restrict: 'A',
        compile: function () {
            return {
                 post: function (scope, element) {
                    new Dygraph(element[0], DygraphsDataDemo.data_total_volume, {
                        customBars: true,
                        title: '',
                        ylabel: 'Total Volume',
                        legend: 'always',
                        labelsDivStyles: {
                            'textAlign': 'right'
                        },
                        showRangeSelector: true
                    });
                }
            }
        }
    }
});

dygraphsNoRollPeriod.js

'use strict';

angular.module('app.xyz').directive('dygraphsNoRollPeriod', function (DygraphsDataDemo) {
    return {
        restrict: 'A',
        compile: function () {
            return {
                post: function (scope, element) {
                    new Dygraph(element[0], DygraphsDataDemo.data_temp, {
                        customBars: true,
                        title: '',
                        ylabel: 'Total Volume',
                        legend: 'always',

                        showRangeSelector: true
                    });
                }
            }
        }

    }
});

DygraphsDataDemo.js

angular.module('app.air').factory('directory', function(){
      function data_temp() {
        return "Date,NY,SF\n20070101,46;51;\n20070102,47;60;\n;\n20070102,90;38;\n";
    }
    function data_total_volume() {
        return "Date,NY,SF\n20070101,26;91;\n20070102,27;30;\n;\n20070102,20;38;\n";
    }    

    return {

        data_temp: data_temp,
        data_total_volume: data_total_volume

    }
})

controller.js

angular.module('app.xyz').controller('dcontroller',function ($scope) {     


});

index.html

 <div jarvis-widget id="dygraphs-chart-1" data-widget-editbutton="false">
       <div>
          <div class="widget-body">
              <div dygraphs-no-roll-period style="width: 100%;height: 300px;"></div>
        </div>
        <div class="widget-body">

                            <!-- this is what the user will see -->
          <div dygraphs-no-roll-timestamp  style="width: 100%;height: 300px;"></div>
       </div>
  </div>

所以如果您看到屏幕截图，那么您可以看到两个 dygraph 有两个时间选择器（范围选择器）。所以我想通过一个范围选择器来控制两个 dygraph。

我看过一个链接（DYGraphs: Control multiple graphs with one RangeSelector我没有得到解决方案。我的问题与http://dygraphs.com/gallery/#g/range-selector有关。您可以单击此链接中的代码的jsfiddle按钮。这个问题对我很重要。您的回答将非常有价值对我来说。

Answer 1

如果您想使用相同的范围选择器控制两个图表，您必须同步 dygraphs 文档的图表like in this example。当图表同步时，显示的范围选择器适用于所有同步的图表，因此您可以只使用一个范围选择器，甚至两者都使用，但它们将被链接。

要使用此功能，您必须使用synchronizer.js。它易于使用，您只需使用下面的代码，其中 gs 是一个包含您要同步的 dygraphs 的数组。

var sync = Dygraph.synchronize(gs, {
   zoom: true,
   selection: true,
   range: false
});

我不熟悉 Angular，但我认为它也会起作用。

试试这个 synchronizer.js 并告诉我们你的结果。如果你不能让它发挥作用，当我有更多时间时，我会尽力帮助你。问候