2017-05-02 14 views
1

1つのhtmlページに同時に3つのジオコードを表示したい複数のジオカートを1ページに表示できますか?

(複数のシートから1つのチャートを1つのチャートで照会)

私は3入力シートの値を含む1つのHTMLファイルを有するdocument

で読み出しまし」として

、領域の変更のための入力(ラジオボタン)チャートの

及び3のdiv(カラーマップ/ 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>

スクリプトファイルで

、私はこの

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)); 
 
     
 
     
 
    .............. 
 
     
 
    
 

などの各マップのシート値

、3 setonloadcallback

と3機能を得るために1 forループ機能を持っています

**しかし結果はページ上に1回につき1つのチャートしか表示されません。リフレッシュするたびに別のチャートから他のチャートに変更されますトン

が、私はあなたがここにページを見ることができます**

それは同時に同じページで、3つのグラフを表示したいclick this link

誰が助けてくださいすることができますか?

ありがとう

答えて

0

私の場合は、すべてのグラフを表示する共通の機能を呼び出しました。

google.charts.setOnLoadCallback(drawAll); 

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

試したことがありますが、読み込まれたものはありません。それぞれのチャートごとに異なるシートをロードしていますか?シート値(URL)を取得する関数で何かを変更する必要がありますか?とにかく、あなたの助けに感謝します。 – Patcharapan

+0

jsFiddle google exampleから取得したものを参照してください。私は答えとして言ったように私はフィドルを編集します。 https://jsfiddle.net/ataur63/5m8h1unn/ –

+0

このように(Googleドライブに保存された)シート値を読み取ることはできません。 ''さらに、 'var inputVal = document.getElementById();'これは意味をなさない。 'for(var i = 0; i

関連する問題