我指的是http://dygraphs.com/tests/synchronize.html。
现在我自己的实现也给了我适合,这并不奇怪,因为我将它作为官方示例的编辑版本开发。
试试这个:在页面加载时转到四个图形中的任何一个,在中间的一个瘦小部分进行放大(从左到右点击拖动);然后双击。
发生什么事了?您放大并且曲线垂直填充图形,但是稍微填充---自动缩放。然后在双击时缩小一切似乎与之前一样。啊......但除非你重新加载页面,否则它仍然没有。
现在移动到四个图形中的任何一个并重复第一步...放大同一个瘦小的点(这些图形的数据恰好相同)。请注意,缺少自动垂直缩放。在重新加载页面之前,这是所有四个图表中的永久条件。
这是在Ubuntu 12.04 LTS上的最新版本的Firefox。您只需查看网页源即可看到Javascript。我一直在想它与blockRedraw布尔值的因果关系有关,但是我的更复杂的努力还没有完成。
答案 0 :(得分:0)
我相信我最适合回答我自己的问题,虽然这有点尴尬。在发布问题后,我在这个简单的事情上烧了好几个小时。这是代码和答案:
` <script type="text/javascript">
gs = [];
var blockRedraw = false;
var initialized = false;
for (var i = 1; i <= 4; i++) {
gs.push(
new Dygraph(
document.getElementById("div" + i),
NoisyData, {
rollPeriod: 7,
errorBars: true,
drawCallback: function(me, initial) {
if (blockRedraw || initial) return;
blockRedraw = true;
var range = me.xAxisRange();
//var yrange = me.yAxisRange();
for (var j = 0; j < 4; j++) {
if (gs[j] == me) continue;
gs[j].updateOptions( {
dateWindow: range/*,
valueRange: yrange*/
} );
}
blockRedraw = false;
}
}
)
);
}
</script>`
那里的代码直接从dygraphs.com synchronize.html页面复制,除了我已经注释掉var yrange = me.yAxisRange()以及updateOptions()参数的valueRange部分。
显然,如果你把这些范围值放在那里,你就会阻止发生自动缩放。我真的不知道幕后发生了什么,但这似乎就是这笔交易。它解决了我自己的类似实现的问题。 (也就是说,我发现dygraphs.com提供的jsfiddle版本实际上并没有绘制图形,因此无法进行测试。所以我只在我的版本上进行了测试,这几乎是相同的。)< / p>