Dygraphs - synchrones Zoomen

Question

Ich versuche> 3 Graphen mit Dygraphs in JS zu rendern. Mit einigen Beispielcodes konnte ich einen Dummy für meine Arbeit erstellen, genau wie this.

Die Demo funktioniert, wie es soll, aber hier ist mein Szenario:

ich zu machen versuchen, 3 oder mehr Graphen mit Werten aus verschiedenen Bereichen. Ich möchte eine Zeit in einem Graphen vergrößern und möchte, dass alle anderen Graphen damit zoomen. Gerade jetzt, sagte Diagramm gezoomt werden, und die anderen werden werden verkorkste:

$(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>

Für mich sieht es so aus, die anderen Graphen, die die gleichen Wertebereich angezeigt werden soll für die ausgewählte Zeit. Wenn dies der Fall ist, muss ich dann die anderen Diagramme irgendwie neu zeichnen?

Answer 1

Unten habe ich Ihren Code geändert (nur 2 Zeilen) und jetzt denke ich, es funktioniert wie Sie brauchen.

Innerhalb der Synchronisierungsoptionen habe ich die Option "range" auf false gesetzt. Mit dieser Option ist die Y-Achse nicht synchronisiert, was Sie brauchen.

Die andere Sache, die ich getan habe, ist einen Aufruf zu zwingen, update() nach der Graphen-Synchronisation. In der Art, wie Sie den Code hatten, wurde das Update nicht aufgerufen, bis ein Kontrollkästchen geändert wurde, so dass die Graphensynchronisierung bei der ersten nicht funktionierte.

Ich hoffe, das Ihnen helfen könnte, und sorry für nicht, bevor er antwortete;)

$(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>