1
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>は、他のグラフは、のために同じ値の範囲を表示したい： は今、グラフをズームされ、他の人が台無しにしようとしていると述べました選択された時間ペイロイド。この場合、他のグラフを何とか再描画するだけですか？
が答え@Lucidioいただきありがとうございます、私は機会を持っているとき、私はそれをしようとします！ – ferencboi