可视化:地理图

概览

地理图是指国家/地区、洲或区域的地图,其中包含颜色和值应分配给特定区域。值以色标显示,您可以为区域指定可选的悬停文本。地图使用嵌入式 Flash 播放器在浏览器中渲染。请注意,地图不可滚动或可拖动,但可以配置为允许缩放。

示例

我们在这里有两个示例:一个使用区域显示样式,另一个使用标记显示样式

区域示例

区域样式会使用您分配的值对应的颜色填充整个区域(通常是国家/地区)。在代码中分配 options['dataMode'] = 'regions' 以指定区域样式。

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {
        'packages':['geomap'],
        // 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': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
      });
      google.charts.setOnLoadCallback(drawMap);

      function drawMap() {
        var data = google.visualization.arrayToDataTable([
          ['Country', 'Popularity'],
          ['Germany', 200],
          ['United States', 300],
          ['Brazil', 400],
          ['Canada', 500],
          ['France', 600],
          ['RU', 700]
        ]);

        var options = {};
        options['dataMode'] = 'regions';

        var container = document.getElementById('regions_div');
        var geomap = new google.visualization.GeoMap(container);

        geomap.draw(data, options);
      };
    </script>
  </head>
  <body>
    <div id="regions_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

标记示例

“标记”样式用于在您指定的区域上方显示一个圆圈,该圆圈的大小和颜色用于表示值。

<html>
<head>
  <script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
  <script type='text/javascript'>
   google.charts.load('current', {'packages': ['geomap']});
   google.charts.setOnLoadCallback(drawMap);

    function drawMap() {
      var data = google.visualization.arrayToDataTable([
        ['City', 'Popularity'],
        ['New York', 200],
        ['Boston', 300],
        ['Miami', 400],
        ['Chicago', 500],
        ['Los Angeles', 600],
        ['Houston', 700]
      ]);

      var options = {};
      options['region'] = 'US';
      options['colors'] = [0xFF8747, 0xFFB581, 0xc06000]; //orange colors
      options['dataMode'] = 'markers';

      var container = document.getElementById('map_canvas');
      var geomap = new google.visualization.GeoMap(container);
      geomap.draw(data, options);
    };

  </script>
</head>

<body>
    <div id='map_canvas'></div>
</body>

</html>

正在加载

google.charts.load 软件包名称为 "geomap"

  google.charts.load('current', {'packages': ['geomap']});

地理图可视化类名称为 google.visualization.GeoMap

  var visualization = new google.visualization.GeoMap(container);

数据格式

支持两种地址格式,每种格式支持的列数不同,并且每列的数据类型也不同。表中的所有地址必须使用其中之一;您不能混合使用类型。

  • 格式 1:纬度/经度位置。此格式仅在 dataMode 选项是“标记”时有效。如果使用这种格式,则无需添加 Google 地图 JavaScript。此位置在两列中输入,外加两列(可选):
    1. [数字,必填] 纬度。正数表示北,负数表示南。
    2. [数字,必填] 经度。正数表示东方,负数表示西方。
    3. [Number, Optional] 当用户将鼠标悬停在此区域上时,系统会显示一个数值。如果使用的是第 4 列,则必须提供此列。
    4. [字符串,可选] 用户将鼠标悬停在此区域上时显示的其他字符串文本。
  • 格式 2:地址、国家/地区名称、地区名称位置或美国都市圈代码。此格式适用于设置为“标记”或“区域”的 dataMode 选项。此位置在一列中输入,外加两列(可选):
    1. [String, required] 表示地图位置。接受以下格式:
      • 具体地址(例如“北京市东城区王府井大街 19 号”)。
      • 国家/地区名称,以字符串表示(例如“英格兰”)、大写 ISO-3166 代码或其英文文本等效项(例如“GB”或“英国”)。
      • 大写的 ISO-3166-2 区域代码名称,或其英文等效文本(例如“US-NJ”或“New Jersey”)。注意:只有在 dataMode 选项设置为“regions”时,才能指定区域。
      • 都市区号。这些三位数的都市圈代码用于指定各种区域;仅支持美国代码。请注意,这些代码与电话区号不同
    2. [Number, Optional] 当用户将鼠标悬停在此区域上时,系统会显示一个数值。如果使用的是第 3 列,则必须填写此列。
    3. [字符串,可选] 用户将鼠标悬停在此区域上时显示的其他字符串文本。

注意:一个地图最多可显示 400 个条目;如果您的 DataTable 或 DataView 包含的行数超过 400,则只显示前 400 行。最快模式包括 dataMode='regions'(带有指定为 ISO 代码的位置)和 dataMode='markers'(包含纬度/经度实体)。最慢的模式是带有字符串地址的 dataMode='markers'

重要提示DataTable 必须在您要使用的任何列前面添加每个可选列。例如,如果您要指定纬度/经度表格,并且只想使用第 1、2 和 4 列,您的 DataTable 仍然必须定义第 3 列(尽管您无需向其中添加任何值):

dataTable = new google.visualization.DataTable();
dataTable.addRows(1);
dataTable.addColumn('number', 'LATITUDE', 'Latitude');
dataTable.addColumn('number', 'LONGITUDE', 'Longitude');
dataTable.addColumn('number', 'VALUE', 'Value'); // Won't use this column, but still must define it.
dataTable.addColumn('string', 'HOVER', 'HoverText');

dataTable.setValue(0,0,47.00);
dataTable.setValue(0,1,-122.00);
dataTable.setValue(0,3,"Hello World!");

配置选项

名称 类型 默认 说明
region 字符串 “world”

要在地图上显示的区域。(系统还会显示周围的环境。)可以是国家/地区代码(采用大写的 ISO-3166 格式),也可以是以下字符串之一:

  • world -(整个世界)
  • us_metro -(美国、都市圈)
  • 005 -(南美)
  • 013 -(中美洲)
  • 021 -(北美洲)
  • 002 -(非洲全境)
  • 017 -(中非)
  • 015 -(非洲北部)
  • 018 -(南非)
  • 030 -(东亚)
  • 034 -(南亚)
  • 035 -(亚太地区)
  • 009 -(大洋洲)
  • 145 -(中东)
  • 143 -(中亚)
  • 151 -(北亚)
  • 154 -(北欧)
  • 155 -(西欧)
  • 039 -(南欧)

地理图不会启用滚动或拖动行为,只会启用有限的缩放行为。您可以通过设置 showZoomOut 属性启用基本缩小功能。

dataMode 字符串 “区域”

如何在地图上显示值。系统支持以下两个值:

  • regions - 使用适当的颜色着色整个区域。此选项无法用于纬度/经度地址。 请参阅区域示例
  • markers - 以区域显示点,颜色和大小表示值。请参阅标记示例
width 字符串 “556px” 可视化图表的宽度。如果未指定单位,则默认单位为像素。
height 字符串 “347px” 可视化图表的高度。如果未指定单位,则默认单位为像素。
colors RGB 数字数组,格式为 0xRRGGBB [0xE0FFD4、0xA5EF63、0x50AA00、0x267114] 要分配给可视化图表中值的颜色渐变。您必须至少提供两个值;渐变将包含您的所有值以及计算得出的中间值,其中最小颜色为最小值,最深颜色为最高值。
showLegend 布尔值 true 如果为 true,则显示地图的图例。
showZoomOut 布尔值 false 如果为 true,则显示一个带有 zoomOutLabel 属性指定的标签的按钮。请注意,除了抛出 zoomOut 事件外,该按钮在用户点击时不会执行任何操作。 如需处理缩放操作,请捕获此事件并更改 region 选项。 仅当 region 选项小于世界视图时,您才能指定 showZoomOut。启用放大行为的一种方式是监听 regionClick 事件,将 region 属性更改为适当的区域,然后重新加载地图。
zoomOutLabel 字符串 “缩小” 缩放按钮的标签。

方法

方法 返回值类型 说明
draw(data, options) 绘制地图。可以在绘制完成之前返回(请参阅 drawingDone() 事件)。
getSelection() 选择元素数组 标准 getSelection() 实现。所选元素是行。此方法仅在 dataMode 选项为“regions”时有效。您只能选择具有指定值的区域。
setSelection(selection) 标准 setSelection() 实现。将所选内容视为行选择,并且支持多行选择。只能选择具有指定值的区域。

事件

名称 说明 属性
error 尝试渲染图表出错时触发。 id、message
select

用户点击具有指定值的区域时会触发此事件。如需了解所选内容,请调用 getSelection()。仅当 dataMode 选项设置为“regions”时可用。

注意:由于存在某些限制,因此,如果您在浏览器中将网页作为文件(例如"file://"),而不是服务器(例如“http://www”)。

regionClick

点击某个区域时调用。同时适用于“区域”和“标记”dataMode。 但是,在标记模式下,对于在“region”选项中分配的特定国家/地区(如果列出了特定国家/地区),则不会抛出此属性。

注意:出于某些限制,如果您以文件(例如"file://"),而不是服务器(例如“http://www”)。

具有单个属性 region 的对象,该对象是一个 ISO-3166 格式的字符串,用于说明所点击的区域。
zoomOut

在用户点击缩小按钮时调用。如需处理缩放操作,请捕获此事件并更改 region 选项。

注意:由于存在某些限制,因此,如果您在浏览器中将网页作为文件(例如"file://"),而不是服务器(例如“http://www”)。

drawingDone 在地理图绘制完毕时调用。

数据政策

Google 将对营业地点进行地理编码。任何不需要地理编码的数据都不会发送到任何服务器。 请参阅 Google 地图服务条款,详细了解其数据政策。

说明

根据 Flash 安全设置,如果从浏览器的文件位置(如 file:///c:/webhost/myhost/myviz.html)而不是网络服务器网址(如 http://www.myhost.com/myviz.html)访问 Flash,则此类情况(以及所有基于 Flash 的可视化效果)可能无法正常运行。这通常只是一个测试问题。如 Macromedia 网站中所述,您可以解决此问题。