Google图表中的用户指定区域和国家/地区集合

时间:2013-01-10 11:41:10

标签: data-visualization google-visualization

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

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

例如Google使用联合国:

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

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

  • 北美
  • 拉丁美洲

阻抗爆炸!

正如我所看到的,这意味着当南美洲被点击拉丁美洲时,用户将失去对墨西哥的看法。美国的图表太高而且太薄了,因此必须缩小到太远而无法使用。

更改我们的数据分类,分配到某个地区的国家非常痛苦。

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

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

我看过新的amMaps,但这似乎不是IE7& 8兼容。

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

欢呼声

1 个答案:

答案 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有关。)