Dygraphs - синхронное масштабирование

Question

Я пытаюсь сделать> 3 графика, используя Dygraphs в JS. Используя некоторые примеры кодов, я смог создать манекен для моей работы, как и this.

демо работает как надо, но вот мой сценарий:

Я пытаюсь сделать 3 или более графики со значениями из разных диапазонов. Я хочу увеличить время по периметру на графике, и я хочу, чтобы все остальные графики увеличивались с ним. Прямо сейчас, сказал граф будет увеличен, а остальные будут перепутались:

$(document).ready(function() { 
 
    var someData = [ 
 
    "2009/01/01,10,11,12\n" + 
 
    "2009/01/02,12,10,11\n" + 
 
    "2009/01/03,9,10,13\n" + 
 
    "2009/01/04,5,20,15\n" + 
 
    "2009/01/05,8,3,12\n", 
 

 
    "2009/01/01,510,511,512\n" + 
 
    "2009/01/02,518,510,511\n" + 
 
    "2009/01/03,519,510,513\n" + 
 
    "2009/01/04,525,520,515\n" + 
 
    "2009/01/05,508,513,512\n", 
 

 
    "2009/01/01,0.10,0.11,0.01\n" + 
 
    "2009/01/02,0.12,1,0.11\n" + 
 
    "2009/01/03,0.09,0.10,0.13\n" + 
 
    "2009/01/04,0.05,0.20,0.15\n" + 
 
    "2009/01/05,0.08,0.03,0.12\n", 
 

 
    "2009/01/01,110,111,112\n" + 
 
    "2009/01/02,112,110,111\n" + 
 
    "2009/01/03,109,110,113\n" + 
 
    "2009/01/04,105,120,115\n" + 
 
    "2009/01/05,108,103,112\n" 
 
    ]; 
 
    var graphs = ["x", "foo", "bar", "baz"]; 
 
    var titles = ['', '', '', '']; 
 
    var gs = []; 
 
    var blockRedraw = false; 
 
    for (var i = 1; i <= 4; i++) { 
 
    gs.push(
 
     new Dygraph(
 
     document.getElementById("div" + i), 
 
     someData[i - 1], { 
 
      labels: graphs, 
 
      title: titles[i - 1], 
 
      legend: 'always' 
 
     } 
 
    ) 
 
    ); 
 
    } 
 
    var sync = Dygraph.synchronize(gs); 
 

 
    function update() { 
 
    var zoom = document.getElementById('chk-zoom').checked; 
 
    var selection = document.getElementById('chk-selection').checked; 
 
    sync.detach(); 
 
    sync = Dygraph.synchronize(gs, { 
 
     zoom: zoom, 
 
     selection: selection 
 
    }); 
 
    } 
 
    $('#chk-zoom, #chk-selection').change(update); 
 
});

.chart { 
 
    width: 500px; 
 
    height: 300px; 
 
    } 
 
    .chart-container { 
 
    overflow: hidden; 
 
    } 
 
    #div1 { 
 
    float: left; 
 
    } 
 
    #div2 { 
 
    float: left; 
 
    } 
 
    #div3 { 
 
    float: left; 
 
    clear: left; 
 
    } 
 
    #div4 { 
 
    float: left; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://dygraphs.com/dygraph.js"></script> 
 
<script src="http://dygraphs.com/src/extras/synchronizer.js"></script> 
 

 
<p>Zooming and panning on any of the charts will zoom and pan all the others. Selecting points on one will select points on the others.</p> 
 
<p>To use this, source <a href="https://github.com/danvk/dygraphs/blob/master/src/extras/synchronizer.js"><code>extras/synchronizer.js</code></a> on your page. See the comments in that file for usage.</p> 
 
<div class="chart-container"> 
 
    <div id="div1" class="chart"></div> 
 
    <div id="div2" class="chart"></div> 
 
    <div id="div3" class="chart"></div> 
 
    <div id="div4" class="chart"></div> 
 
</div> 
 
<p> 
 
    Synchronize what? 
 
    <input id="chk-zoom" checked="" type="checkbox"> 
 
    <label for="chk-zoom">Zoom</label> 
 
    <input id="chk-selection" checked="" type="checkbox"> 
 
    <label for="chk-selection">Selection</label> 
 
</p>

Для меня это выглядит так, как другие графики хотят показать один и тот же диапазон значений выбранный период времени. Если это так, то мне просто нужно каким-то образом перерисовать другие графики?

Answer 1

Ниже я изменил код (только 2 строки), и теперь я думаю, что он работает по мере необходимости.

Внутри параметров синхронизации я добавил параметр «диапазон» равным false. С помощью этой опции ось y не синхронизируется, что вам и нужно.

Другое, что я сделал, это принудительный вызов update() после синхронизации графиков. В способе, которым у вас был код, обновление не вызывалось до тех пор, пока флажок не был изменен, поэтому при первой синхронизации графика не работала.

Я надеюсь, что это может помочь вам и жаль, что не отвечая раньше;)

$(document).ready(function() { 
 
    var someData = [ 
 
    "2009/01/01,10,11,12\n" + 
 
    "2009/01/02,12,10,11\n" + 
 
    "2009/01/03,9,10,13\n" + 
 
    "2009/01/04,5,20,15\n" + 
 
    "2009/01/05,8,3,12\n", 
 

 
    "2009/01/01,510,511,512\n" + 
 
    "2009/01/02,518,510,511\n" + 
 
    "2009/01/03,519,510,513\n" + 
 
    "2009/01/04,525,520,515\n" + 
 
    "2009/01/05,508,513,512\n", 
 

 
    "2009/01/01,0.10,0.11,0.01\n" + 
 
    "2009/01/02,0.12,1,0.11\n" + 
 
    "2009/01/03,0.09,0.10,0.13\n" + 
 
    "2009/01/04,0.05,0.20,0.15\n" + 
 
    "2009/01/05,0.08,0.03,0.12\n", 
 

 
    "2009/01/01,110,111,112\n" + 
 
    "2009/01/02,112,110,111\n" + 
 
    "2009/01/03,109,110,113\n" + 
 
    "2009/01/04,105,120,115\n" + 
 
    "2009/01/05,108,103,112\n" 
 
    ]; 
 
    var graphs = ["x", "foo", "bar", "baz"]; 
 
    var titles = ['', '', '', '']; 
 
    var gs = []; 
 
    var blockRedraw = false; 
 
    for (var i = 1; i <= 4; i++) { 
 
    gs.push(
 
     new Dygraph(
 
     document.getElementById("div" + i), 
 
     someData[i - 1], { 
 
      labels: graphs, 
 
      title: titles[i - 1], 
 
      legend: 'always' 
 
     } 
 
    ) 
 
    ); 
 
    } 
 
    var sync = Dygraph.synchronize(gs); 
 
    update(); 
 
    
 
    function update() { 
 
    var zoom = document.getElementById('chk-zoom').checked; 
 
    var selection = document.getElementById('chk-selection').checked; 
 
    sync.detach(); 
 
    sync = Dygraph.synchronize(gs, { 
 
     zoom: zoom, 
 
     range: false, 
 
     selection: selection 
 
    }); 
 
    } 
 
    $('#chk-zoom, #chk-selection').change(update); 
 
});

.chart { 
 
    width: 500px; 
 
    height: 300px; 
 
    } 
 
    .chart-container { 
 
    overflow: hidden; 
 
    } 
 
    #div1 { 
 
    float: left; 
 
    } 
 
    #div2 { 
 
    float: left; 
 
    } 
 
    #div3 { 
 
    float: left; 
 
    clear: left; 
 
    } 
 
    #div4 { 
 
    float: left; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://dygraphs.com/dygraph.js"></script> 
 
<script src="http://dygraphs.com/src/extras/synchronizer.js"></script> 
 

 
<p>Zooming and panning on any of the charts will zoom and pan all the others. Selecting points on one will select points on the others.</p> 
 
<p>To use this, source <a href="https://github.com/danvk/dygraphs/blob/master/src/extras/synchronizer.js"><code>extras/synchronizer.js</code></a> on your page. See the comments in that file for usage.</p> 
 
<div class="chart-container"> 
 
    <div id="div1" class="chart"></div> 
 
    <div id="div2" class="chart"></div> 
 
    <div id="div3" class="chart"></div> 
 
    <div id="div4" class="chart"></div> 
 
</div> 
 
<p> 
 
    Synchronize what? 
 
    <input id="chk-zoom" checked="" type="checkbox"> 
 
    <label for="chk-zoom">Zoom</label> 
 
    <input id="chk-selection" checked="" type="checkbox"> 
 
    <label for="chk-selection">Selection</label> 
 
</p>