Question

我想在一个html页面中同时显示3个地理标记

（从多个工作表中查询 - 一张图表为一张图表）。

正如我在document

中读到的那样

我有一个包含3个输入表值的html文件

，输入区域变化（单选按钮）

和图表的3个div（colormap / colormap2 / colormap3）

＆＃13;

<!DOCTYPE html>
<html>
<head>
<title>All Map</title>

<script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
	<script type="text/javascript" src="testscript.js">
	</script>
	<link rel="stylesheet" href="styles.css">
    
    <!--sheet id value
    
   		//weee sheet !-->
	<input id="value1" value="https://docs.google.com/spreadsheets/d/14VouG7zZqHGB9CA6bxQx6CXX-TvOYkSqTmrN5DAj1Do/edit#gid=1175123524" type="hidden">
    	<!--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>
	
    
	<div>
		<input id="all" name="region" type="radio" value="all"><label for="all">All</label>
	</div>
	<div>
		<input id="africa" name="region" type="radio" value="002"><label for="africa">Africa</label>
	</div>
	<div>
		<input id="americas" name="region" type="radio" value="019"><label for="americas">Americas</label>
	</div>
	<div>
		<input id="europe" name="region" type="radio" value="150"><label for="europe">Europe</label>
	</div>
	<div>
		<input id="asia" name="region" type="radio" value="142"><label for="asia">Asia</label>
	</div>
	
        //DIV FOR CHARTS
        
		<div id='colormap'> </div>
        <div id='colormap2'> </div>
        <div id='colormap3'> </div>
       
</body>
</html>

＆＃13;

在脚本文件中，我有1个for-loop函数来获取Sheet Value

，3 setonloadcallback

和每个地图的3个功能都是这样的

＆＃13;

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

＆＃13;

**但结果在页面上每次只显示一个图表，每次刷新它都会更改为另一个图表从另一个图纸查询

但我想让它同时显示3张图表**

您可以在此处查看click this link

页面

任何人都可以帮忙吗？

感谢

Answer 1

在我的情况下，我调用了一个常用函数来显示所有图表。

google.charts.setOnLoadCallback(drawAll);

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

在一个页面中显示多个地理位置？

1 个答案: