ラベル HTML の投稿を表示しています。 すべての投稿を表示
ラベル HTML の投稿を表示しています。 すべての投稿を表示

2013年10月14日月曜日

Multiple Dygraph in Twitter Bootstrap based Tab

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 プロパティを削除しています。