Установить один showRangeSelector для двух DyGraph?

Question

Я использую DyGraph из https://smartadmin-ng2.github.io/. Я хочу управлять двумя графиками с помощью одного showRangSelector. Прямо сейчас у обоих 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>

Так что, если вы видите снимок экрана, то вы можете увидеть, что два дизографа имеют два временных селектора (звонка селектора). Поэтому я хочу управлять обоими дизграфами одним селектором.

Я видел одну ссылку ( DYGraphs: управление несколькими графиками с помощью одного RangeSelector. Я не получил решения. Мой вопрос связан с http://dygraphs.com/gallery/. Вы можете нажать кнопку jsfiddle для кода в этом ссылка. Этот вопрос важен для меня. Ваш ответ будет очень ценным для меня.

Answer 1

Если вы хотите управлять обоими графиками с помощью одного и того же селектора диапазона, вы должны синхронизировать графики, как в этом примере документации dygraphs. Когда графики синхронизированы, отображаемые селекторы диапазонов работают для всех синхронизированных графиков, поэтому вы можете использовать только один селектор диапазонов или даже оба, но они будут связаны между собой.

Чтобы использовать эту функцию, вы должны использовать synchronizer.js. Его легко использовать, вам нужно использовать только код ниже, где gs - это массив с графиками, которые вы хотите синхронизировать.

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

Я не знаком с Angular, но я думаю, что это будет работать.

Попробуйте этот synchronizer.js и расскажите нам о своих результатах. Если вам не удастся заставить это работать, я постараюсь помочь вам лучше, когда у меня будет больше времени. С уважением