概览
地理图表是国家/地区、大洲或区域的地图,其中的区域通过以下三种方式之一进行标识:
- region 模式用于为整个区域(例如国家/地区、省级行政区或州/省/自治区/直辖市)设置颜色。
- 标记模式使用圆形来指定根据您指定的值进行缩放的区域。
- text 模式会使用标识符(例如,“俄罗斯”或“亚洲”)。
地理图表使用 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>
为图表着色
您可以通过以下几种方式自定义 GeoCharts 的颜色:
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”或“United Kingdom”)。
- 大写的 ISO-3166-2 区域代码名称或对应的英文文本(例如“US-NJ”或“New Jersey”)。
- 都市区号。这些是用于表示不同区域的三位数都市圈代码;仅支持美国代码。请注意,这些区号与电话区号不同。
region
属性支持的任何值。
-
区域颜色 [数字(可选)- 可选的数字列,用于根据
colorAxis.colors
属性中指定的比例为此区域分配颜色。如果此列不存在,所有区域都将以相同的颜色显示。如果存在该列,则不允许 null 值。值将相对于sizeAxis.minValue
/sizeAxis.maxValue
值或colorAxis.values
属性中指定的值(如果提供)进行缩放。
标记模式格式
列数因所使用的标记格式以及其他可选列而异。
-
标记位置 [必需属性]
或
第一列是一个特定的字符串地址(例如“1600 Pennsylvania Ave”)。前两列是数字,第一列是纬度,第二列是经度。
注意:虽然我们建议为“区域”模式使用 ISO 3166 代码,但“标记”模式最适合用于较长的区域名称(如德国、巴拿马等)。这是因为,地理图表在“标记”模式下,会使用 Google 地图对位置进行地理编码(将字符串位置转换为纬度和经度)。这可能会导致模糊位置无法按照您的预期进行地理编码;例如,“DE”代表德国或特拉华,“PA”代表巴拿马或宾夕法尼亚州。
-
标记颜色 [数字,可选] 下一列是可选的数字列,用于根据
colorAxis.colors
属性中指定的缩放比例为此标记分配颜色。如果此列不存在,所有标记都将以相同的颜色显示。如果存在该列,则不允许 null 值。值是相对于彼此或colorAxis.values
属性中指定的值进行绝对缩放。 - 标记大小 [数字,可选] 一个可选的数字列,用于分配相对于其他标记大小的标记大小。如果此列不存在,则系统会使用前一列中的值(如果也未提供颜色列,则使用默认大小)。如果存在该列,则不允许 null 值。
文本模式格式
该标签输入到第一列,外加一个可选列:
- 文本标签 [字符串,必需属性] 特定字符串地址(例如“1600 Pennsylvania Ave”)。
- 文字大小 [数字,可选] 第二列是可选的数字列,用于分配标签的大小。如果此列不存在,则所有标签的大小将相同。
配置选项
名称 | |
---|---|
backgroundColor |
图表主要区域的背景颜色。可以是简单的 HTML 颜色字符串(例如 类型:字符串或对象
默认:白色
|
backgroundColor.fill |
图表的填充颜色,采用 HTML 颜色字符串的形式。 类型:字符串
默认:白色
|
backgroundColor.stroke |
图表边框的颜色,以 HTML 颜色字符串表示。 类型:字符串
默认:“#666”
|
backgroundColor.strokeWidth |
边框宽度(以像素为单位)。 类型:数字
默认值:0
|
colorAxis |
用于指定颜色列值和颜色之间的映射或渐变比例的对象。 要指定此对象的属性,您可以使用对象字面量表示法,如下所示: {minValue: 0, colors: ['#FF0000', '#00FF00']} 类型:object
默认值:null
|
colorAxis.minValue |
如果存在,则指定图表颜色数据的最小值。此值及以下值的颜色数据值将渲染为 类型:数字
默认:图表数据中颜色列的最小值
|
colorAxis.maxValue |
如果存在,则指定图表颜色数据的最大值。此值及更高级别的颜色数据值将渲染为 类型:数字
默认:图表数据中颜色列的最大值
|
colorAxis.values |
如果存在,用于控制值与颜色的关联方式。每个值都与 类型:数字数组
默认值:null
|
colorAxis.colors |
要为可视化图表中的值指定的颜色。字符串数组,其中每个元素都是一个 HTML 颜色字符串,例如: 类型:颜色字符串数组
默认值:null
|
datalessRegionColor |
分配给没有关联数据的区域的颜色。 类型:字符串
默认:“#F5F5F5”
|
defaultColor |
当位置(例如, 类型:字符串
默认:“#267114”
|
displayMode |
这是哪类地理图表。DataTable 格式必须与指定的值一致。支持以下值:
类型:字符串
默认:“auto”
|
网域 |
显示地理图表,就像是从此区域提供服务一样。例如,如果将 类型:字符串
默认值:null
|
enableRegionInteractivity |
如果为 true,则启用区域互动,包括在鼠标悬停时显示焦点和工具提示,以及选择区域以及在点击鼠标时触发 在区域模式下,默认值为 true,在标记模式下,默认值为 false。 类型:布尔值
默认:自动
|
forceIFrame |
在内嵌框架内绘制图表。(请注意,在 IE8 上,此选项会被忽略;所有 IE8 图表都是在 iframe 中绘制的。) 类型:布尔值
默认值:false
|
geochartVersion |
GeoChart 边界数据的版本。已发布 类型:数字
默认值:10
|
高度 |
可视化图表的高度(以像素为单位)。默认高度为 347 像素,除非指定 类型:数字
默认:auto
|
keepAspectRatio |
如果为 true,系统将以自然宽高比适合图表区域的最大尺寸绘制地理图表。如果仅指定
如果为 false,地理图表将拉伸至 类型:布尔值
默认值:true
|
传奇 |
包含成员的对象,用于配置图例的各个方面;如果不应显示图例,则为“none”。如需指定此对象的属性,您可以使用对象字面量表示法,如下所示: {textStyle: {color: 'blue', fontSize: 16}} 类型:对象/“none”
默认值:null
|
legend.numberFormat |
数字标签的格式字符串。这是
ICU 模式集
的一部分。
例如, 类型:字符串
默认:auto
|
legend.textStyle |
用于指定图例文本样式的对象。该对象的格式如下: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
类型:object
默认值:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
地区 |
要在地理图表上显示的区域。(周边区域也会显示。)可以是下列选项之一:
类型:字符串
默认:“世界”
|
magnifyingGlass |
一个对象,包含用于配置放大镜各个方面的成员。要指定此对象的属性,您可以使用对象字面量表示法,如下所示: {enable: true, zoomFactor: 7.5} 类型:对象
默认值:
{enable: true, zoomFactor: 5.0} |
magnifyingGlass.enable |
如果为 true,当用户停留在杂乱的标记上时,系统会打开一个放大镜。 注意:不支持 SVG 的浏览器(即 Internet Explorer 8 或更低版本)不支持此功能。 类型:布尔值
默认值:true
|
magnifyingGlass.zoomFactor |
放大镜的缩放比例。可以是任何大于 0 的数字。 类型:数字
默认值:5.0
|
markerOpacity |
标记的不透明度,0.0 表示完全透明,1.0 表示完全不透明。 类型:数字,0.0–1.0
默认值:1.0
|
regioncoderVersion |
区域编码器数据的版本。已发布 类型:数字
默认值:0
|
分辨率 |
地理图表边界的分辨率。请选择以下某个值:
类型:字符串
默认:“国家/地区”
|
sizeAxis |
一个对象,其中包含用于配置值与气泡大小的关联方式的成员。要指定此对象的属性,您可以使用对象字面量表示法,如下所示: {minValue: 0, maxSize: 20} 类型:object
默认值:null
|
sizeAxis.maxSize |
可能的最大气泡的半径上限(以像素为单位)。 类型:数字
默认值:12
|
sizeAxis.maxValue |
要映射到 类型:数字
默认:图表数据中大小列的最大值
|
sizeAxis.minSize |
可能的最小气泡的最小半径(以像素为单位)。 类型:数字
默认值:3
|
sizeAxis.minValue |
要映射到 类型:数字
默认:图表数据中大小列的最小值
|
提示 |
包含用于配置各种提示元素的成员的对象。要指定此对象的属性,您可以使用对象字面量表示法,如下所示: {textStyle: {color: '#FF0000'}, showColorCode: true} 类型:object
默认值:null
|
tooltip.textStyle |
一个用于指定提示文本样式的对象。该对象的格式如下: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
类型:object
默认值:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
tooltip.trigger |
导致显示提示的用户互动:
类型:字符串
默认:“focus”
|
宽度 |
可视化图表的宽度(以像素为单位)。默认宽度为 556 像素,除非指定 类型:数字
默认:auto
|
大洲层次结构和代码
通过将 region
选项设置为以下 3 位数代码之一,可以显示各大洲/次大陆的地理图表。这些规范和层次结构以
联合国统计司
开发和维护的为基础,但也存在一些例外情况。
大洲 | 次大陆 | 国家/地区 |
---|---|---|
002 - 非洲 |
015 - 非洲北部 |
DZ、EG、EH、LY、MA、SD、SS、TN |
011 - 非洲西部 |
BF、BJ、CI、CV、GH、GM、GN、GW、LR、ML、NE、MR2SHSLSN | |
017 - 中东和非洲 |
AO、CD、ZR、CF、CG、CM、GA、GQ、ST、TD | |
014 - 非洲东部 |
BI、DJ、ER、ET、KE、KM、MG、MU、MW、MZ、RERWSCSOTZUG | |
018 - 非洲南部 |
BW、LS、NA、SZ、ZA | |
150 - 欧洲 |
154 - 北欧 |
GG、JE、AX、DK、EE、FI、FO、GB、IE、IM、ISLV |
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 - 南欧 |
AD、AL、BA、ES、GI、GR、HR、IT、ME、MK、MT、 | |
019 - 美洲 |
021 - 北美洲 |
BM、CA、GL、PM、US |
029 - 加勒比地区 |
AG、AI、AN、AW、BB、BL、BS、CU、DM、DO、GDGPLCMS | |
013 - 中美洲 |
BZ、CR、GT、HN、MX、NI、PA、SV | |
005 - 南美洲 |
AR、BO、BR、CL、CO、EC、FK、GF、GY、PE、PY、PY{/2SRVE | |
142 - 亚洲 |
143 - 中亚 |
TM、TJ、KG、KZ、UZ |
030 - 东亚 |
中国、HK、日本、KP、韩国、MN、MO、台湾 | |
034 - 南亚 |
AF、BD、BT、IN、IR、LK、MV、NP、PK | |
035 - 东南亚 |
BN、ID、KH、LA、MM、BU、MY、PH、SG、TH、TLVN | |
145 - 西亚 |
AE、AM、AZ、BH、CY、GE、IL、IQ、JO、KW、 LB | |
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() |
清除图表,并释放为其分配的所有资源。 Return Type(返回类型):none
|
draw(data, options) |
绘制图表。只有在 Return Type(返回类型):none
|
getImageURI() |
返回已序列化为图片 URI 的图表。 在绘制图表之后调用此方法。 请参阅打印 PNG 图表。 返回类型:字符串
|
getSelection() |
返回所选图表实体的数组。
可选实体是已分配值的区域。
对于此图表,在任何给定时刻,只能选择一个实体。
返回类型:选择元素数组
|
setSelection() |
选择指定的图表实体。取消之前的所有选择。
可选实体是已分配值的区域。
对于此图表,一次只能选择一个实体。
Return Type(返回类型):none
|
事件
名称 | |
---|---|
error |
尝试渲染图表时出错时触发。 属性:id、message
|
ready |
该图表已准备好进行外部方法调用。如果您想与图表交互并在绘制图表后调用方法,则应在调用 属性:无
|
regionClick |
在点击区域时调用。对于“region”选项中分配的特定国家/地区(如果列出了特定国家/地区),则不会抛出该异常。
Properties:一个对象,包含单一属性
region ,它是 ISO-3166 格式的字符串,用于描述所点击的区域。
|
select |
当用户点击视觉实体时触发。如需了解已选择的内容,请调用 属性:无
|
数据政策
地点由 Google 地图进行地理编码。任何不需要地理编码的数据都不会发送到任何服务器。如需详细了解其数据政策,请参阅 Google 地图服务条款。