2つのDyGraphに対して1つのshowRangeSelectorを設定しますか？

Question

私はhttps://smartadmin-ng2.github.io/#/graphs/dygraphsからDyGraphを使用しています。 1つのshowRangSelectorで2つのグラフを制御したい。今の両方のグラフには、独自のラングセレクタがあります。しかし、私は1つのラングセレクタで制御したい、なぜなら両方のラングセレクタは同じ作業をしているからです。ショー私はより理解のために1つのスクリーンショットを表示したい。

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> 

あなたはスクリーンショットが表示された場合それではuが見ることができる2つのdygraphている2 timeselector（鳴ったセレクタ） 。だから私は1つのラングセレクタで両方のグラフをコントロールしたい。

私は解決策を得られませんでした（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は、同期させるダイグラフの配列です。

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

私は角度に慣れていませんが、それも動作すると思います。

このsynchronizer.jsを試して、結果を教えてください。それを働かせることができなければ、私はもっと時間があるときにあなたを助けようとします。よろしく