Loading-Effekt auf Google-Diagramm aktualisieren

Question

Ich habe eine Seite mit mehreren Google-Charts. Ich habe auch ein Drop-Down auf Seitenebene. Ich aktualisiere/aktualisiere die Diagramme, wenn Benutzer Werte aus dieser Dropdown-Liste ändern.

Alles funktioniert gut, aber es gibt ein paar Sekunden Verzögerung zwischen Wertauswahl und Diagramme aktualisieren. Ich möchte ein Ladeeffekt-Overlay und ein Bild auf der Seite anzeigen, bevor alle Diagramme aktualisiert werden.

Das Problem ist, dass ich diesen Effekt nicht über Google Charts überlagern kann. Der Ladeeffekt Javascript löst aus und der Hintergrund wird grau dargestellt, aber das Laden des Bildes ist hinter den Charts versteckt.

Jsfiddle für das Problem: https://jsfiddle.net/0tj1pzsk/14/

Wie kann ich auf Google-Charts spinner Bild überlagern? Platzieren innerhalb Diagramm div spinner Bild wird es nur für die erste Chart-Last angezeigt und nicht die nachfolgende Aktualisierungen

Code:

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

versuchen CSS bewegen ...

z-index: 20;

von ...

#loading-img

zu ...

.loading

Beispiel siehe folgende ...

$('#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>