我想在Google GeoCharts中按国家/地区显示记录数。
然而,我们的国家分组与GeoCharts使用的分组不同。
例如Google使用联合国:
作为美国的细分。我们的数据集分为:
阻抗爆炸!
正如我所看到的,这意味着当南美洲被点击拉丁美洲时,用户将失去对墨西哥的看法。美国的图表太高而且太薄了,因此必须缩小到太远而无法使用。
更改我们的数据分类,分配到某个地区的国家非常痛苦。
我可以在GeoChart中设置用户定义的区域吗?指定要显示的地图中心,缩放级别和国家/地区数据?
我敢说一个大黑客可以做到这一点,但与Goggle的GeoChart代码不同步并不是一个好主意。
我看过新的amMaps,但这似乎不是IE7& 8兼容。
<shakefist at="Microsoft">Argh!</shakefist>
欢呼声
答案 0 :(得分:3)
不幸的是,不,你不能。你可以选择美国,北美,加勒比海或南美洲,但不能选择“拉丁美洲”。你可以做的是创建一个缩放地图,在那里显示美国,它将放大一个区域点击。您实际上需要拥有国家/地区数据以及区域数据,或者只有标记数据(如果这是您的事情),但这是点击缩放的示例:
<!--
You are free to copy and use this sample in accordance with the terms of the
Apache license (http://www.apache.org/licenses/LICENSE-2.0.html)
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Google Visualization API Sample</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['geochart']});
var width, height, selectedRegion, resolution;
window.onload = function(){
width = 556;
height = 400;
selectedRegion = 'world';
resolution = 'subcontinents';
};
function drawVisualization() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Region');
data.addColumn('number', 'Value');
data.addRows([
[{v:"005", f:"South America"}, 978.7],
[{v:"011", f:"Western Africa"}, 46],
[{v:"013", f:"Central America"}, 299],
[{v:"014", f:"Eastern Africa"}, 63.9],
[{v:"015", f:"Northern Africa"}, 255.7],
[{v:"017", f:"Middle Africa"}, 21.4],
[{v:"018", f:"Southern Africa"}, 244.5],
[{v:"029", f:"Caribbean"}, 76.5],
[{v:"030", f:"Eastern Asia"}, 5712.9],
[{v:"034", f:"Southern Asia"}, 1275.1],
[{v:"035", f:"South-Eastern Asia"}, 639.2],
[{v:"039", f:"Southern Europe"}, 777.8],
[{v:"053", f:"Australia and New Zealand"}, 272],
[{v:"054", f:"Melanesia"}, 6.3],
[{v:"057", f:"Micronesia"}, 1.8],
[{v:"061", f:"Polynesia"}, 1],
[{v:"143", f:"Central Asia"}, 170.3],
[{v:"145", f:"Western Asia"}, 834.1],
[{v:"151", f:"Eastern Europe"}, 1587.6],
[{v:"154", f:"Northern Europe"}, 801.5],
[{v:"155", f:"Western Europe"}, 1456.2],
[{v:"021", f:"Northern America"}, 4704.1]
]);
var options = {
displayMode: 'regions',
enableRegionInteractivity: 'true',
resolution: resolution,
region: selectedRegion,
height: height,
width: width
};
var geochart = new google.visualization.GeoChart(
document.getElementById('visualization'));
google.visualization.events.addListener(geochart, 'select', function() {
var selection = geochart.getSelection();
if (selection.length == 1) {
var selectedRow = selection[0].row;
selectedRegion = data.getValue(selectedRow, 0);
resolution = "countries";
options.region = selectedRegion;
options.resolution = resolution;
//alert(resolution);
geochart.draw(data, options);
}
});
geochart.draw(data, options);
}
google.setOnLoadCallback(drawVisualization);
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="visualization"></div>
</body>
</html>
复制并粘贴到Google Playground(我不知道为什么这不适用于jsfiddle,我认为它与window.onload有关。)