두 개의 DyGraph에 대해 하나의 showRangeSelector를 설정 하시겠습니까?

Question

https://smartadmin-ng2.github.io/#/graphs/dygraphs에서 DyGraph를 사용하고 있습니다. 하나의 showRangSelector로 두 개의 대화창을 제어하려고합니다. 다이어그램에는 두 개의 그래프가 있습니다. 하지만 나는 하나의 울리는 선택기로 제어하고 싶습니다. 왜냐하면 두 개의 선택기 모두 동일한 작업을 수행하기 때문입니다. Show 더 많은 이해를 위해 하나의 스크린 샷을 보여주고 싶습니다.

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는 볼 수있는 두 개의 dygraph이 두 timeselector (울렸다 선택) . 그래서 하나의 울리는 선택자로 두 그래프를 모두 제어하려고합니다.

나는 하나의 링크를 보았다. (DYGraphs: Control multiple graphs with one RangeSelector 나는 해결책을 얻지 못했다. 내 질문은 http://dygraphs.com/gallery/#g/range-selector과 관련있다.이 링크의 코드는 jsfiddle 버튼을 클릭 할 수있다.이 질문은 나를 위해 중요하다.

Answer 1

동일한 범위 선택기로 두 그래프를 모두 제어하려는 경우 dygraphs 문서의 like in this example 그래프를 동기화해야합니다. 그래프가 동기화되면 모든 그래프에 대해 범위 선택기가 동기화되므로 하나만 사용할 수 있습니다 범위 선택기 또는 둘 다 연결되지만 연결될 것입니다.

이 기능을 사용하려면 요 u는 synchronizer.js을 사용해야합니다. 사용하기 쉽습니다. gs가 동기화하려는 다이 그래프가있는 배열 인 아래 코드 만 사용하면됩니다.

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

각도에 익숙하지 않지만 잘 작동한다고 생각합니다.

이 synchronizer.js를 시도하고 결과를 알려주십시오. 당신이 더 이상 시간을 보내지 않으면 나는 당신을 더 잘 돕도록 노력할 것입니다. 감사합니다