2017-05-02 3 views
1

Ich möchte 3 Geocharts gleichzeitig in einer HTML-Seitemehrere Geocharts auf einer Seite anzeigen?

(die Abfrage von mehreren Blatt - ein Blatt für ein Diagramm).

wie ich in der document

ve gelesen I eine html-Datei‘, die

3 Eingabeblatt Werte enthalten

, Eingang für Region Änderungen (Optionsfeld)

und 3 divs zum Diagramm (colormap/colormap2/colormap3)

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<title>All Map</title> 
 

 
<script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script> 
 
\t <script type="text/javascript" src="testscript.js"> 
 
\t </script> 
 
\t <link rel="stylesheet" href="styles.css"> 
 
    
 
    <!--sheet id value 
 
    
 
    \t \t //weee sheet !--> 
 
\t <input id="value1" value="https://docs.google.com/spreadsheets/d/14VouG7zZqHGB9CA6bxQx6CXX-TvOYkSqTmrN5DAj1Do/edit#gid=1175123524" type="hidden"> 
 
    \t <!--bat sheet!--> 
 
     <input id="value2" value="https://docs.google.com/spreadsheets/d/1RsugJPtz2EdHOLaiL0SvR9bh61H-vAgn9x1QBjIJ--c/edit?usp=sharing" type="hidden" > 
 
     <!--pack sheet!--> 
 
     <input id="value3" value="https://docs.google.com/spreadsheets/d/1zPP22gUPLDqTrvASIU3OXpmeHL_9IBS2O4z75g-1BHY/edit?usp=sharing" type="hidden" > 
 
    
 
</head> 
 
<body> 
 
\t 
 
    
 
\t <div> 
 
\t \t <input id="all" name="region" type="radio" value="all"><label for="all">All</label> 
 
\t </div> 
 
\t <div> 
 
\t \t <input id="africa" name="region" type="radio" value="002"><label for="africa">Africa</label> 
 
\t </div> 
 
\t <div> 
 
\t \t <input id="americas" name="region" type="radio" value="019"><label for="americas">Americas</label> 
 
\t </div> 
 
\t <div> 
 
\t \t <input id="europe" name="region" type="radio" value="150"><label for="europe">Europe</label> 
 
\t </div> 
 
\t <div> 
 
\t \t <input id="asia" name="region" type="radio" value="142"><label for="asia">Asia</label> 
 
\t </div> 
 
\t 
 
     //DIV FOR CHARTS 
 
     
 
\t \t <div id='colormap'> </div> 
 
     <div id='colormap2'> </div> 
 
     <div id='colormap3'> </div> 
 
     
 
</body> 
 
</html>

In der Skriptdatei, ich habe 1-Loop-Funktion Notenwert

, 3 setonloadcallback

und 3 Funktion jeder Karte wie diese

google.charts.load('current', {packages: ['geochart']}); 
 
\t 
 
\t function checkinput() { 
 
\t var inputVal = document.getElementById(); 
 
\t for (var i = 0; i < inputVal; i++){ 
 
    \t \t if (inputVal== "value1") { 
 
     \t \t drawRegionsMap(); 
 
    \t \t } 
 
    
 
    \t \t else if (inputVal == "value2") 
 
    \t \t { 
 
    \t \t \t drawRegionsMap2(); 
 
    \t \t } 
 
    
 
    \t \t else 
 
    \t \t { 
 
    \t \t drawRegionsMap3(); 
 
    \t \t \t } 
 
    
 
    \t } 
 
\t } 
 
\t  
 
\t google.charts.setOnLoadCallback(drawRegionsMap); 
 
\t google.charts.setOnLoadCallback(drawRegionsMap2); 
 
\t google.charts.setOnLoadCallback(drawRegionsMap3); 
 
    
 
    function drawRegionsMap() { 
 
\t 
 
\t var query = new google.visualization.Query((document.getElementById('value1').value)); 
 
\t ...................... 
 
    } 
 
    function drawRegionsMap2() { 
 
\t 
 
\t var query = new google.visualization.Query((document.getElementById('value2').value)); 
 
\t .................................. 
 
    } 
 
     
 
    function drawRegionsMap3() { 
 
\t 
 
\t var query = new google.visualization.Query((document.getElementById('value3').value)); 
 
     
 
     
 
    .............. 
 
     
 
    
 

zu erhalten

** aber das Ergebnis zeigt nur ein Diagramm pro Mal auf der Seite, jedes Mal, wenn ich es aktualisiere, wird es in ein anderes Diagramm wechseln, das von einem anderen Blatt abfragt t

aber ich will es 3 Charts Sie können hier die Seite zur gleichen Zeit sehen **

gleichen Seite anzuzeigen click this link

jemand helfen bitte?

dank

Antwort

0

In meinem Fall rief ich eine gemeinsame Funktion aller Diagramme zu zeigen.

google.charts.setOnLoadCallback(drawAll); 

function drawAll(){ 
    drawRegionsMap(); 
    drawRegionsMap2(); 
    drawRegionsMap3(); 
} 
+0

versucht, dass, nichts geladen-- laden Sie verschiedene Blatt für jedes Diagramm? Muss ich irgendetwas an der Funktion ändern, die den Blattwert (URL) erhält? Wie auch immer, schätze deine Hilfe. – Patcharapan

+0

Siehe die jsFiddle aus Google Beispiel und ich bearbeite die Geige, wie ich in der Antwort sagte. https://jsfiddle.net/aturur63/5m8h1unn/ –

+0

Sie können Blatt Wert nicht lesen (gespeichert in Google Drive) wie folgt. ''. Zusätzlich 'var inputVal = document.getElementById();' das macht keinen Sinn. 'für (var i = 0; i

Verwandte Themen