Dygraphs - 同步缩放

Question

我正在尝试使用 JS 中的 Dygraphs 渲染 >3 个图形。 使用一些示例代码，我能够为我的工作创建一个虚拟对象，就像 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>