Ukryte elementy nie są poprawnie ładowane po wyświetleniu

Question

Mam stronę z przełączaną zakładką, która ma 10 oddzielnych kart zawierających wykresy. Po kliknięciu każdej zakładki pojawia się wstępnie załadowany odpowiedni wykres. Jednak nie skaluje się do swojego kontenera. Bardziej dziwne jest to, że gdy zmieniam rozmiar okna, widoczny wykres jest wyświetlany prawidłowo (przypuszczam, że robi to trochę rekalkulacji). W jaki sposób powinienem zmodyfikować mój kod tak, aby wykonywał to przeliczanie po kliknięciu lub sugestie dotyczące problemu?

Oto moja 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--> 

Przed rozmiaru

Po rozmiaru, rozmiar jest w porządku

nie może zawierać wykresy w moim jsfiddle ponieważ zawierają trochę kodu ruby.

PS: Używanie Chartkick i Google Charts do rysowania wykresów i MetronicJS dla kart.

Edytuj: Pierwszy wykres, który jest domyślnie widoczny, jest wyświetlany prawidłowo, ale inne nie. Po zmianie rozmiaru okna, gdy inny wykres jest widoczny, poprzednia zostaje ponownie złamana.

Answer 1

Można programowo ognia zdarzenie „resize”:

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

Wystarczy podłączyć go do zdarzenia „click”, który przedstawia kartę.

W twoim przypadku:

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

Jeśli urządzenie nie reagują na zmianę rozmiaru, jak na razie, może faktycznie zmienić rozmiar okna z:

window.resizeTo(width, height); 

UPDATE:

Jeśli nie można zmienić rozmiaru okna (patrz komentarze), możesz spróbować przerysować wykres, gdy karta stanie się widoczna. Być może w ten sposób wykres jest w stanie dokładnie obliczyć wymiary, które musi zmieścić. Coś takiego:

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

Mam nadzieję, że pomoże!