樹狀圖

  1. 總覽
  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 (適用於 v50 以上版本)。接著，您可以使用各種 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 欄 - [string] 這個節點的 ID。可以是任何有效的 JavaScript 字串，包括空格，以及字串的可保留長度。這個值會顯示為節點標頭。
  • 欄 1 - [string] - 父項節點的 ID。如果這是根節點，請將此欄位留空。每個樹狀圖只能使用一個根。
  • 欄 2 - [<編號>] - 節點的大小。可使用任何正值。這個值會決定節點的大小，此數值會根據目前所顯示的所有其他節點計算而得。對於非分葉節點，系統會忽略這個值，並依據其所有子項的大小計算這個值。
  • 欄 3 - [選用、數字] - 用於計算這個節點顏色的選用值。允許輸入任何值 (正數或負數)。色彩值會先依據 minColorValue 到 maxColorValue 的比例重新計算，然後為 minColor 和 maxColor 之間的梯度指定顏色。

設定選項

名稱
enableHighlight (適用於 50 以上版本)

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

類型：布林值
預設值：false
eventsConfig (適用於 v50 以上版本)

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

eventsConfig: {
  interaction1: undefined, // or missing
  interaction2: [], // disable
  interaction3: [
    'mouse_event',
    'optional_key1',
    'optional_key2',
    'optional_key3',
    'optional_key4'
  ],
  ...,
}
如果互動沒有定義或遺漏了設定陣列，系統會使用 default。
如果設定為空白陣列，則會停用互動。
對於有效的設定，mouse_event 是必要的，且必須是支援的滑鼠事件。您最多可擁有四個自選按鍵修飾符。
支援的互動功能：
醒目顯示、取消醒目顯示、匯總、下鑽。
支援的滑鼠事件：
'click'、'contextmenu'、dblclick'、mousout'、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']
}
字型色彩

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

類型：字串
預設： #ffffff
字型系列

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

類型：字串
預設：自動
字型大小

所有文字的字型大小，以點為單位。

類型：數字
預設：12
ForceIFrame

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

類型：布林值
預設值：false
標題顏色

每個節點的標題部分顏色。請指定 HTML 色彩值。

類型：字串
預設：#988f86
標頭高度

每個節點的標題部分高度 (以像素為單位，可為 0)。

類型編號
預設：0
標頭醒目顯示顏色

滑鼠遊標懸停在節點上的標題顏色。指定 HTML 色彩值或空值；如果設為空值，這個值將會調亮 headerColor 35%。

類型：字串
預設值：空值
highlightOnMouseOver (已淘汰，適用於 v50 以上版本)

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

類型：布林值
預設值：false
提示不透明度

當 maxPostDepth 大於 1 時，會導致目前深度底下的節點顯示為顯示，hintOpacity 會指定其透明度。這個值應介於 0 至 1 之間；值越大，節點越接近。

類型：數字
預設：0.0
最大顏色

資料欄 3 值為 maxColorValue 的矩形顏色。請指定 HTML 色彩值。

類型：字串
預設值：#00dd00
最大深度

目前檢視畫面中所顯示的節點層級數量上限。系統會將層級平整到目前平面中。如果樹狀圖的層級數超過這個等級，則請向上或往下查看。您也可以在下方的 maxPostDepth 層級中，以此節點中的陰影矩形查看。

類型：數字
預設：1
最大醒目顯示顏色

在第 3 欄中含有最大數值的節點使用的醒目顯示顏色。指定 HTML 色彩值或空值；如果值為空值，這個值將是 maxColor 的值，並調亮 35%

類型：字串
預設值：空值
maxPostDDh

以 maxDepth 表示的節點數量，以「已提示」的方式顯示。提示節點會在 maxDepth 限制範圍內，以陰影矩形顯示。

類型：數字
預設：0
maxColorValue 值

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

類型：數字
預設值：空值
中色

矩形顏色在第 maxColorValue 到 minColorValue 之間的中間具有 3 欄的矩形顏色。指定 HTML 色彩值。

類型：字串
預設：#000000
中間醒目顯示顏色

具有 3 欄值 (位於 minColorValue 和 maxColorValue 中位數附近) 所使用的醒目顯示顏色。指定 HTML 顏色值或空值；如果值為空值，這個值將是 midColor 的值，並調亮 35%。

類型：字串
預設值：空值
minColor (最小顏色)

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

類型：字串
預設：#dd0000
取消醒目顯示顏色

要用於節點的醒目顯示顏色，資料欄 3 的值最接近 minColorValue。指定 HTML 顏色值或空值；如果值為空值，這個值將是 minColor 的值，並調亮 35%

類型：字串
預設值：空值
minColorValue

第 3 欄允許的最小值。所有小於這個值的值都會剪輯至這個值。設為空值時，系統會將其視為資料欄中的最小值。

類型：數字
預設值：空值
無顏色

當節點沒有資料欄 3 且節點是分葉 (或只包含分葉) 時，用於矩形的顏色。指定 HTML 色彩值。

類型：字串
預設： #000000
無醒目顯示顏色

用於在「沒有」顏色的矩形中醒目顯示的顏色。指定 HTML 色彩值或空值；如果值為空值，則會以 noColor 的值調亮 35%。

類型：字串
預設值：空值
節目規模

是否在圖表頂端顯示 minColor 至 maxColor 的色彩漸層比例。指定 true 即可顯示體重計。

類型：布林值
預設值：false
節目工具提示

是否顯示工具提示。

類型：布林值
預設：是
文字樣式

指定文字樣式的物件，用於特定內容區域中包含文字的圖表，例如樹狀圖。物件具有以下格式：

{ 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

圖表上方顯示的文字。

類型：字串
預設：無標題
標題文字樣式

指定標題文字樣式的物件。物件採用以下格式：

{ 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>}
使用加權平均值

是否使用加權平均值來匯總資料。

類型：布林值
預設值：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

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

屬性：資料列
highlight (for v50+)

使用者醒目顯示節點時觸發。預設觸發條件是滑鼠遊標懸停。針對 v50+，您可以使用 eventsConfig 進行設定。事件處理常式會傳入資料表中對應項目的資料列索引。

屬性：資料列
onmouseout

當使用者離開節點時觸發。事件處理常式會回傳資料表中對應項目的資料列索引。

屬性：資料列
unhighlight (for v50+)

使用者取消醒目顯示節點時觸發。預設觸發條件是滑鼠遊標懸停。針對 v50+，您可以使用 eventsConfig 進行設定。事件處理常式會傳入資料表中對應項目的資料列索引。

屬性：資料列
ready

圖表可供外部方法呼叫使用時觸發。如果您想要與圖表互動，並在繪製後呼叫方法，請先為這個事件設定事件監聽器之前呼叫 draw 方法，並且只在事件觸發後呼叫這些方法。

屬性：無
rollup

使用者返回樹狀結構時觸發。預設觸發條件按一下滑鼠右鍵。 這可以針對 v50+ 使用 eventsConfig 進行設定。傳送至事件處理常式的資料列資料列屬性就是使用者從瀏覽的節點列，而不是使用者瀏覽至至的資料列。

屬性：資料列
select

在使用者下鑽或倒起節點時觸發。呼叫 setSelection() 或 goUpAndDraw() 方法時也會觸發。如要瞭解所選的節點，請呼叫 getSelection()。

屬性：無
drilldown (for v50+)

使用者深入探索樹狀結構時觸發。點選預設觸發條件。 可使用 v50+ 透過 eventsConfig 設定。如要瞭解點選的節點，請呼叫 getSelection()。

屬性：無

資料政策

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