3
我有一个页面有多个谷歌图表。我也有一个页面级的下拉菜单。当用户更改此下拉列表中的值时,我会刷新/重新载入图表。谷歌图表刷新加载效果
一切工作正常,但值选择和图表更新之间有几秒钟的延迟。我想在所有图表刷新之前在页面上显示加载效果叠加层和图像。
问题是我无法覆盖谷歌图表顶部的这种效果。 JavaScript的加载效果确实会触发并且背景变灰,但加载图像隐藏在图表后面。
的jsfiddle的问题:https://jsfiddle.net/0tj1pzsk/14/
我怎样才能在谷歌图表的顶部覆盖微调的形象?配售微调影像图格内只会显示它的第一个图表负载,而不是随后的刷新
代码:
CSS
#loading-img {
background: url(https://i1.wp.com/cdnjs.cloudflare.com/ajax/libs/galleriffic/2.0.1/css/loader.gif) center center no-repeat;
height: 100%;
z-index: 20;
}
.loading {
background: #a3a3a3;
display: none;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0.5;
}
Javascript
$('#test').click(function() {
$('.loading').show();
});
google.charts.load("current", {packages:['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.arrayToDataTable([
['Threat', 'Attacks'],
['Chandrian', 38],
['Ghosts', 12],
['Ghouls', 6],
['UFOs', 44],
['Vampires', 28],
['Zombies', 88]
]);
var options = {
legend: 'none',
colors: ['#760946'],
vAxis: { gridlines: { count: 4 } }
};
var chart = new google.visualization.LineChart(document.getElementById('line-chart'));
chart.draw(data, options);
};
html
<button id="test">test</button>
<div class="loading"><div id="loading-img"></div></div>
<div id="line-chart"></div>