[英]Display West Africa with Google GeoChart
I'd like to display a worldmap (GeoChart) using Google's Chart API where some countries are listed by country and others are displayed based on a grouping/region. 我想使用Google的Chart API显示世界地图(GeoChart),其中某些国家/地区按国家/地区列出,而其他国家/地区则根据分组/区域进行显示。
My data might look like this: 我的数据可能如下所示:
[["Country","DataValue"],["United States",2000],["West Africa",3000],["Great Britain",1500]];
Is this possible to do? 这可能吗? I tried playing with the
displayMode
property of the options but that didn't do any good. 我尝试使用选项的
displayMode
属性,但这没有任何好处。 I also tried using "011" instead of "West Africa" since "011" is recognized as a region by the API. 我还尝试使用“ 011”代替“西非”,因为API识别为“ 011”。 That did not work either.
那也不起作用。
I was able to display just the region of West Africa with the region
option but that isn't what I'm after. 使用
region
选项,我只能显示西非地区,但这不是我想要的。 I really want to display the world but have regions like West Africa handled and colored as a group rather than individual countries. 我确实想展示世界,但是像西非这样的地区却作为一个整体而不是单个国家来处理和着色。
Thanks for your help. 谢谢你的帮助。
Google Geochart supports either the whole world or specific region (eg 011 Western Africa
) Google Geochart支持整个世界或特定区域(例如
011 Western Africa
)
Since your goal: 自您的目标以来:
to display the world but have regions like West Africa handled and colored as a group rather than individual countries
展示世界,但像西非这样的区域作为一个整体而不是单个国家来处理和着色
i would propose the following solution: to dynamically expand data table row for a region into the rows per every country from that region: 我将提出以下解决方案:将某个地区的数据表行动态扩展为该地区每个国家/地区的行:
function expandRegions(dataTable) {
var regions = {
'West Africa': {
'204': 'Benin',
'854': 'Burkina Faso',
'132': 'Cabo Verde',
'384': "Cote d'Ivoire",
'270': 'Gambia',
'288': 'Ghana',
'324': 'Guinea',
'624': 'Guinea-Bissau',
'430': 'Liberia',
'466': 'Mali',
'478': 'Mauritania',
'562': 'Niger',
'566': 'Nigeria',
'654': 'Saint Helena',
'686': 'Senegal',
'694': 'Sierra Leone',
'768': 'Togo'
}
};
for (var i = 0; i < dataTable.getNumberOfRows(); i++) {
var regionName = dataTable.getValue(i, 0);
var region = regions[regionName];
if (region) {
var value = dataTable.getValue(i, 1);
dataTable.removeRow(i); //remove region row
//add countries from region rows
for (var code in region) {
var countryName = region[code];
dataTable.addRow([countryName, value]);
}
}
}
return dataTable;
}
Complete example 完整的例子
google.load("visualization", "1", { packages: ["geochart"] }); google.setOnLoadCallback(drawRegionsMap); function drawRegionsMap() { var data = google.visualization.arrayToDataTable([ ["Country","DataValue"], ["United States",2000], ["West Africa",3000], ["Great Britain",1500] ]); data = expandRegions(data); var options = { }; var chart = new google.visualization.GeoChart(document.getElementById('regions_div')); chart.draw(data, options); } function expandRegions(dataTable) { var regions = { 'West Africa': { '204': 'Benin', '854': 'Burkina Faso', '132': 'Cabo Verde', '384': "Cote d'Ivoire", '270': 'Gambia', '288': 'Ghana', '324': 'Guinea', '624': 'Guinea-Bissau', '430': 'Liberia', '466': 'Mali', '478': 'Mauritania', '562': 'Niger', '566': 'Nigeria', '654': 'Saint Helena', '686': 'Senegal', '694': 'Sierra Leone', '768': 'Togo' } }; for (var i = 0; i < dataTable.getNumberOfRows(); i++) { var regionName = dataTable.getValue(i, 0); var region = regions[regionName]; if (region) { var value = dataTable.getValue(i, 1); dataTable.removeRow(i); for (var code in region) { var countryName = region[code]; dataTable.addRow([countryName, value]); } } } return dataTable; }
<script type="text/javascript" src="https://www.google.com/jsapi"></script> <div id="regions_div" style="width: 900px; height: 500px;"></div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.