Скрытые элементы не загружаются должным образом после отображения

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 для рисования диаграмм и MetronicJS для вкладок.

Редактировать: первая диаграмма, которая видна по умолчанию, отображается правильно, но другие нет. После изменения размера окна, когда отображается другой график, предыдущий снова разбивается.

Answer 1

Вы можете программно огонь «Изменить размер» событие:

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

Просто приложите его к событию «нажмите кнопку», которая показывает вкладку.

В вашем случае:

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

Если компонент не изменяет размер, как реагировать на событие, вы могли бы на самом деле изменить размер окна с:

window.resizeTo(width, height); 

UPDATE:

Если изменить размер окна невозможно (см. Комментарии), вы можете попытаться перерисовать диаграмму, когда вкладка станет видимой. Может быть, таким образом диаграмма может рассчитать правильно размеры, необходимые, чтобы вписаться в что-то вроде:.

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

Надеется, что это помогает!