Перезарядка, нажав на вкладки

Question

Мне нужно перезагрузить содержимое вкладки, нажав на ссылку, потому что я пытаюсь выполнить rendering проблемы на Google Chart.

Я сделал JsFiddle, что представляет проблему. Обратите внимание на разницу рендеринга двух вкладок.

Я положил задержку, но когда я получаю доступ к другой вкладке. Неверный показ происходит.

setTimeout(function() { 
      chart.draw(data, options); 
     }, 2000); 

Answer 1

нужно ждать, пока контейнер Картографическая не видно, перед нанесением впервые

см следующий рабочий фрагмент кода ...

$(document).foundation(); 
 

 
$('#sac-tabs').on('change.zf.tabs', function() { 
 
    switch ($(this).children('.is-active').text().trim()) { 
 
    case 'Tab 1': 
 
     drawVisualization(); 
 
     break; 
 

 
    case 'Tab 2': 
 
     drawVisualization2(); 
 
     break; 
 
    } 
 
}); 
 

 
google.charts.load('current', { 
 
    callback: drawVisualization, 
 
    packages: ['corechart'] 
 
}); 
 

 
function drawVisualization() { 
 
    var data = google.visualization.arrayToDataTable([ 
 
     ['Departamento', 'Concluídas', 'Andamento', 'Pendentes'], 
 
     ['Vendas', 5, 6, 2], 
 
     ['Peças', 3, 4, 6], 
 
     ['Serviços', 1, 2, 3], 
 
     ['Administrativo', 7, 5, 3] 
 
    ]); 
 

 
    var options = { 
 
     title: 'Gráfico', 
 
     hAxis: {title: 'Departamento'}, 
 
     seriesType: 'bars', 
 
     colors: ['#21BA45', '#F90', '#DC3912'], 
 
     series: {5: {type: 'line'}} 
 
    }; 
 

 
    var chart = new google.visualization.ComboChart(document.getElementById('chart_div')); 
 
    chart.draw(data, options); 
 
} 
 

 
function drawVisualization2() { 
 
    var data = google.visualization.arrayToDataTable([ 
 
     ['Departamento', 'Concluídas', 'Andamento', 'Pendentes'], 
 
     ['Vendas', 5, 6, 2], 
 
     ['Peças', 3, 4, 6], 
 
     ['Serviços', 1, 2, 3], 
 
     ['Administrativo', 7, 5, 3] 
 
    ]); 
 

 
    var options = { 
 
     title: 'Gráfico', 
 
     hAxis: {title: 'Departamento'}, 
 
     seriesType: 'bars', 
 
     colors: ['#21BA45', '#F90', '#DC3912'], 
 
     series: {5: {type: 'line'}} 
 
    }; 
 

 
    var chart = new google.visualization.ComboChart(document.getElementById('chart_div2')); 
 
    chart.draw(data, options); 
 
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.1.2/foundation.min.js"></script> 
 
<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.1.2/foundation.min.css"> 
 
<div class="row"> 
 
    <div class="medium-12 columns"> 
 
     <ul class="tabs" data-tabs id="sac-tabs"> 
 
      <li class="tabs-title is-active"> 
 
       <a href="#panel1" aria-selected="true">Tab 1</a></li> 
 
      <li class="tabs-title"><a href="#panel2">Tab 2</a></li>    
 
     </ul> 
 
     <div class="tabs-content" data-tabs-content="sac-tabs"> 
 
      <div class="tabs-panel is-active" id="panel1"> 
 
       <div class="row"> 
 
        <div class="medium-12 columns"> 
 
        <p> 
 
        Expected outcome 
 
        </p> 
 
        <div id="chart_div"></div> 
 
        </div> 
 
       </div> 
 
      </div> 
 
      <div class="tabs-panel" id="panel2"> 
 
       <div class="row"> 
 
        <div class="medium-12 columns"> 
 
        <p> 
 
        Not a Problem 
 
        </p> 
 
         <div id="chart_div2"></div> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

Answer 2

Я получил вашу проблему,

Только активная вкладка начертить всю ширину, проект.

Для решения вы хотите подумать, когда вы нарисуете вторую вкладку вкладки, эту активную вторую вкладку с использованием jQuery после этого запуска «диаграммы рисует» commnad.

Надеюсь, вы понимаете. Наслаждайтесь :)