將Dygraph集成到Twitter的Bootstrap Carousel元素中

我試圖在我的網站上顯示不同情節的幻燈片輪播。這些圖是用Dygraph完成的。我可以得到其中一張地圖，但是當我向左或向右滑動時，另一張不顯示。只顯示我激活的情節。這是bootstrap carousel/dygprah之間的一些畫布繪製衝突嗎？將Dygraph集成到Twitter的Bootstrap Carousel元素中

有沒有人解決過這個問題？如果我使第一個項目處於活動狀態，它將顯示第一個繪圖，但在滑動時不顯示第二個繪圖，反之亦然，如果我使第二個項目處於活動狀態。更令人好奇的是，如果我讓他們兩個都「活躍」，他們都會同時顯示（一個在另一個之上），但是隨後滑動，我正確地將這兩個圖顯示在正確的位置。這裏是我的旋轉木馬代碼：

<div id="myCarousel" class="carousel slide"> 
    <div class="carousel-inner"> 
      <div class="item active" id="plot1" style="height:300px;"></div> 
      <div class="item" id="plot2" style="height:300px;"></div> 
     </div> 
     <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a> 
     <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a> 
</div>

和腳本生成dygraph圖：

<script type="text/javascript" charset="UTF-8"> 
    $(function() { 
     var plotdiv = document.getElementById("plot1"); 
     new Dygraph(plotdiv,csvdata,{}); 
     plotdiv = document.getElementById("plot2"); 
     new Dygraph(plotdiv,csvdata, {}); 
     return true; 
    }) 
</script>

感謝所有幫助

來源

2012-03-12 mpaf

你可能會遇到這個問題，： http://code.google.com/p/dygraphs/issues/detail?id=238

將其明星接收更新並提高修復的優先級。解決方法是在dygraph對象變爲可見時調用g.resize（），以強制它重新計算其繪圖區域。

來源

2012-03-12 20:18:52 danvk

謝謝你指出我在正確的方向，我目前的解決方法是，我打電話resize與構造的Dygraph對象正確的div寬度和高度，它會正確顯示在旋轉木馬（無需處理旋轉木馬事件 - 雖然這可能不夠優雅，我可以調用resize（）以適應底層的div尺寸;如果設計更改，我需要更改我的寬度，高度）。 – mpaf 2012-03-13 07:04:44

將Dygraph集成到Twitter的Bootstrap Carousel元素中

回答

相關問題