我需要通过单击链接重新加载选项卡的内容,因为我正在尝试 rendering
Google Chart
上的问题.
我做了一个JsFiddle这代表了问题所在。请注意两个选项卡的渲染差异。
我设置了延迟,但是当我访问另一个选项卡时。错误的渲染仍然会发生。
setTimeout(function () {
chart.draw(data, options);
}, 2000);
最佳答案
第一次绘制之前需要等到图表的容器可见
请参阅以下工作片段...
$(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>
关于javascript - 通过点击标签来充值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41936729/