概览
地理图表是国家/地区、洲或区域的地图,其区域可通过以下三种方式之一进行标识:
- region 模式用于为整个区域(例如国家/地区、省级行政区或州/省级行政区)着色。
- 标记模式使用圆形来指定根据您指定的值缩放的区域。
- 文本模式使用标识符(例如“俄罗斯”或“亚洲”)。
地理图表使用 SVG 或 VML 在浏览器中渲染。请注意,地理图表不可滚动或可拖动,并且是线条绘制而不是地形地图;如果您需要任何这类信息,请考虑地图可视化。
地区地理图表
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':['geochart'], }); google.charts.setOnLoadCallback(drawRegionsMap); function drawRegionsMap() { var data = google.visualization.arrayToDataTable([ ['Country', 'Popularity'], ['Germany', 200], ['United States', 300], ['Brazil', 400], ['Canada', 500], ['France', 600], ['RU', 700] ]); var options = {}; var chart = new google.visualization.GeoChart(document.getElementById('regions_div')); chart.draw(data, options); } </script> </head> <body> <div id="regions_div" style="width: 900px; height: 500px;"></div> </body> </html>
标记地理图表
markers
样式使用您指定的颜色和大小在地理图表上的指定位置渲染圆形。
尝试将鼠标悬停在罗马周围杂乱的标记上,此时系统会打开一个放大镜,显示更详细的标记。(Internet Explorer 8 或更低版本不支持放大镜。)
<html> <head> <script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script> <script type='text/javascript'> google.charts.load('current', { 'packages': ['geochart'], // Note: Because markers require geocoding, you'll need a mapsApiKey. // See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings 'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY' }); google.charts.setOnLoadCallback(drawMarkersMap); function drawMarkersMap() { var data = google.visualization.arrayToDataTable([ ['City', 'Population', 'Area'], ['Rome', 2761477, 1285.31], ['Milan', 1324110, 181.76], ['Naples', 959574, 117.27], ['Turin', 907563, 130.17], ['Palermo', 655875, 158.9], ['Genoa', 607906, 243.60], ['Bologna', 380181, 140.7], ['Florence', 371282, 102.41], ['Fiumicino', 67370, 213.44], ['Anzio', 52192, 43.43], ['Ciampino', 38262, 11] ]); var options = { region: 'IT', displayMode: 'markers', colorAxis: {colors: ['green', 'blue']} }; var chart = new google.visualization.GeoChart(document.getElementById('chart_div')); chart.draw(data, options); }; </script> </head> <body> <div id="chart_div" style="width: 900px; height: 500px;"></div> </body> </html>
显示比例标记
通常,标记地理图表会将最小的标记值显示为最小点。如果您想显示比例标记值(比如因为它们是百分比值),请使用 sizeAxis
选项明确设置 minValue
和 maxValue
。
例如,以下是西欧的地图,其中有三个国家的法国和德国人口和区域。人口均为绝对数(例如(法国为 6500 万),但面积占总面积的百分比:法国标记显示为紫色,因为其人口中等,但大小为 50(满分为 100),因为它包含 50% 的总面积。
在此代码中,我们使用 sizeAxis
指定 0 到 100 之间的标记大小。我们还使用包含 RGB 值的 colorAxis
以填充范围(从橙色到蓝色)来显示总体,此范围非常适合有色觉缺陷的用户。最后,根据本文档后面的“内容层次结构和代码”部分,我们指定西欧的 region
为 155。
<html> <head> <script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script> <script type='text/javascript'> google.charts.load('current', { 'packages': ['geochart'], // Note: Because markers require geocoding, you'll need a mapsApiKey. // See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings 'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY' }); google.charts.setOnLoadCallback(drawMarkersMap); function drawMarkersMap() { var data = google.visualization.arrayToDataTable([ ['Country', 'Population', 'Area Percentage'], ['France', 65700000, 50], ['Germany', 81890000, 27], ['Poland', 38540000, 23] ]); var options = { sizeAxis: { minValue: 0, maxValue: 100 }, region: '155', // Western Europe displayMode: 'markers', colorAxis: {colors: ['#e7711c', '#4374e0']} // orange to blue }; var chart = new google.visualization.GeoChart(document.getElementById('chart_div')); chart.draw(data, options); }; </script> </head> <body> <div id="chart_div" style="width: 900px; height: 500px;"></div> </body> </html>
文本地理图表
您可以使用 displayMode:
text
将文本标签叠加到地理图表上。
var data = google.visualization.arrayToDataTable([ ['Country', 'Popularity'], ['South America', 600], ['Canada', 500], ['France', 600], ['Russia', 700], ['Australia', 600] ]); var options = { displayMode: 'text' };
<html> <head> <script type='text/javascript' src="https://www.gstatic.com/charts/loader.js"></script> <div id="regions_div" style="width: 900px; height: 500px;"></div> <script type="text/javascript"> google.charts.load('current', { 'packages': ['geochart'], // Note: Because this chart requires geocoding, you'll need a mapsApiKey. // See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings 'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY' }); google.charts.setOnLoadCallback(drawRegionsMap); function drawRegionsMap() { var data = google.visualization.arrayToDataTable([ ['Country', 'Popularity'], ['South America', 600], ['Canada', 500], ['France', 600], ['Russia', 700], ['Australia', 600] ]); var options = { displayMode: 'text' }; var chart = new google.visualization.GeoChart(document.getElementById('regions_div')); chart.draw(data, options); } </script> </head> <body> <div id="chart_div" style="width: 900px; height: 500px;"></div> </body> </html>
为图表着色
您可以通过以下几种方式自定义 GeoChart 的颜色:
colorAxis
:要用于数据表中的区域的颜色光谱。backgroundColor
:图表的背景颜色。datalessRegionColor
:分配给没有关联数据的区域的颜色。defaultColor
:在数据表中分配给值为null
或未指定的区域的颜色。
colorAxis
选项非常重要:它可以为数据值指定颜色范围。在 colorAxis
数组中,第一个元素是为数据集中最小值指定的颜色,最后一个元素是为数据集中最大值指定的颜色。如果您指定两种以上的颜色,则它们之间会进行插值。
在下图中,我们将使用全部四个选项。colorAxis
用于使用泛非国旗的颜色显示非洲,这些国家使用纬度(从北部的红色到黑色,再到南部的绿色)。backgroundColor
选项用于为背景颜色设置浅蓝色,datalessRegionColor
表示非非洲国家/地区为浅粉色,defaultColor
表示马达加斯加。
var options = { region: '002', // Africa colorAxis: {colors: ['#00853f', 'black', '#e31b23']}, backgroundColor: '#81d4fa', datalessRegionColor: '#f8bbd0', defaultColor: '#f5f5f5', };
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', { 'packages':['geochart'], // Note: Because this chart requires geocoding, you'll need mapsApiKey. // See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings 'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY' }); google.charts.setOnLoadCallback(drawRegionsMap); function drawRegionsMap() { var data = google.visualization.arrayToDataTable([ ['Country', 'Latitude'], ['Algeria', 36], ['Angola', -8], ['Benin', 6], ['Botswana', -24], ['Burkina Faso', 12], ['Burundi', -3], ['Cameroon', 3], ['Canary Islands', 28], ['Cape Verde', 15], ['Central African Republic', 4], ['Ceuta', 35], ['Chad', 12], ['Comoros', -12], ['Cote d\'Ivoire', 6], ['Democratic Republic of the Congo', -3], ['Djibouti', 12], ['Egypt', 26], ['Equatorial Guinea', 3], ['Eritrea', 15], ['Ethiopia', 9], ['Gabon', 0], ['Gambia', 13], ['Ghana', 5], ['Guinea', 10], ['Guinea-Bissau', 12], ['Kenya', -1], ['Lesotho', -29], ['Liberia', 6], ['Libya', 32], ['Madagascar', null], ['Madeira', 33], ['Malawi', -14], ['Mali', 12], ['Mauritania', 18], ['Mauritius', -20], ['Mayotte', -13], ['Melilla', 35], ['Morocco', 32], ['Mozambique', -25], ['Namibia', -22], ['Niger', 14], ['Nigeria', 8], ['Republic of the Congo', -1], ['Réunion', -21], ['Rwanda', -2], ['Saint Helena', -16], ['São Tomé and Principe', 0], ['Senegal', 15], ['Seychelles', -5], ['Sierra Leone', 8], ['Somalia', 2], ['Sudan', 15], ['South Africa', -30], ['South Sudan', 5], ['Swaziland', -26], ['Tanzania', -6], ['Togo', 6], ['Tunisia', 34], ['Uganda', 1], ['Western Sahara', 25], ['Zambia', -15], ['Zimbabwe', -18] ]); var options = { region: '002', // Africa colorAxis: {colors: ['#00853f', 'black', '#e31b23']}, backgroundColor: '#81d4fa', datalessRegionColor: '#f8bbd0', defaultColor: '#f5f5f5', }; var chart = new google.visualization.GeoChart(document.getElementById('geochart-colors')); chart.draw(data, options); }; </script> </head> <body> <div id="geochart-colors" style="width: 700px; height: 433px;"></div> </body> </html>
正在加载
google.charts.load
软件包名称为 "geochart"
。请注意,您不应复制我们的 mapsApiKey,这样做不起作用。只要您的图表不需要地理编码或使用非标准代码标识位置,您就不需要 mapsApiKey。如需了解详情,请参阅加载设置。
google.charts.load('current', { 'packages': ['geochart'], // Note: if your chart requires geocoding or uses nonstandard codes, you'll // need to get a mapsApiKey for your project. The one below won't work. // See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings 'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY' });
地理图表可视化类名称为 google.visualization.GeoChart
。
var visualization = new google.visualization.GeoChart(container);
数据格式
DataTable 的格式取决于您使用的显示模式:regions
、markers
或 text
。
区域模式格式
地理位置在一列中输入,外加一个可选列,如下所述:
-
地区位置 [字符串,必需] - 要突出显示的区域。接受以下所有格式。您可以在不同的行中使用不同的格式:
- 国家/地区名称,以字符串形式表示(例如“英格兰”)、大写字母 ISO-3166-1 alpha-2 代码或其英文等效文本(例如“GB”或“英国”)。
- 大写的 ISO-3166-2 区域代码名称,或其英文等效文本(例如“US-NJ”或“New Jersey”)。
- 都市区号。这些三位数的都市圈代码用于指定各种区域;仅支持美国代码。请注意,这些代码与电话区号不同。
region
属性支持的任何值。
-
Region color [数字,可选] - 用于根据此区域指定的比例向此区域分配颜色的可选数字列。如果此列不存在,则所有区域都将采用相同的颜色。如果列存在,则不允许 null 值。值会根据
sizeAxis.minValue
/sizeAxis.maxValue
值或colorAxis.values
属性中指定的值(若提供)进行缩放。
标记模式格式
列数因所使用的标记格式以及其他可选列而异。
-
标记位置 [必需]
或者
第一列是特定字符串地址(例如“1600 Pennsylvania Ave”)。前两列是数字,第一列是纬度,第二列是经度。
注意:尽管我们建议您针对“地区”模式使用 ISO 3166 代码,但“标记”模式最适合针对地区较长的名称(如德国、巴拿马等)。这是因为在“标记”模式下,地理图表使用 Google 地图对位置进行地理编码(将字符串位置转换为纬度和经度)。这可能会导致不明确的地理位置无法按预期进行地理编码;例如“DE”代表德国或特拉华州,“PA”代表巴拿马或宾夕法尼亚州。
-
Marker color [数字,可选] 下一列是选填的数字列,用于根据
colorAxis.colors
属性中指定的比例值向此标记分配颜色。如果此列不存在,则所有标记的颜色都相同。如果列存在,则不允许 null 值。各个值会按照彼此的相对比例进行缩放,或绝对为在colorAxis.values
属性中指定的值。 - Marker size [数字,可选] 可选的数字列,用于分配标记大小(相对于其他标记大小)。如果此列不存在,系统将使用上一列中的值(如果同样未提供颜色列,则使用默认大小)。如果列存在,则不允许 null 值。
文本模式格式
系统会在第一列中输入标签,外加一个可选列:
- 文本标签 [字符串,必需] 特定字符串地址(例如“1600 Pennsylvania Ave”)。
- 文本大小 [数字,可选] 第二列是用于分配标签大小的可选数字列。如果此列不存在,则所有标签的大小都相同。
配置选项
名称 | |
---|---|
backgroundColor |
图表主区域的背景颜色。可以是简单的 HTML 颜色字符串(例如 类型:字符串或对象
默认:白色
|
backgroundColor.fill |
图表的填充颜色,以 HTML 颜色字符串表示。 类型:字符串
默认:白色
|
backgroundColor.stroke 中 |
图表边框的颜色,采用 HTML 颜色字符串的形式。 类型:字符串
默认:'#666'
|
backgroundColor.strokeWidth |
边框宽度(以像素为单位)。 类型:数字
默认:0
|
colorAxis |
用于指定颜色列值与颜色或渐变比例之间的映射的对象。 要指定此对象的属性,您可以使用对象字面量表示法,如下所示: {minValue: 0, colors: ['#FF0000', '#00FF00']} Type:对象
默认:null
|
colorAxis.minValue |
如果存在,请指定图表颜色数据的最小值。此值及更低的颜色值将呈现为 类型:数字
默认:图表数据中颜色列的最小值
|
colorAxis.maxValue |
如果存在,请指定图表颜色数据的最大值。此值及以上的颜色值将呈现为 类型:数字
默认:图表数据中颜色列的最大值
|
colorAxis.values |
如果存在,则控制值如何与颜色相关联。每个值都与 类型:数字数组
默认:null
|
colorAxis.colors |
要分配给可视化图表中的值的颜色。字符串数组,其中每个元素都是一个 HTML 颜色字符串,例如: 类型:颜色字符串数组
默认:null
|
datalessRegionColor |
分配给没有关联数据的区域的颜色。 类型:字符串
默认:“#F5F5F5”
|
defaultColor |
当位置(例如, 类型:字符串
默认:'#267114'
|
显示模式 |
这是哪类地理图表。DataTable 格式必须与指定的值一致。支持使用以下值:
类型:字符串
默认:自动
|
域 |
将地理图表显示为来自此区域。例如,如果将 类型:字符串
默认:null
|
启用地区互动 |
如果为 true,则启用区域互动,包括将鼠标悬停在鼠标上时焦点和工具提示详述,以及在鼠标点击时选择和触发 在区域模式下,默认值为 true;在标记模式下,默认值为 false。 类型:布尔值
默认:自动
|
forceIFrame |
在内嵌框架内绘制图表。(请注意,在 IE8 中,系统会忽略此选项;所有 IE8 图表都是在 iframe 中绘制的)。 类型:布尔值
默认:false
|
地理图表版本 |
GeoChart 边界数据的版本。有 类型:数字
默认:10
|
高度 |
可视化内容的高度(以像素为单位)。默认高度为 347 像素,除非指定了 类型:数字
默认:自动
|
keepAspectRatio |
如果为 true,则绘制地理图时将以其自然宽高比的最大尺寸绘制。如果仅指定其中一个
如果为 false,则地理图表将拉伸为 类型:布尔值
默认:true
|
传奇 |
一个具有成员的对象,用于配置图例的各个方面,如果未显示图例,则为“无”。如需指定此对象的属性,您可以使用对象字面量表示法,如下所示: {textStyle: {color: 'blue', fontSize: 16}} 类型:对象/“none”
默认:null
|
图例数字 |
数字标签的格式字符串。这是 ICU 模式集的一部分。例如, 类型:字符串
默认:自动
|
图例样式 |
用于指定图例文本样式的对象。此对象的格式如下: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
Type:对象
默认:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
区域 |
要在地理图表上显示的区域。(系统还会显示周围的区域。)可以是以下任一项:
类型:字符串
默认值:“world”
|
放大镜 |
具有用于配置放大镜各个方面的成员的对象。如需指定此对象的属性,您可以使用对象字面量表示法,如下所示: {enable: true, zoomFactor: 7.5} 类型:对象
默认:
{enable: true, zoomFactor: 5.0} |
magnifyingGlass.enable |
如果为 true,那么当用户停留在杂乱的标记上时,系统会打开一个放大镜。 注意:此功能在不支持 SVG 的浏览器(即 Internet Explorer 8 或更低版本)中不受支持。 类型:布尔值
默认:true
|
magnificationGlass.zoomFactor |
放大镜的缩放比例。可以是大于 0 的任意数字。 类型:数字
默认:5.0
|
标记不透明度 |
标记的不透明度,其中 0.0 表示完全透明,1.0 表示完全不透明。 类型:数字,0.0 - 1.0
默认:1.0
|
区域代码版本 |
区域编码器数据的版本。有 类型:数字
默认:0
|
分辨率 |
地理图表边框的分辨率。请选择以下某个值:
类型:字符串
默认:“countries”
|
sizeAxis [尺码轴] |
一个具有成员的对象,用于配置值与气泡大小的关联方式。如需指定此对象的属性,您可以使用对象字面量表示法,如下所示: {minValue: 0, maxSize: 20} Type:对象
默认:null
|
sizeAxis.maxSize |
可能的最大气泡的最大半径(以像素为单位)。 类型:数字
默认:12
|
sizeAxis.maxValue |
要映射到 类型:数字
默认:图表数据中尺寸列的最大值
|
sizeAxis.minSize |
可能的最小气泡的最小半径(以像素为单位)。 类型:数字
默认:3
|
sizeAxis.minValue |
要映射到 类型:数字
默认:图表数据中大小列的最小值
|
工具提示 |
一个具有成员的对象,用于配置各种提示元素。如需指定此对象的属性,您可以使用对象字面量表示法,如下所示: {textStyle: {color: '#FF0000'}, showColorCode: true} Type:对象
默认:null
|
提示文本 |
用于指定提示文本样式的对象。此对象的格式如下: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
Type:对象
默认:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
tooltip.trigger |
使提示显示的用户交互:
类型:字符串
默认:焦点
|
width |
可视化内容的宽度(以像素为单位)。默认宽度为 556 像素,除非指定了 类型:数字
默认:自动
|
大洲层次结构和代码
通过将 region
选项设置为以下 3 位代码之一,可以显示大洲/次大陆的地理图表。这些代码和层次结构的例外情况是联合国统计司所开发和维护的。
洲 | 次大陆 | 国家/地区 |
---|---|---|
002 - 非洲 |
015 - 北非 |
DZ、EG、EH、LY、MA、SD、SS、TN |
011 - 西非 |
。 | |
017 - 中东 |
AO、CD、ZR、CF、CG、CM、GA、GQ、ST、TD | |
014 - 东非 |
。 | |
018 - 南非 |
BW、LS、NA、SZ、ZA | |
150 - 欧洲 |
154 - 北欧 |
。 |
155 - 西欧 |
AT、BE、CH、DE、DD、FR、FX、LI、LU、MC、NL | |
151 - 东欧 |
BG、BY、CZ、HU、MD、PL、RO、RU、SU、SK、UA | |
039 - 南欧 |
。 | |
019 - 美洲 |
021 - 北美洲 |
BM、CA、GL、PM、US |
029 - 加勒比海 |
。 | |
013 - 中美洲 |
BZ、CR、GT、HN、MX、NI、PA、SV | |
005 - 南美 |
AR、BO、BR、CL、CO、EC、FK、GF、GY、 PE、PY、 | |
142 - 亚洲 |
143 - 中亚 |
TM、TJ、KG、KZ、UZ |
030 - 东亚 |
CN、HK、JP、KP、KR、MN、MO、TW | |
034 - 南亚 |
AF、BD、BT、IN、IR、LK、MV、NP、PK | |
035 - 东南亚 |
BN、ID、KH、LA、MM、BU、MY、PH、SG、TH、TL{/22 | |
145 - 西亚 |
。 | |
009 - 大洋洲 |
053 - 澳大利亚和新西兰 |
AU、NF、NZ |
054 - 美拉尼西亚 |
FJ、NC、PG、SB、VU | |
057 - 密克罗尼西亚 |
FM、GU、KI、MH、MP、NR、PW | |
061 - 波利尼西亚 |
AS、CK、NU、PF、PN、TK、TO、TV、WF、WS |
方法
方法 | |
---|---|
clearChart() |
清除该图表,并释放其分配的所有资源。 返回值类型:无
|
draw(data, options) |
绘制图表。图表仅在 返回值类型:无
|
getImageURI() |
返回序列化为图片 URI 的图表。 在绘制图表之后调用此方法。 请参阅打印 PNG 图表。 返回值类型:返回值类型
|
getSelection() |
返回一组选定图表实体。
可选择的实体是指具有指定值的区域。
在此图表中,在任何时候都只能选择一个实体。
返回值类型:一组选择元素
|
setSelection() |
选择指定的图表实体。取消之前选择的所有内容。
可选择的实体是指具有指定值的区域。
对于此图表,一次只能选择一个实体。
返回值类型:无
|
事件
名称 | |
---|---|
error |
尝试渲染图表出错时触发。 属性:ID、消息
|
ready |
此图表已准备好进行外部方法调用。如果您想与图表交互,并在绘制后调用方法,则应在调用 属性:无
|
regionClick |
点击某个区域时调用。对于在“region”选项中指定的特定国家/地区(如果列出了特定国家/地区),则不会抛出此参数。
属性:具有单个属性
region 的对象,它是 ISO-3166 格式的字符串,用于描述点击的区域。 |
select |
在用户点击视觉实体时触发。如需了解所选内容,请调用 属性:无
|
数据政策
Google 将对营业地点进行地理编码。任何不需要地理编码的数据都不会发送到任何服务器。 请参阅 Google 地图服务条款,详细了解其数据政策。