dygraph - 同步缩放

Question

我正在尝试使用 JS 中的 Dygraphs 渲染>3 个图形。使用一些示例代码，我能够为我的工作创建一个假人，就像这样。

演示可以正常工作，但这是我的方案：

我正在尝试使用不同范围内的值渲染 3 个或更多图形。我想放大图表上的时间，我希望所有其他图表都随之缩放。现在，所述图表将被放大，其他图表将被搞砸：

$(document).ready(function() {
  var someData = [
    "2009/01/01,10,11,12n" +
    "2009/01/02,12,10,11n" +
    "2009/01/03,9,10,13n" +
    "2009/01/04,5,20,15n" +
    "2009/01/05,8,3,12n",
    "2009/01/01,510,511,512n" +
    "2009/01/02,518,510,511n" +
    "2009/01/03,519,510,513n" +
    "2009/01/04,525,520,515n" +
    "2009/01/05,508,513,512n",
    "2009/01/01,0.10,0.11,0.01n" +
    "2009/01/02,0.12,1,0.11n" +
    "2009/01/03,0.09,0.10,0.13n" +
    "2009/01/04,0.05,0.20,0.15n" +
    "2009/01/05,0.08,0.03,0.12n",
    "2009/01/01,110,111,112n" +
    "2009/01/02,112,110,111n" +
    "2009/01/03,109,110,113n" +
    "2009/01/04,105,120,115n" +
    "2009/01/05,108,103,112n"
  ];
  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,12n" +
    "2009/01/02,12,10,11n" +
    "2009/01/03,9,10,13n" +
    "2009/01/04,5,20,15n" +
    "2009/01/05,8,3,12n",
    "2009/01/01,510,511,512n" +
    "2009/01/02,518,510,511n" +
    "2009/01/03,519,510,513n" +
    "2009/01/04,525,520,515n" +
    "2009/01/05,508,513,512n",
    "2009/01/01,0.10,0.11,0.01n" +
    "2009/01/02,0.12,1,0.11n" +
    "2009/01/03,0.09,0.10,0.13n" +
    "2009/01/04,0.05,0.20,0.15n" +
    "2009/01/05,0.08,0.03,0.12n",
    "2009/01/01,110,111,112n" +
    "2009/01/02,112,110,111n" +
    "2009/01/03,109,110,113n" +
    "2009/01/04,105,120,115n" +
    "2009/01/05,108,103,112n"
  ];
  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>