谷歌的地理图表不会在爱尔兰地图内显示科克

Question

我正在绘制爱尔兰的省份地图，由于某种原因，谷歌无法识别科克县。有人建议使用IE-CO。但这打破了我使用CSV数据集的计划(我无法控制县名(。

有人知道为什么它不起作用吗？我该怎么解决？

这是我的代码示例https://jsfiddle.net/sashareds/kLjtne42/2/

google.charts.load('current', {
'packages':['geochart'],
// Note: you will need to get a mapsApiKey for your project.
// See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
'mapsApiKey': 'AIzaSyBgxLAOHUq52CuZ0kcl9WHnOjzt40w082k'
});
google.charts.setOnLoadCallback(drawRegionsMap);
function drawRegionsMap() {
var data = google.visualization.arrayToDataTable([
['County',   'Case'],
['Carlow',   0],
['Cavan',   41],
['Clare',   50],
['Cork',   292], //IE-CO
['Donegal',   77],
['Dublin',   2077],
['Galway',   98],
['Kerry',   79],
['Kildare',   103],
['Kilkenny',   47],
['Laois',   16],
['Leitrim',   12],
['Limerick',   96],
['Longford',   16],
['Louth',   54],
['Mayo',   55],
['Meath',   88],
['Monaghan',   17],
['Offaly',   47],
['Roscommon',   13],
['Sligo',   26],
['Tipperary',   94],
['Waterford',   43],
['Westmeath',   86],
['Wexford',   18],
['Wicklow',   105]
]);
var options = {
region: 'IE', // Africa
resolution: 'provinces',
colorAxis: {colors: ['#f9cb9c', '#f07b50', '#ea4435']},
backgroundColor: 'white',
datalessRegionColor: '#fefefe',
defaultColor: '#fefefe',
};
var chart = new google.visualization.GeoChart(document.getElementById('geochart-colors'));
chart.draw(data, options);
};

Answer 1

您可以使用带有计算列的数据视图来替换已知的问题国家/地区
并使用对象表示法允许实际国家/地区名称显示在工具提示上。

var view = new google.visualization.DataView(data);
view.setColumns([{
calc: function (dt, row) {
var country = dt.getValue(row, 0);
switch (country) {
case 'Cork':
country = {v: 'IE-CO', f: country};
break;
}
return country;
},
label: data.getColumnLabel(0),
type: data.getColumnType(0)
}, 1]);

请参阅以下工作片段。。。

google.charts.load('current', {
'packages':['geochart'],
// Note: you will need to get a mapsApiKey for your project.
// See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
'mapsApiKey': 'AIzaSyBgxLAOHUq52CuZ0kcl9WHnOjzt40w082k'
});
google.charts.setOnLoadCallback(drawRegionsMap);
function drawRegionsMap() {
var data = google.visualization.arrayToDataTable([
['County',   'Case'],
['Carlow',   0],
['Cavan',   41],
['Clare',   50],
['Cork',   292], //IE-CO
['Donegal',   77],
['Dublin',   2077],
['Galway',   98],
['Kerry',   79],
['Kildare',   103],
['Kilkenny',   47],
['Laois',   16],
['Leitrim',   12],
['Limerick',   96],
['Longford',   16],
['Louth',   54],
['Mayo',   55],
['Meath',   88],
['Monaghan',   17],
['Offaly',   47],
['Roscommon',   13],
['Sligo',   26],
['Tipperary',   94],
['Waterford',   43],
['Westmeath',   86],
['Wexford',   18],
['Wicklow',   105]
]);

var view = new google.visualization.DataView(data);
view.setColumns([{
calc: function (dt, row) {
var country = dt.getValue(row, 0);
switch (country) {
case 'Cork':
country = {v: 'IE-CO', f: country};
break;
}
return country;
},
label: data.getColumnLabel(0),
type: data.getColumnType(0)
}, 1]);
var options = {
region: 'IE', // Africa
resolution: 'provinces',
colorAxis: {colors: ['#f9cb9c', '#f07b50', '#ea4435']},
backgroundColor: 'white',
datalessRegionColor: '#fefefe',
defaultColor: '#fefefe',
};
var chart = new google.visualization.GeoChart(document.getElementById('geochart-colors'));
chart.draw(view, options);  // <-- draw chart with data view
};

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="geochart-colors" style="width: 90%; height: 90%;"></div>

编辑

将工作表用作数据源时，
需要使用工作表中的数据表创建视图。

因此，应该在接收到数据表之后创建视图定义
。

请参阅以下工作片段。。。

google.charts.load('current', {
'packages': ['geochart'],
'mapsApiKey': chartSettings.mapsApyKey
});
google.charts.setOnLoadCallback(drawRegionsMap);
//querying external data from a spreadsheet.
function drawRegionsMap() {
var queryString = encodeURIComponent('Select *');
var queryData = new google.visualization.Query(chartSettings.mapDataSource + queryString);
queryData.send(handleQueryResponse);
}
function handleQueryResponse(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
var data = response.getDataTable();

	//Swapping IE-CO on COrk in the dta array, I assume?
var view = new google.visualization.DataView(data);
view.setColumns([{
calc: function(dt, row) {
var country = dt.getValue(row, 0);
switch (country) {
case 'Cork':
country = {
v: 'IE-CO',
f: country
};
break;
}
return country;
},
label: 'Country',
type: 'string'
}, 1]);
var options = {
region: 'IE',
resolution: 'provinces',
colorAxis: {
colors: ['#f9cb9c', '#f07b50', '#ea4435']
},
backgroundColor: 'white',
datalessRegionColor: '#fefefe',
defaultColor: '#fefefe',
};
var chart = new google.visualization.GeoChart(document.getElementById('map'));
chart.draw(view, options);
}

<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
var chartSettings = {
mapsApyKey: "AIzaSyBgxLAOHUq52CuZ0kcl9WHnOjzt40w082k",
mapDataSource: "https://docs.google.com/spreadsheets/d/1YV7VSsG_nQXmL_L44cJSz4GrxOLIBNJrgd8qPXM_NQ0/gviz/tq?gid=249758876&headers=1&range=M21:N47&tq="
};
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>