總覽
地理圖是國家/地區、洲別或區域的地圖,在以下列三種方式之一加以識別:
- region 模式會以不同顏色標示整個區域,例如國家/地區、省或州。
- 標記模式會使用圓形來指派區域,這些區域會根據您指定的值調整。
- 「text」(文字) 模式會使用 ID 來標示區域 (例如「俄羅斯」或「亞洲」)。
使用 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
。
舉例來說,這是西歐的地圖, 其中包含法國、德國和波蘭的人口與區域資料。人口數均為絕對數字 (例如法國為 6, 500 萬個),但這些區域都是佔整體的百分比:法國標記是彩色的,因為其人口處於中等狀態,但大小為 50 (最大可能為 100),因為其中涵蓋總面積的 50%。
在這個程式碼中,我們使用 sizeAxis
指定介於 0 到 100 之間的標記大小。我們也會使用搭配 RGB 值的 colorAxis
來顯示母體做為不同顏色的色彩範圍,從橘色到藍色,這種光譜對色覺障礙的使用者來說順暢無礙。最後,根據本文件下方的「內容階層與程式碼」一節,我們以 155 的 region
指定西歐。
<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
是用來使用 pan-African 標記顏色顯示非洲,並且使用各國家/地區的緯度:從北的紅色到黑色到南部的綠色。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);
資料格式
資料表的格式會因您使用的顯示模式而異:regions
、markers
或 text
。
區域模式格式
一個資料欄會輸入地區,再加上一個選用資料欄,如下所示:
-
區域位置 [字串,必要] - 要醒目顯示的區域。系統支援以下所有格式。你可以在不同的資料列中使用不同格式:
- 以字串表示的國家/地區名稱 (例如「英格蘭」)、大寫的 ISO-3166-1 alpha-2 代碼或對應的英文文字 (例如「GB」或「United Kingdom」)。
- 大寫的 ISO-3166-2 區碼名稱或英文文字對等項目 (例如「US-NJ」或「New Jersey」)。
- 「都會區代碼」。這些是三位數的都會區代碼,用於指定多個區域;僅支援美國代碼。請注意,這些電話與電話區碼「不」相同。
region
屬性支援的任何值。
-
區域顏色 [數字,選用] - 根據
colorAxis.colors
屬性中指定的比例,為這個區域指定顏色的選用數值欄。如果未提供這個資料欄,所有區域都會產生相同顏色。如果資料欄存在,則不得使用空值。系統會依據sizeAxis.minValue
/sizeAxis.maxValue
值或colorAxis.values
屬性指定的值 (如有提供) 縮放值。
標記模式格式
欄數會因使用的標記格式和其他選用資料欄而異。
-
標記位置 [必要]
或
第一欄是特定字串地址 (例如「1600 Pennsylvania Ave」)。前兩欄為數字,第一欄是緯度,第二欄是經度。
注意:雖然我們建議在「區域」模式中使用 ISO 3166 代碼,但「標記」模式搭配較長的區域 (例如德國、巴拿馬等) 時,效果最佳。這是因為在「標記」模式中,地理區域圖會使用 Google 地圖對地點進行地理編碼 (將字串位置轉換為經緯度位置)。這可能會導致系統無法像您預期的方式進行地理編碼;例如,「DE」代表德國或德拉瓦州,或是代表巴拿馬或賓州的「PA」。
-
標記顏色 [數字,選用] 下一欄是選用的數值欄,會根據
colorAxis.colors
屬性中指定的比例,為標記指定顏色。如果沒有這個資料欄,所有標記都會採用相同顏色。如果資料欄存在,則不得使用空值。值是相對縮放,或絕對值根據colorAxis.values
屬性中指定的值進行縮放。 - 標記大小 [數字,選用] 用於指定標記大小與其他標記大小的選用數值欄。如未提供這個資料欄,系統會採用先前資料欄的值 (如果同時未提供顏色欄,則會採用預設大小)。如果有資料欄,則不允許空值。
文字模式格式
請在第一欄中輸入標籤,另加上一個選用資料欄:
- 文字標籤 [String,必填] 特定字串地址 (例如「1600 Pennsylvania Ave」)。
- 文字大小 [數字,選填] 第二欄是選填的數字欄,用於指派標籤大小。如果沒有這個資料欄,所有標籤的大小都會相同。
設定選項
名稱 | |
---|---|
backgroundColor |
圖表主要區域的背景顏色。可以是簡單的 HTML 顏色字串 (例如 類型:字串或物件
預設:白色
|
backgroundColor.fill |
圖表填滿顏色,以 HTML 顏色字串表示。 類型:字串
預設:白色
|
backgroundColor.stroke |
圖表邊框顏色,以 HTML 顏色字串表示。 類型:字串
預設值:「#666」
|
backgroundColor.strokeWidth |
邊框寬度 (以像素為單位)。 類型:數字
預設值:0
|
colorAxis |
這個物件可指定顏色資料欄值與顏色或漸層比例之間的對應關係。如要指定這個物件的屬性,您可以使用物件常值標記法,如下所示: {minValue: 0, colors: ['#FF0000', '#00FF00']} 類型:物件
預設值: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 |
地理圖邊框資料版本。已推出 類型:數字
預設值:10
|
高度 |
視覺化內容的高度,以像素為單位。預設高度為 347 像素,但如果指定了 類型:數字
預設:自動
|
keepAspectRatio |
設為 true 時,地理圖將以自然顯示比例顯示在圖表區域中的最大尺寸。如果只指定
如果設為 False,地理圖會依照 類型:布林值
預設值:true
|
傳說 |
可讓成員設定圖例不同層面的物件;如果沒有任何圖例,則為「無」。如要指定這個物件的屬性,您可以使用物件常值標記法,如下所示: {textStyle: {color: 'blue', fontSize: 16}} 類型:物件/「無」
預設值:null
|
legend.numberFormat |
數字標籤的格式字串。這是
ICU 模式集
的子集。舉例來說, 類型:字串
預設:自動
|
legend.textStyle |
指定圖例文字樣式的物件。物件的格式如下: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
類型:物件
預設:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
地區 |
要在地理圖中顯示的區域。(同時也會顯示鄰近區域)。可以是下列其中一項:
類型:字串
預設:「world」
|
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
|
解析度 |
地理圖邊框的解析度。請選擇下列其中一個值:
類型:字串
預設: 'countries'
|
sizeAxis |
具備成員的物件,可設定值與對話框大小建立關聯的方式。如要指定這個物件的屬性,您可以使用物件常值標記法,如下所示: {minValue: 0, maxSize: 20} 類型:物件
預設值:null
|
sizeAxis.maxSize |
最大說明框的半徑上限,以像素為單位。 類型:數字
預設值:12
|
sizeAxis.maxValue |
要對應至 類型:數字
預設:圖表資料中「大小」欄的最大值
|
sizeAxis.minSize |
對話框的最小半徑範圍 (以像素為單位)。 類型:數字
預設值:3
|
sizeAxis.minValue |
要對應至 類型:數字
預設值:圖表資料中「大小」欄的最小值
|
工具提示 |
可讓成員設定各種工具提示元素的物件。如要指定這個物件的屬性,您可以使用物件常值標記法,如下所示: {textStyle: {color: '#FF0000'}, showColorCode: true} 類型:物件
預設值:null
|
tooltip.textStyle |
指定工具提示文字樣式的物件。物件的格式如下: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
類型:物件
預設:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
tooltip.trigger |
觸發工具提示的使用者互動:
類型:字串
預設:「focus」
|
寬度 |
視覺呈現的寬度,以像素為單位。預設寬度為 556 像素,除非已指定 類型:數字
預設:自動
|
洲別階層和代碼
如要顯示洲別/子洲的地理區域圖,請將 region
選項設為下列其中一個 3 位數代碼。代碼和階層結構是以
聯合國統計處
開發及維護的項目為主,但有些例外情況。
大陸 | 子洲別 | 國家/地區 |
---|---|---|
002 - 非洲 |
015 - 北非 |
DZ、EG、EH、LY、MA、SD、SS、TN |
011 - 西非 |
BF、 BJ、 CI、 CV、 GH、 GM、 GN、 GW、 L8、{20 {20 {20 {20SHSLSN | |
017 - 中非 |
AO、CD、ZR、CF、CG、CM、GA、GQ、ST、TD | |
014 - 東非 |
BI、DJ、ER、ET、KE、KM、MG、MU、MZ、MZ、RWSCSOTZUG | |
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、MT2 MT | |
019 - 美洲 |
021 - 北美 |
BM、CA、GL、PM、US |
029 - 加勒比海 |
AG、AI、AN、AW、BB、BL、BS、CU、DM、DOGDGPLCMS | |
013 - 中美洲 |
BZ、CR、GT、HN、MX、NI、PA、SV | |
005 - 南美洲 |
AR、BO、BR、CL、CO、EC、FK、GF、GY、PE、PR7{/23SRVE | |
142 - 亞洲 |
143 - 中亞 |
TM、TJ、KG、KZ、UZ |
030 - 東亞 |
中國、HK、日本、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、{/21 TLVN | |
145 - 西亞 |
AE、AM、AZ、BH、CY、GE、IL、IQ、JO | |
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 的物件,這是採用 ISO-3166 格式的字串,用來描述使用者點選的地區。 |
select |
在使用者點選視覺實體時觸發。如要瞭解已選取的項目,請呼叫 屬性:無
|
資料政策
Google 地圖會為地點進行地理編碼。不需要地理編碼的資料不會傳送至任何伺服器。如要進一步瞭解資料政策,請參閱《Google 地圖服務條款》。