隱藏的元素在顯示後未正確加載

Question

我有一個選項卡式切換統計信息頁面，其中有10個包含圖表的單獨選項卡。通過點擊每個標籤，正在顯示預裝的相應圖表。但是，它不會擴展到其容器中。更奇怪的是，當我調整窗口大小時，可視圖表顯示正確（我想它會進行一些重新計算）。我應該如何修改我的代碼，以便在點擊後進行重新計算，或對問題提出任何建議？

這裏是我的jsfiddle： http://jsfiddle.net/g66ut7c6/

<!--BEGIN TABS--> 
       <div class="tabbable tabbable-custom"> 
        <ul class="nav nav-tabs"> 
        <li> 
         <a href="#tab_1_1" data-toggle="tab"> 
         1 
         </a> 
        </li> 
        <li> 
         <a href="#tab_1_2" data-toggle="tab"> 
         2 
         </a> 
        </li> 
        <li> 
         <a href="#tab_1_3" data-toggle="tab"> 
         3 
         </a> 
        </li> 
        </ul> 
        <div class="tab-content"> 
        <div class="tab-pane" id="tab_1_1"> 
         <div class="scroller"> 
          <div class="col-md-6 col-md-offset-3"> 
           <div class="portlet light"> 
           <p> Piechart by ülkeler </p> 

           </div> 
          </div> 
         </div> 
        </div> 
        <div class="tab-pane" id="tab_1_2"> 
         <div class="scroller"> 
          <div class="col-md-6 col-md-offset-3"> 
           <div class="portlet light"> 
           <p> Piechart by step dağılımı </p> 

           </div> 
          </div> 
         </div> 
        </div> 
        <div class="tab-pane" id="tab_1_3"> 
         <div class="scroller"> 
          <div class="col-md-6 col-md-offset-3"> 
           <div class="portlet light"> 
           <p> Piechart by hasta sayısı ay </p> 

           </div> 
          </div> 
         </div> 
        </div> 
        </div> 
       </div> 
       <!--END TABS--> 

之前調整

調整大小後，大小是沒關係

我可以不包括在我的jsfiddle圖表，因爲它們含有一些紅寶石代碼。 PS：使用Chartkick和Google Charts繪製圖表，MetronicJS繪製標籤。

編輯：默認情況下可見的第一個圖表初始顯示正確，但其他圖表不是。當另一個圖表可見時調整窗口大小後，前一個會再次被打破。

Answer 1

可以通過編程火「調整大小」事件：

window.dispatchEvent(new Event('resize')); 

只需將其連接到顯示選項卡中的「點擊」事件。

你的情況：

window.resizeTo(width, height); 

UPDATE：

$('div.tabbable > ul > li > a').click(function() { 
    window.dispatchEvent(new Event('resize')); 
}); 

如果你的組件不調整爲響應該事件，你可以實際上調整窗口的大小

如果無法調整窗口大小（請參閱評論），則可以嘗試在選項卡變爲可見時重新繪製圖表。也許這樣圖表能夠正確計算出它需要的尺寸。例如：

$('div.tabbable > ul > li > a').click(function() { 
    myChart.draw(myData); 
}); 

希望它有幫助！