2

我想在 Google GeoCharts 中按国家/地区显示记录数。

然而，我们的国家分组与 GeoCharts 使用的不同。

例如谷歌使用联合国的：

  • 北美
  • 中美洲
  • 南美洲
  • 加勒比海

作为美国的细分。我们的数据集分为：

  • 北美
  • 拉丁美洲

阻抗爆炸！

正如我所看到的，这意味着当点击南美洲的拉丁美洲时，用户会忽略墨西哥。美国图表太高太薄，因此必须缩小太多才能有用。

改变我们的数据分类，将国家分配到一个地区，是非常痛苦的。

我可以在 GeoChart 中设置用户定义的区域吗？指定要显示的地图中心、缩放级别和国家数据？

我敢说一个大黑客可以做到这一点，但与 Goggle 的 GeoChart 代码不同步并不是一个好主意。

我查看了新的 amMaps，但这似乎与 IE7 和 8 不兼容。

<shakefist at="Microsoft">Argh!</shakefist>

干杯

4

1 回答 1

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 有关）。

于 2013-01-11T02:14:01.320 回答