为两个DyGraph设置一个showRangeSelector？

我使用的是来自https://smartadmin-ng2.github.io/#/graphs/dygraphs的DyGraph。我想用一个showRangSelector来控制两个dygraph。现在这两个dygraph都有自己的选择器。但我想用一个响铃选择器来控制，因为两个响铃选择器都有相同的工作。显示我想显示一个屏幕截图以获得更多理解。为两个DyGraph设置一个showRangeSelector？

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有两个timeselector（响选择）。所以我想通过一个选择器控制两个dygraph。

我看到一个链接（DYGraphs: Control multiple graphs with one RangeSelector我没有得到有关http://dygraphs.com/gallery/#g/range-selector solution.My的问题，你可以点击的jsfiddle按钮的代码在这个环节，这个问题对我来说是很重要的。你的回答将是我非常有价值的。

来源

2017-04-20 V SH

如果你想用相同的范围内选择以控制图形您对图形dygraphs文档like in this example同步。当曲线是同步的，在范围内选择显示的作品同步的所有图表，这样你就可以只用一个范围选择器或甚至两者，但他们将被链接。

要使用此功能哟你必须使用synchronizer.js。它很容易使用，你只需要使用下面的代码，其中gs是一个数组，并且你想要同步的dygraph。

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

我不熟悉角度，但我认为它也会工作。

试试这个synchronizer.js并告诉我们你的结果。如果你没有成功，我会在有更多时间的时候帮助你。此致

来源

2017-04-20 23:10:48

我的推杆synchronizer.js，但是，在应该使用VAR同步= Dygraph.synchronize（GS，{ 变焦：真，选择：真，范围：假 }）; 。谢谢 –

我用更多的代码和解释更新了我的问题，以便更好地理解。 –

为两个DyGraph设置一个showRangeSelector？

回答

相关问题