樹狀圖

  1. Overview
  2. 範例
  3. 裝置重要活動
  4. 工具提示
  5. 載入中
  6. 資料格式
  7. 設定選項
  8. 方法
  9. 事件
  10. 資料政策

總覽

一種資料樹狀結構，以視覺化方式呈現資料，其中每個節點都可以有零個或多個子項，以及一個父項 (根層級除外，根層級沒有父項)。每個節點都會以矩形顯示，並根據指派的值調整大小和顏色。大小和顏色的值是相對於圖中所有其他節點的值。您可以指定同時顯示的樓層數，並視需要以提示的方式顯示更深層的樓層。如果節點是分葉節點，您可以指定大小和顏色；如果節點不是分葉，則會顯示為分葉節點的定界框。預設行為是在使用者按一下節點時向下移動樹狀結構，而在使用者於圖表上按一下滑鼠右鍵時將樹狀結構向上移動。

圖表總大小取決於您在網頁中插入的內含元素大小。如果分葉節點的名稱過長而無法顯示，該名稱會遭到截斷，並標上刪節號 (...)。

範例

 
<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['treemap']});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Location', 'Parent', 'Market trade volume (size)', 'Market increase/decrease (color)'],
          ['Global',    null,                 0,                               0],
          ['America',   'Global',             0,                               0],
          ['Europe',    'Global',             0,                               0],
          ['Asia',      'Global',             0,                               0],
          ['Australia', 'Global',             0,                               0],
          ['Africa',    'Global',             0,                               0],
          ['Brazil',    'America',            11,                              10],
          ['USA',       'America',            52,                              31],
          ['Mexico',    'America',            24,                              12],
          ['Canada',    'America',            16,                              -23],
          ['France',    'Europe',             42,                              -11],
          ['Germany',   'Europe',             31,                              -2],
          ['Sweden',    'Europe',             22,                              -13],
          ['Italy',     'Europe',             17,                              4],
          ['UK',        'Europe',             21,                              -5],
          ['China',     'Asia',               36,                              4],
          ['Japan',     'Asia',               20,                              -12],
          ['India',     'Asia',               40,                              63],
          ['Laos',      'Asia',               4,                               34],
          ['Mongolia',  'Asia',               1,                               -5],
          ['Israel',    'Asia',               12,                              24],
          ['Iran',      'Asia',               18,                              13],
          ['Pakistan',  'Asia',               11,                              -52],
          ['Egypt',     'Africa',             21,                              0],
          ['S. Africa', 'Africa',             30,                              43],
          ['Sudan',     'Africa',             12,                              2],
          ['Congo',     'Africa',             10,                              12],
          ['Zaire',     'Africa',             8,                               10]
        ]);

        tree = new google.visualization.TreeMap(document.getElementById('chart_div'));

        tree.draw(data, {
          minColor: '#f00',
          midColor: '#ddd',
          maxColor: '#0d0',
          headerHeight: 15,
          fontColor: 'black',
          showScale: true
        });

      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

裝置重要活動

您可以指定元素是否應醒目顯示，以及設定發生此情況時的特定元素的顏色。如要開啟醒目顯示功能，請設定 highlightOnMouseOver:true (適用於 v49 以下版本) 或 enableHighlight: true (適用於 50 以上版本)。在這裡，您可以使用各種 HighlightColor 選項，設定要用來醒目顯示元素的顏色。

 
      var options = { // For v49 or before
        highlightOnMouseOver: true,
        maxDepth: 1,
        maxPostDepth: 2,
        minHighlightColor: '#8c6bb1',
        midHighlightColor: '#9ebcda',
        maxHighlightColor: '#edf8fb',
        minColor: '#009688',
        midColor: '#f7f7f7',
        maxColor: '#ee8100',
        headerHeight: 15,
        showScale: true,
        height: 500,
        useWeightedAverageForAggregation: true
      };
      var optionsV50 = { // For v50+
        enableHighlight: true,
        maxDepth: 1,
        maxPostDepth: 2,
        minHighlightColor: '#8c6bb1',
        midHighlightColor: '#9ebcda',
        maxHighlightColor: '#edf8fb',
        minColor: '#009688',
        midColor: '#f7f7f7',
        maxColor: '#ee8100',
        headerHeight: 15,
        showScale: true,
        height: 500,
        useWeightedAverageForAggregation: true,
        // Use click to highlight and double-click to drill down.
        eventsConfig: {
          highlight: ['click'],
          unhighlight: ['mouseout'],
          rollup: ['contextmenu'],
          drilldown: ['dblclick'],
        }
      };

工具提示

根據預設，樹狀圖的工具提示是基本內容，顯示樹狀圖儲存格的標籤。當儲存格太小而無法容納標籤時，這個做法就很實用，但您可以按照本節說明進一步自訂這些標籤。

樹狀圖工具提示與其他圖表不同：您可以定義函式，然後將 generateTooltip 選項設為該函式。以下提供一個簡單的範例：

在上述圖表中，我們定義了名為 showStaticTooltip 的函式，此函式只會傳回一個字串，該字串會在使用者將滑鼠遊標懸停在樹狀圖儲存格上時顯示 HTML。點選此按鈕即可體驗這項功能，產生的程式碼如下所示：

  var options = {
    minColor: '#e7711c',
    midColor: '#fff',
    maxColor: '#4374e0',
    showScale: true,
    generateTooltip: showStaticTooltip
  };

  tree.draw(data, options);

  function showStaticTooltip(row, size, value) {
    return '<div style="background:#fd9; padding:10px; border-style:solid">' +
           'Read more about the <a href="http://en.wikipedia.org/wiki/Kingdom_(biology)">kingdoms of life</a>.</div>';
  }

generateTooltip 函式可以是任何 JavaScript。通常，您會希望根據資料值不同的工具提示。以下範例說明如何存取資料表中的每個欄位。

將遊標懸停在上方樹狀圖中的儲存格上，就會看到每個儲存格的不同工具提示。樹狀圖工具提示函式全部採用三個值：row、size 和 value。

  • row：資料表中的儲存格列
  • size：這個儲存格及其所有子項的值 (第 3 欄) 的總和
  • value：儲存格的顏色，以 0 到 1 之間的數字表示

在 showFullTooltip 中，我們傳回的字串是內含五行的 HTML 方塊：

  • 第 1 行顯示了資料表中的適當資料列，因此自由使用 data.getValue。
  • 第 2 行會指出哪個資料列也就是 row 參數。
  • 第 3 行會提供資料表第 3 欄的資訊：這一列的第 3 欄值總和，再加上子系的值。
  • 第 4 行會提供資料表第 4 欄的資訊。也就是值，但以 0 到 1 之間的數字表示，對應儲存格的顏色。
  var options = {
    minColor: '#e7711c',
    midColor: '#fff',
    maxColor: '#4374e0',
    showScale: true,
    generateTooltip: showFullTooltip
  };

  tree.draw(data, options);

  function showFullTooltip(row, size, value) {
    return '<div style="background:#fd9; padding:10px; border-style:solid">' +
           '<span style="font-family:Courier"><b>' + data.getValue(row, 0) +
           '</b>, ' + data.getValue(row, 1) + ', ' + data.getValue(row, 2) +
           ', ' + data.getValue(row, 3) + '</span><br>' +
           'Datatable row: ' + row + '<br>' +
	   data.getColumnLabel(2) +
           ' (total value of this cell and its children): ' + size + '<br>' +
	   data.getColumnLabel(3) + ': ' + value + ' </div>';
  }

}

載入中

google.charts.load 套件名稱為 "treemap"。

  google.charts.load("current", {packages: ["treemap"]});

視覺呈現的類別名稱為 google.visualization.TreeMap。

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

資料格式

資料表中的每一列都代表一個節點 (圖表中的一個長方形)。每個節點 (根節點除外) 都有一個父項節點。每個節點的大小和顏色取決於其相對於目前顯示的其他節點的值。

資料表應包含四欄，格式如下：

  • 欄 0 - [字串] 這個節點的 ID。可以是任何有效的 JavaScript 字串 (包括空格)，以及字串可容納的任何長度。這個值會顯示為節點標頭。
  • 欄 1 - [字串] - 父項節點的 ID。如果是根節點，請將這個欄位留空。每個樹狀圖只能有一個根。
  • 欄 2 - [數字] - 節點的大小。則可使用任何正值。這個值決定了節點的大小 (相對於目前顯示的其他所有節點)。如果是非葉節點，系統會忽略這個值，並根據其所有子項的大小計算。
  • 欄 3 - [選用，數字] - 用來計算這個節點顏色的選用值。可以使用任何正數或負數。系統會先以 minColorValue 到 maxColorValue 的比例重新計算顏色值，接著為節點指派 minColor 和 maxColor 之間的漸層顏色。

設定選項

名稱
啟用醒目顯示 (適用於 50 版以上)

決定元素是否應顯示醒目顯示的效果。預設觸發條件是滑鼠遊標懸停時。您可以使用 eventsConfig 設定觸發條件。如果設為 true，則可使用各種 highlightColor 選項指定不同元素的醒目顯示。

類型：布林值
預設值：false
eventConfig (適用於 50 版以上)

觸發樹狀圖互動的事件設定。 設定互動的格式：

eventsConfig: {
  interaction1: undefined, // or missing
  interaction2: [], // disable
  interaction3: [
    'mouse_event',
    'optional_key1',
    'optional_key2',
    'optional_key3',
    'optional_key4'
  ],
  ...,
}
       
如果沒有定義或缺少互動的設定陣列，系統就會使用預設。
如果設定是空白陣列，則會停用互動功能。
如要取得有效設定，必須使用 mouse_event，且必須為支援的滑鼠事件。設定後，最多可設定四個選用的按鍵輔助鍵。
支援的互動方式：
醒目顯示、取消醒目顯示、綜覽、細查。
支援的滑鼠事件：
'click'、'contextmenu'、dblclick、'mouseout'、'mouseover'。其中 'contextmenu' 對應於按一下滑鼠右鍵。
支援的滑鼠事件輔助鍵：
'altKey'、'ctrlKey'、'metaKey'、'shiftKey'。
取得目前設定：
呼叫方法 getEventsConfig()。
使用 Control + Shift + Right_Click 可前往樹狀結構的範例：
{ rollup: ['contextmenu', 'ctrlKey', 'shiftKey'] }
類型：物件
預設： 
{
  highlight: ['mouseover'],
  unhighlight: ['mouseout'],
  rollup: ['contextmenu'], // right-click
  drilldown: ['click']
}
fontColor

文字顏色。指定 HTML 顏色值。

類型：字串
預設： #ffffff
fontFamily

所有文字使用的字型系列。

類型：字串
預設：自動
fontSize

所有文字的字型大小 (以點表示)。

類型：數字
預設值：12
forceIFrame

在內嵌頁框中繪製圖表。(請注意，在 IE8 中，系統會忽略此選項；所有 IE8 圖表都會繪製成 iFrame。)

類型：布林值
預設值：false
headerColor

每個節點標題區段的顏色。指定 HTML 顏色值。

類型：字串
預設： #988f86
headerHeight

每個節點標題區段的高度，以像素為單位 (可能為零)。

類型數字
預設值：0
headerHighlightColor

滑鼠遊標懸停的節點標題顏色。指定 HTML 顏色值或空值；如果為空值，這個值會由 headerColor 淡出 35%。

類型：字串
預設值：null
PickOnMouseOver (不適用於 50 以上版本)

已淘汰 50 以上版本。如果是 v50 以上的版本，請使用 enableHighlight。 決定元素在滑鼠遊標懸停時是否應顯示醒目顯示的效果。如果設為 true，則可使用各種 highlightColor 選項指定不同元素的醒目顯示。

類型：布林值
預設值：false
hintOpacity

當 maxPostDepth 大於 1 時，導致低於目前深度的節點會顯示，hintOpacity 會指定其透明程度。值應介於 0 至 1 之間，值越大，節點就會越深。

類型：數字
預設值：0.0
maxColor

第 3 欄值為 maxColorValue 的矩形顏色。請指定 HTML 顏色值。

類型：字串
預設： #00dd00
maxDepth

目前檢視畫面顯示的節點層級數量上限。層級會平放到目前的飛機。如果樹狀結構包含的層級超過這個數量，您必須向上或向下才能看到。此外，您可以在這些節點下方看到 maxPostDepth 層級，這些節點中的陰影矩形。

類型：數字
預設值：1
maxHighlightColor

要用於第 3 欄數值最大的節點的醒目顯示顏色。指定 HTML 顏色值或空值；如果為空值，這個值會是 35% 的 maxColor 值。

類型：字串
預設值：null
maxPostDepth

超過 maxDepth 的節點層級，以「提示」方式顯示。系統會在 maxDepth 限制內的節點內，顯示隱藏的節點為陰影矩形。

類型：數字
預設值：0
maxColorValue

第 3 欄允許的最大值。大於這個值的所有值都會修剪為這個值。如果設為空值，則會設為資料欄中的最大值。

類型：數字
預設值：null
midColor

包含 3 欄值的矩形顏色，介於 maxColorValue 和 minColorValue 之間。指定 HTML 顏色值。

類型：字串
預設： #000000
midHighlightColor

節點使用的醒目顯示顏色，其中有 3 欄值靠近 minColorValue 和 maxColorValue 的中位數。指定 HTML 顏色值或空值；如果為空值，這個值會是 35% 的 midColor 值。

類型：字串
預設值：null
minColor

第 3 欄值為 minColorValue 的矩形顏色。請指定 HTML 顏色值。

類型：字串
預設： #dd0000
minHighlightColor

第 3 欄值最接近 minColorValue 的節點使用的醒目顯示顏色。指定 HTML 顏色值或空值；如果為空值，這個值會是加 35% 的 minColor 值。

類型：字串
預設值：null
minColorValue

第 3 欄允許的最小值。小於這個值的所有值都會修剪為這個值。如果設為空值，系統會在資料欄中計算最小值。

類型：數字
預設值：null
noColor

當節點沒有第 3 欄的值，且該節點為葉子 (或僅含葉子) 時，矩形要使用的顏色。指定 HTML 顏色值。

類型：字串
預設： #000000
noHighlightColor

「無」色彩矩形做為醒目顯示的顏色。指定 HTML 顏色值或空值；如果為空值，則會是 35% 的 noColor 值。

類型：字串
預設值：null
showScale

是否沿著圖表頂端顯示顏色漸層比例，從 minColor 到 maxColor。指定「true」即可顯示比例。

類型：布林值
預設值：false
showTooltips

是否顯示工具提示。

類型：布林值
預設值：true
textStyle

指定文字樣式的物件。如果圖表的內容區域含有文字 (例如樹狀圖)，則會指定文字樣式。物件的格式如下：

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

color 可以是任何 HTML 顏色字串，例如 'red' 或 '#00cc00'。另請參閱 fontName 和 fontSize。

類型：物件
預設： {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
title

顯示在圖表上方的文字。

類型：字串
預設：無標題
titleTextStyle

指定標題文字樣式的物件。物件的格式如下：

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

color 可以是任何 HTML 顏色字串，例如 'red' 或 '#00cc00'。另請參閱 fontName 和 fontSize。

類型：物件
預設： {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
useWeightedAverageForAggregation

是否使用加權平均值進行匯總。

類型：布林值
預設值：false

方法

方法
draw(data, options)

繪製圖表。

傳回類型：無
getEventsConfig() (for v50+)

傳回目前的互動設定。這可用於驗證設定選項 eventsConfig

傳回類型：物件
{ // An empty array (i.e. []) means the interaction is disabled.
  highlight: string[],
  unhighlight: string[],
  rollup: string[],
  drilldown: string[] }
getSelection()

標準 getSelection() 實作。所選元素為節點。一次只能選取一個節點。

傳回類型：選取元素的陣列
setSelection()

標準 setSelection() 實作。所選元素為節點。一次只能選取一個節點。

傳回類型：無
goUpAndDraw()

將樹狀結構向上移動一層，然後重新繪製。如果節點是根節點，則不會擲回錯誤。在使用者於節點上按一下滑鼠右鍵時，會自動觸發。

傳回類型：無
getMaxPossibleDepth()

傳回目前檢視畫面的最大深度。

傳回類型：數字
clearChart()

清除圖表並釋出所有分配的資源。

傳回類型：無

事件

如要瞭解可設定事件觸發條件，請參閱 eventsConfig。
名稱
onmouseover

在使用者將滑鼠遊標懸停在節點上時觸發。系統會將資料表中對應項目的資料列索引傳送至事件處理常式。

屬性：row
highlight (for v50+)

在使用者醒目顯示節點時觸發。預設觸發條件為滑鼠遊標懸停。 如果是 v50 以上版本，您可以使用 eventsConfig 設定這個函數。系統會將資料表中對應項目的資料列索引傳送給事件處理常式。

屬性：row
onmouseout

在使用者滑鼠遊標離開節點時觸發。系統會將資料表中對應項目的資料列索引傳送至事件處理常式。

屬性：row
unhighlight (for v50+)

在使用者取消醒目顯示節點時觸發。預設觸發條件為滑鼠遊標移開。如果是 v50 以上版本，您可以使用 eventsConfig 設定這個函數。系統會將資料表中對應項目的資料列索引傳送給事件處理常式。

屬性：row
ready

當圖表可供外部方法呼叫時觸發。如果您想與圖表互動，以及在繪製圖表後呼叫方法，您應「先」設定此事件的事件監聽器，並僅在事件觸發後才呼叫這些事件。draw

屬性：無
rollup

在使用者返回樹狀結構時觸發。預設觸發條件按一下滑鼠右鍵。對於 v50 以上版本來說，您可以使用 eventsConfig 進行設定。 傳遞至事件處理常式的資料列屬性是指使用者「從」前往的節點列，而不是使用者前往「目的地」的資料列。

屬性：row
select

在使用者細查或累積節點時觸發。呼叫 setSelection() 或 goUpAndDraw() 方法時，也會觸發。如要瞭解選取的節點，請呼叫 getSelection()。

屬性：無
drilldown (for v50+)

在使用者深入瀏覽樹狀結構時觸發。預設觸發條件為點擊。 您可以透過 eventsConfig 設定適用於 v50+ 的節點。如要瞭解使用者點選了哪些節點，請呼叫 getSelection()。

屬性：無

資料政策

所有程式碼和資料都經過處理並在瀏覽器中顯示。系統不會將任何資料傳送至任何伺服器。