谷歌圖表刷新加載效果

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>