總覽
一種資料樹狀結構,以視覺化方式呈現資料,其中每個節點都可以有零個或多個子項,以及一個父項 (根層級除外,根層級沒有父項)。每個節點都會以矩形顯示,並根據指派的值調整大小和顏色。大小和顏色的值是相對於圖中所有其他節點的值。您可以指定同時顯示的樓層數,並視需要以提示的方式顯示更深層的樓層。如果節點是分葉節點,您可以指定大小和顏色;如果節點不是分葉,則會顯示為分葉節點的定界框。預設行為是在使用者按一下節點時向下移動樹狀結構,而在使用者於圖表上按一下滑鼠右鍵時將樹狀結構向上移動。
圖表總大小取決於您在網頁中插入的內含元素大小。如果分葉節點的名稱過長而無法顯示,該名稱會遭到截斷,並標上刪節號 (...)。
範例
<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() |
清除圖表並釋出所有分配的資源。
傳回類型:無
|
事件
名稱 |
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() 。
屬性:無
|
資料政策
所有程式碼和資料都經過處理並在瀏覽器中顯示。系統不會將任何資料傳送至任何伺服器。