javascript - 为两个 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 按钮获取此链接中的代码。这个问题对我来说很重要。您的回答将非常有值(value)对我来说。

Answer 1

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

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

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

我不熟悉 Angular ，但我认为它也可以工作。

尝试这个synchronizer.js 并告诉我们您的结果。如果您无法成功，我会在有更多时间时尽力为您提供更好的帮助。问候