问双图-同步缩放

EN

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