Question

我想知道为什么geochart没有从我的代码中获取任何颜色（从google工作表中获取颜色值），甚至不是defaultColor或colorAxis，你可以在注释掉的那一行中看到，我已经尝试了除了它之外的所有颜色不起作用。

并且google表格中的数据看起来像

希望有人能提供帮助，谢谢。

＆＃13;

<!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/1dTfxVvfDKn6iXn4W_m7HJ_86JOGNDsxYSSaXipEo0vM/edit#gid=0');
      // query.setQuery('select A,B,C');
    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, 6)));
    }
    		
    var view = new google.visualization.DataView(data);

    //show data in tooltips
    view.setColumns([0,{
    			type:'string',
    			label : 'dataname',
    			calc: function (dt, row) {
    					var dt1 = dt.getFormattedValue(row, 1)
    					var dt2 = dt.getFormattedValue(row, 2)
    					var url = dt.getFormattedValue(row, 4)
    					var image = dt.getFormattedValue(row, 5)
    					//colorValues.push(dt.getFormattedValue(row, 6))
           		return dt1 + " - " + dt2 
          },
        	role: 'tooltip',
    			p: {html: true}
    }]);


	
  	//assign color to colorValues
    var colorNames = [];
    colorValues.forEach(function(value) {
    		if (value <= 2) {
          colorNames.push('red');
    			//alert('red');
        } else if ((value > 2) && (value <= 4)) {
          colorNames.push('yellow');
    			//alert('yellow');
        } else {
          colorNames.push('green');
    			//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 = {
	   defaultcolor: 'yellow'
    		//title:'WEEE',	 
      	//colorAxis: {
    		  //  values: [1, 2, 3, 4,5,6],
    		//	colors: ['green', 'yellow', 'orange' ,'red','purple','lightblue'],
          //	};
			//colors: colorNames,
          	//values: colorValues
      // 	},
     	
    		//backgroundColor: {fill:'#FFFFFF',stroke:'#FFFFFF' ,strokeWidth:0 },
    		//backgroundColor: '#FFFFFF',
     		//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>

＆＃13;

Geochart没有任何颜色

0 个答案: