Question

我正在使用来自https://smartadmin-ng2.github.io/#/graphs/dygraphs的DyGraph。我想用一个showRangSelector来控制两个dygraph。现在两个dygraph都有自己的rang选择器。但是我想控制一个rang选择器，因为两个rang选择器都有相同的功能。显示我想显示一个屏幕截图以便更好地理解。

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

我看过一个链接（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是一个数组，你想要同步的dygraph。

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

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

试试这个synchronizer.js并告诉我们你的结果。如果你没有让它发挥作用，当我有更多时间时，我会尽力帮助你。此致

为两个DyGraph设置一个showRangeSelector？

1 个答案: