This post is a response to "Multiple Dygraph is not working in Twitter bootstrap based Tab !"
Bootstrap の tab に dygraph.js でグラフを描画している時に、「タブを切り替えるとグラフが正しく描画されない」という問題があります。より正確に言えば、「初期状態で非表示の領域にグラフを描画すると問題がおきる」でしょうか。
参考：Issue 238 - dygraphs - Canvas & container div have zero height and width when parent is invisible.
対策としてはリンク先でも述べられている通り、グラフが格納された div 要素が表示されたら、 Dygraph インスタンスの .resize() メソッドを実行すれば表示はされます。ただし、高さと幅が初期値に固定されてしまいます。これを防ぐために、描画領域の要素から style プロパティを削除しています。
Demo
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="jquery-2.0.3.min.js"></script>
<!-- Bootstrap -->
<script src="tab.js"></script>
<link href="bootstrap.min.css" rel="stylesheet" media="screen">
<!-- Dygraphs -->
<script src="dygraph-combined.js"></script>
<!-- CSS for resizable graph -->
<style>
.dygraph-wrapper {
position: relative;
height: 300px;
}
.dygraph-target {
position: absolute;
top: 20px;
left: 0px;
bottom: 50px;
right: 20px;
}
</style>
</head>
<body>
<div class="container">
<ul class="nav nav-tabs">
<li class="active"><a href="#tab1">tab1</a></li>
<li><a href="#tab2">tab2</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<div class="dygraph-wrapper">
<div class="dygraph-target"></div>
</div>
</div>
<div class="tab-pane" id="tab2">
<div class="dygraph-wrapper">
<div class="dygraph-target"></div>
</div>
</div>
</div>
</div>
<script>
// list of dygraph object
var graphs = [];
$(document).ready(function() {
$(".nav-tabs a").click(function(event) {
event.preventDefault();
$(this).tab('show');
var target_id = $(this).attr("href");
// clear the default style properties.
$(target_id).find(".dygraph-target").removeAttr("style");
graphs[target_id].resize();
});
$(".dygraph-target").each(function() {
var random_data = [];
for (i = 0; i < 10; i++) {
random_data.push([
new Date(2013, 9, i + 1),
Math.random()
]);
}
g = new Dygraph($(this)[0], random_data);
// append the dygraph object to the list
graphs["#" + $(this).parents(".tab-pane").attr("id")] = g;
});
});
</script>
</body>
</html>
0 件のコメント:
コメントを投稿