樹狀圖

總覽

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

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

範例

<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。通常,您會希望根據資料值不同的工具提示。以下範例說明如何存取資料表中的每個欄位。

將遊標懸停在上方樹狀圖中的儲存格上,就會看到每個儲存格的不同工具提示。樹狀圖工具提示函式全部採用三個值:rowsizevalue

  • 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 - [選用,數字] - 用來計算這個節點顏色的選用值。可以使用任何正數或負數。系統會先以 minColorValuemaxColorValue 的比例重新計算顏色值,接著為節點指派 minColormaxColor 之間的漸層顏色。

設定選項

名稱
啟用醒目顯示 (適用於 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 欄值的矩形顏色,介於 maxColorValueminColorValue 之間。指定 HTML 顏色值。

類型:字串
預設: #000000
midHighlightColor

節點使用的醒目顯示顏色,其中有 3 欄值靠近 minColorValuemaxColorValue 的中位數。指定 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

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

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

是否顯示工具提示。

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

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

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

color 可以是任何 HTML 顏色字串,例如 'red''#00cc00'。另請參閱 fontNamefontSize

類型:物件
預設: {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'。另請參閱 fontNamefontSize

類型:物件
預設: {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()

屬性:

資料政策

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