視覺化:地理區域圖

總覽

「地理圖」是國家/地區、大陸或區域地圖的地圖,包含指派給特定區域的顏色和值。值會以色階顯示,您可以為區域指定選用的懸停文字。系統會使用嵌入式 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. [數字,選用] 使用者將滑鼠遊標懸停在這個區域時顯示的數值。如果使用第 4 欄,就屬於必要資料欄。
    4. [字串,選用] 使用者將滑鼠遊標懸停在這個區域時顯示的其他字串文字。
  • 格式 2:地址、國家/地區名稱、區域名稱位置或美國都會區碼。這種格式可搭配設定為「標記」或「區域」的 dataMode 選項使用。位置會輸入至一個資料欄,並加上兩個選用資料欄:
    1. [字串,必要] 地圖位置。系統接受下列格式:
      • 特定地址 (例如「臺北市南投區」)。
      • 以字串表示的國家/地區名稱 (例如「英格蘭」)、大寫的 ISO-3166 代碼或英文的對應英文文字 (例如「GB」或「United Kingdom」)。
      • 大寫的 ISO-3166-2 區域代碼名稱或相應的英文文字代碼 (例如「US-NJ」或「New Jersey」)。注意:只有在 dataMode 選項設為「regions」時,才能指定區域。
      • 「都會區區碼」。這些是三位數的都會區代碼,用於指定多個區域;僅支援美國代碼。請注意,這組號碼與電話區碼相同。
    2. [數字,選用] 使用者將滑鼠遊標懸停在這個區域時顯示的數值。如果使用第 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」

如何在地圖上顯示值。可支援兩個值:

  • regions - 以適當顏色為整個區域設定顏色。這個選項不適用於經緯度地址。請參閱區域範例
  • markers - 在區域上顯示一個點,顏色和大小代表該值。請參閱「標記範例」一文。
width 字串 「556 像素」 視覺呈現的寬度。如未指定單位,預設單位為像素。
height 字串 「347 像素」 視覺化內容的高度。如未指定單位,預設單位為像素。
colors RGB 數字陣列,格式為 0xRRGGBB [0xE0FFD4、0xA5EF63、0x50AA00、0x267114] 要在圖表中指派給值的顏色漸層。您必須至少有兩個值:漸層包含您所有的值以及計算出的中間值,最淺的顏色代表最小,最深的顏色代表最高。
showLegend boolean true 如果為 true,會顯示地圖的圖例。
showZoomOut boolean false 如為 true,則顯示含有 zoomOutLabel 屬性指定標籤的按鈕。請注意,按下這個按鈕時不會執行任何動作,但會擲回 zoomOut 事件。如要處理縮放作業,請擷取此事件並變更 region 選項。只有在 region 選項小於世界檢視畫面時,您才能指定 showZoomOut。其中一種啟用放大行為的方法之一,是監聽 regionClick 事件,將 region 屬性變更為適當的區域,然後重新載入地圖。
zoomOutLabel 字串 縮小 縮放按鈕的標籤。

方法

方法 傳回類型 說明
draw(data, options) 繪製地圖。可在繪圖完成前返回 (請參閱 drawingDone() 事件)。
getSelection() 選取元素陣列 標準 getSelection() 實作。所選元素為資料列。只有在 dataMode 選項為「地區」時,這個方法才有效。您只能選取有指派值的區域。
setSelection(selection) 標準 setSelection() 實作。將所選內容視為資料列選取項目,並支援多列選取功能。只能選取有指派值的區域。

事件

名稱 說明 屬性
error 嘗試算繪圖表時發生錯誤時觸發。 id、message
select

在使用者點選有指定值的區域時觸發。如要瞭解您選取的項目,請呼叫 getSelection()。只有在 dataMode 選項設為「區域」時才能使用。

注意:由於某些限制,如果您在瀏覽器中以檔案形式存取網頁 (例如select「file://」) 而非伺服器 (例如"http://www").

regionClick

點按區域時呼叫。同時適用於「區域」和「標記」dataMode。 不過,在標記模式中,系統不會針對透過「區域」選項指派的特定國家/地區 (如果清單列出特定國家/地區) 擲回這項限制。

注意:由於某些限制,如果您透過瀏覽器存取網頁 (例如regionClick「file://」) 而非伺服器 (例如"http://www").

具有單一屬性 region 的物件,該屬性為 ISO-3166 格式的字串,用來描述使用者點選的地區。
zoomOut

在使用者按下縮小按鈕時呼叫。如要處理縮放,請擷取此事件並變更 region 選項。

注意:由於某些限制,如果您在瀏覽器中以檔案形式存取網頁 (例如zoomOut「file://」) 而非伺服器 (例如"http://www").

drawingDone 地理圖完成繪製時呼叫。

資料政策

Google 地圖會為地點進行地理編碼。不需要地理編碼的資料不會傳送至任何伺服器。如要進一步瞭解資料政策,請參閱《Google 地圖服務條款》。

注意事項

由於 Flash 安全性設定,當從瀏覽器的檔案位置 (例如 file:///c:/webhost/myhost/myviz.html) 而非網路伺服器網址 (例如 http://www.myhost.com/myviz.html) 存取時,此 (和所有 Flash 視覺呈現) 可能無法正常運作。這通常只是測試問題。你可以按照 Macromedia 網站中的指示操作,解決這個問題。