谷歌图表刷新加载效果

Question

我有一个页面有多个谷歌图表。我也有一个页面级的下拉菜单。当用户更改此下拉列表中的值时，我会刷新/重新载入图表。

一切工作正常，但值选择和图表更新之间有几秒钟的延迟。我想在所有图表刷新之前在页面上显示加载效果叠加层和图像。

问题是我无法覆盖谷歌图表顶部的这种效果。 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> 

Answer 1

尝试移动三网融合

z-index: 20;

from ...

#loading-img

到...

.loading

见下例...

$('#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); 
 
    }; 
 
\t 
 
\t 
 

#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%; 
 

 
} 
 

 
.loading { 
 
    background: #a3a3a3; 
 
    display: none; 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    opacity: 0.5; 
 
    z-index: 20; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<button id="test">test</button> 
 
\t 
 
<div class="loading"><div id="loading-img"></div></div> 
 
    <div id="line-chart"></div>