geochart工具提示上的错误值

时间:2017-03-30 08:43:09

标签: javascript jquery google-visualization

更新

这个问题是色列。 列中的值必须是单调递增系列

我的Google电子表格中的数据

enter image description here

这是我的代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Map</title>


<style xmlns="http://www.w3.org/2000/svg">
  		/* #colormap path:hover { fill: #90db7c; } */
  		#colormap rect:hover {fill:transparent;}
</style>
	 
	 
<script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
<script src="https://www.google.com/jsapi"></script>
<script type="text/javascript">


// Load Charts and the corechart package.
google.charts.load('current', {packages: ['geochart']});
	
// Callback that draws
function drawRegionsMap() { 
    var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/14VouG7zZqHGB9CA6bxQx6CXX-TvOYkSqTmrN5DAj1Do/edit#gid=1175123524');
      query.setQuery('select * where G="WEEE" and I="EPR take back model" and N="Y" and O="Country" ');
    query.send(handleQueryResponseTR);
}
	
function handleQueryResponseTR(response) {
  	if (response.isError()) {
    				alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
    				return;
		}

    var data = response.getDataTable();
    	
    var colorValues = [];
    var numRows = data.getNumberOfRows();
    for (var i = 0; i < numRows; i++) {
          colorValues.push(parseInt(data.getValue(i, 15)));
    }
    		
    var view = new google.visualization.DataView(data);

		view.setColumns([4,
		15,
		{
    			type:'string',
				
    			label : 'dataname',
    			calc: function (dt, row) {
    					var policy = dt.getFormattedValue(row, 6)
    					var dataname = dt.getFormattedValue(row, 8)
						var dropname = dt.getFormattedValue(row, 9)
    					var startdate = dt.getFormattedValue(row, 10)
    					var comment = dt.getFormattedValue(row, 12)
    					//colorValues.push(dt.getFormattedValue(row, 6))
           		return policy + " - " + dropname + " - " + startdate + " - " + comment 
          },
        	role: 'tooltip',
    			p: {html: true},
    }]);
	
	
  	//assign color to colorValues
    var colorNames = [];
    colorValues.forEach(function(value) {
    		if (value = 1) {
          colorNames.push('#abe1a1');
			}else if (value = 2) {
          colorNames.push('#3da9ec');
		  	}else if (value = 3) {
          colorNames.push('#91c1ff');
		 	 }else if (value = 4) {
          colorNames.push('#dfa6ff');
		  }else if (value = 5) {
          colorNames.push('#ffaf87');
		  }else if (value = 6) {
          colorNames.push('#ffaf87');
		  }else if (value = 7) {
          colorNames.push('#9edae5');
		  }else if (value = 8) {
          colorNames.push('#9edae5');
		  }else if (value = 9) {
          colorNames.push('#9edae5');
		  }else if (value = 10) {
          colorNames.push('#d1d19d');
		  }else if (value = 11) {
          colorNames.push('#eeeeee');
    			//alert('red');
        } else {
          colorNames.push('#fff09b');
    			//alert('green');
    	  }
    });
	
		var chart = new google.visualization.GeoChart(document.getElementById('colormap'));
	 
  /*  google.visualization.events.addListener(chart, 'select', function () {
          var selection = chart.getSelection();
          if (selection.length > 0) {
            //console.log(data.getValue(selection[0].row, 4));
    				window.open(data.getValue(selection[0].row, 4));
          }
    }); */
    	
    	// Set options for the chart.
	
    var options = {
    		title:'WEEE',	 
      	colorAxis: {
          	colors: colorNames,
          	values: colorValues
       	},
     		
    		backgroundColor: { fill: '#FFF', stroke: '#000', strokeWidth: 2 },
     		datalessRegionColor: '#F5F0E7',
     		displayMode: 'regions', 
     		enableRegionInteractivity: 'true', 
     		resolution: 'countries',
     		sizeAxis: {minValue: 1, maxValue:1,minSize:10,  maxSize: 10},
     		region:'world',
     		keepAspectRatio: true,
    		width:800,
    		height:600,
     		tooltip: {isHtml:'true',textStyle: {color: '#444444'} }	
    };

    chart.draw(view, options);

}


// Draw the chart when Charts is loaded.
google.charts.setOnLoadCallback(drawRegionsMap);
 </script>
</head>
<body>

 <div id='colormap'></div>
 
 </body>
</html>

你可以运行代码片段并且会看到在工具提示之上取了Color值(在我的电子表格中)而不是Countryname

并且它不会将colorvalue作为颜色

enter image description here

任何人都请告诉我这里我做错了什么

0 个答案:

没有答案