更新
这个问题是色列。 列中的值必须是单调递增系列
这是我的代码
<!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作为颜色
任何人都请告诉我这里我做错了什么