本頁說明圖表資料表中角色的概念和使用情形。
什麼是角色?
Google DataTable 和 DataView 物件現在支援明確指派的資料欄角色。資料欄角色說明該資料欄中的資料,例如:資料欄可能會保留說明工具提示文字、資料點註解或不確定度指標的資料。大多數資料欄角色都會套用至之前的「data」資料欄,無論其緊接在連續的角色欄之前或之前。例如,您可以在「data」欄之後有兩個資料欄,一個用於「tooltip」,另一個用於「annotation」。不過,在「domain」欄之後,我們通常也會允許「annotation」和「annotationText」欄的角色。
注意:如要控制當使用者將滑鼠遊標移到圖表上時顯示的工具提示內容,請參閱工具提示。
資料欄有兩個主要角色可用:「網域」來指定主要軸值;「資料」則用於指定長條的高度、圓切片寬度等。這些角色是根據資料表中的資料欄順序和類型,以默示方式指派。但可以明確指派資料欄角色,您現在可以新增選用資料欄,為圖表提供有趣的新功能,例如任意註解標籤、遊標懸停文字和不確定列。
如果您未明確指派資料欄的角色,則系統會按照圖表的資料格式規格,以資料表中的順序來推估其角色。這個頁面會顯示您可明確指派的角色,以及如何指派這些角色。
以下比較圖表和只與其他明確指派的角色相比,您只能使用預設推論角色來執行的折線圖。
折線圖資料表格式:
第 0 欄 | 第 1 欄 | … | N 欄 | |
---|---|---|---|---|
目的 | 第 1 行值 | … | 第 N 行值 | |
資料類型 | 數字 | … | 數字 | |
角色 | 網域 | 資料 | … | 資料 |
支援的支援 資料欄角色 |
|
|
… |
|
不含明確資料欄角色的圖表 | 含明確資料欄角色的圖表 |
---|---|
|
|
此圖表不會明確套用角色,因此只能使用上述的基本資料和網域欄版面配置。 資料表: var data = new google.visualization.DataTable(); data.addColumn('string', 'Month'); // Implicit domain label col. data.addColumn('number', 'Sales'); // Implicit series 1 data col. data.addRows([ ['April',1000], ['May', 1170], ['June', 660], ['July', 1030] ]); |
這個圖表會明確指派角色,因此您可以加入選用資料欄。此圖表包含註解、annotationText、間隔和確定性角色的選用資料欄。
資料表: var data = new google.visualization.DataTable(); data.addColumn('string', 'Month'); // Implicit domain label col. data.addColumn('number', 'Sales'); // Implicit series 1 data col. data.addColumn({type:'number', role:'interval'}); // interval role col. data.addColumn({type:'number', role:'interval'}); // interval role col. data.addColumn({type:'string', role:'annotation'}); // annotation role col. data.addColumn({type:'string', role:'annotationText'}); // annotationText col. data.addColumn({type:'boolean',role:'certainty'}); // certainty col. data.addRows([ ['April',1000, 900, 1100, 'A','Stolen data', true], ['May', 1170, 1000, 1200, 'B','Coffee spill', true], ['June', 660, 550, 800, 'C','Wumpus attack', true], ['July', 1030, null, null, null, null, false] ]); |
目前提供哪些角色?
下表列出 Google Chart 所支援的所有角色。並非所有圖表類型都支援所有角色,每張圖表的說明文件將說明有哪些角色可用,以及這些角色的用途。不同圖表類型的角色呈現方式並不相同。
角色 | 說明 | 範例 |
---|---|---|
註解 | 要在相關資料點附近顯示在圖表上的文字。且沒有任何使用者互動的文字。註解和註解文字可以指派給資料點和類別 (軸標籤)。 註解有兩種樣式:點 (default),可繪製指定點附近的註解文字;此外,兩行會在註解圖中加上註解文字。您可以設定以下圖表選項,指定線條樣式: 資料類型:字串 預設:空白字串 |
資料: 下訂
此圖表中的「A」與「B」是註解。將滑鼠遊標懸停在註解上,即可查看註解文字。請注意,您必須將滑鼠遊標懸停在註解上,而非套用該資料點的資料點,才會顯示 AnnotationText 值。 註解和 AnnotationText 儲存格都可接受空值;不過,如果您有 annotationText 值,則必須有相關的註解值。 |
annotationText (註解文字) | 當使用者將滑鼠遊標懸停在相關聯的註解上時,就會顯示的額外文字。 註解和註解文字可指派給資料點和類別 (軸標籤)。如果您有 annotationText 欄,則也必須具備註解欄。相反地,當使用者將滑鼠遊標懸停在圖表的相關資料點上時,就會顯示工具提示文字。 資料類型:字串 預設:空白字串 |
|
確定性 | 指出資料點是否確定。實際顯示方式會因圖表類型而異,例如以虛線或條紋填滿。 以折線圖和面積圖來說,只有在兩個資料點都確定時,兩個資料點之間的區隔才是確定的。 資料類型:布林值,如果值為 true,則不確定為 false。 預設值:true |
|
強調 | 強調指定的圖表資料點。以粗線和/或大點顯示。 對於折線圖和面積圖,只有在強調這兩種資料點時,系統才會強調這兩個資料點之間的區隔。 資料類型:布林值 預設值:false |
資料: label: 'Year', 'Sales', null, 'Expenses', null role: domain, data, emphasis, data, emphasis '2004', 1000, true, 400, false '2005', 1170, true, 460, true '2006', 660, false, 1120, true '2007', 1030, false, 540, true 在這份圖表中,「銷售」系列有一個重點區隔,以第三欄第一列和第二欄的指定。「費用」系列有兩大強調區隔,以第五欄為第二、第二、三和四。請注意,強調強調的邊界要如何強調。 |
間隔 | 指出特定點的潛在資料範圍。間隔通常會以 I-bar 樣式範圍指標顯示。間隔資料欄是數值欄,成對新增間隔資料欄,並標示長條的最小值和最高值。請加上從左到右的數值增大。 資料類型:數字 預設:沒有間隔 |
資料: label: 'Day', 'Stock value', null, null role: domain, data, interval, interval 'Mon', 38, 20, 45 'Tue', 55, 31, 66 'Wed', 77, 50, 80 'Thurs', 66, 50, 77 在這個圖表中,間隔值會定義點周圍的 I 長條。這些值會從左到右增加。長條的最上方和最低間隔會標示該列頂端和底端。 注意:關於間隔的所有詳細資料,請參閱間隔。 |
scope (範圍) | 指出點是否在範圍內。如果分數超出範圍,則看起來會經過視覺強調。 如果是折線圖和面積圖,只要「任一」端點位於範圍內,兩個資料點之間的區隔就在範圍內。 「資料類型:布林值」,其中「true」代表範圍內的範圍。 預設值:true |
資料: label: 'Year', 'Sales', null, 'Expenses', null role: domain, data, scope, data, scope '2004', 1000, false, 400, true '2005', 1170, false, 460, false '2006', 660, true, 1120, false '2007', 1030, true, 540, false 第一個範圍欄會套用到左側的「銷售」資料欄。由於第一個界線超出範圍,因此第一個區隔的位置超出範圍。第二個範圍欄會套用左側的「支出」資料欄。第一個區隔的某個界線點位於範圍內,因此第一段標示在範圍內;其他的線條則不在範圍內。 |
style [樣式] |
設定資料不同層面的某些屬性。這些值如下:
Data Type: string (使用字串的多種語法),可使用 預設值:空值 |
資料: label: 'Character', 'Popularity', 'Style', role: domain, data, style, 'Hulk', 50, 'color: green', 'Captain America', 75, 'color: #0000cf;' + 'stroke-color: #cf001d', 'Wolverine', 90, 'opacity: 0.5;' + 'stroke-width: 5;' + 'stroke-color: #01a0ff;' + 'fill-color: #fff600', 'Iron Man', 60, 'color: #db9500;' + 'stroke-width: 10;' + 'stroke-color: #a30300', 'Spider Man', 100, 'bar {' + 'fill-color: #c8001d;' + 'stroke-width: 3;' + 'stroke-color: #1800c8}'
這張圖表中的各個長條分別採用「 注意:請參閱其他說明,進一步瞭解如何自訂點、線條和長條的樣式。另請參閱每個圖表類型的選項,您可以為其他實體 (例如區域、文字和方塊) 指定樣式。 |
工具提示 |
當使用者將滑鼠遊標懸停在與這個列相關的資料點時,要顯示的文字。 注意:泡泡圖視覺化功能不支援這項功能。對話框圖表的 HTML 工具提示內容無法自訂。 資料類型:字串 預設:資料點值 |
資料: label: 'Year', 'Sales', null, 'Expenses', null role: domain, data, tooltip, data, tooltip '2004', 1000, '1M$ sales, 400, '$0.4M expenses in 2004' in 2004' '2005', 1170, '1.17M$ sales, 460, '$0.46M expenses in 2005' in 2005' '2006', 660, '.66$ sales, 1120, '$1.12M expenses in 2006' in 2006' '2007', 1030, '1.03M$ sales, 540, '$0.54M expenses in 2007' in 2007' 將遊標懸停在資料點上,即可顯示工具提示文字。工具提示資料已指派給兩行 (第 3 欄和第 5 欄) 中的所有點。 注意:如要進一步瞭解如何自訂工具提示,請參閱工具提示。 |
網域 | 除非您設計多網域圖表 (如此處所示),否則不必明確指派此角色;資料表的基本格式可讓圖表引擎推斷哪些資料欄是網域資料欄。不過,您應該已經知道哪些資料欄是網域資料欄,以便您知道哪些資料欄可以修改。 網域欄會指定圖表主軸上的標籤。有時候,您可以在多個圖表中使用多個網域欄來支援多個縮放比例。 資料類型:通常為字串,但有時會是數字或日期 |
資料: label: '2009, '2009, '2009, '2008, '2008 '2008 Quarter', Sales', Expenses', Quarter', Sales', Expenses' role: domain, data, data, domain, data, data 'Q1/09', 1000, 400, 'Q1/08', 800, 300 'Q2/09', 1170, 460, 'Q2/08', 750, 400 'Q3/09', 660, 1120, 'Q3/08', 700, 540 'Q4/09', 1030, 540, 'Q4/08', 820, 620 本範例說明瞭多網域圖表。前兩個資料欄會修改第一個網域 (「2009 季」),最後兩個資料欄會修改第二個網域 (「2008 季」)。兩個網域都重疊於相同軸量表上。 |
資料 | 您不需要明確指派此角色;資料表的基本格式可讓圖表引擎推斷哪些資料欄是網域資料欄。不過,您應該已經知道哪些資料欄是資料欄,以便知道哪些資料欄可以修改。 資料角色欄會指定要在圖表中顯示的序列資料。大多數圖表的一欄 = 一個序列,但依圖表類型而異 (例如,散佈圖需要第一系列的兩個資料欄,以及每個額外系列的額外資料欄;蠟燭圖需要每個系列有四個資料欄)。 資料類型:數字 |
角色階層結構和關聯
下圖顯示哪些角色欄可套用至其他角色欄。除了網域資料欄以外,所有資料欄都適用於可套用這個欄位的最靠近左方。
因此,scope 資料欄適用於左側的 data 資料欄;annotationText 資料欄會套用至最左側的 annotation 資料欄,而 annotation 將套用到最接近的 data 或 domain 資料欄。
指派角色
在 DataTable 物件中,角色會指派為資料欄的屬性。建立角色欄的方法有很多,但最常見的情況如下:
前兩項技巧會繪製以下圖表:
DataTable.addColumn 方法
以下範例會建立長條圖,並在三個長條上顯示間隔標記。間隔標記由 DataTable.addColumn() 方法的第三個和第四欄指定。
var data = new google.visualization.DataTable();
data.addColumn('string', 'Month'); // Implicit domain column.
data.addColumn('number', 'Sales'); // Implicit data column.
data.addColumn({type:'number', role:'interval'});
data.addColumn({type:'number', role:'interval'});
data.addColumn('number', 'Expenses');
data.addRows([
['April',1000, 900, 1100, 400],
['May', 1170, 1000, 1200, 460],
['June', 660, 550, 800, 1120],
['July', 1030, , , 540]
]);
var chart = new google.visualization.BarChart(
document.getElementById('visualization'));
chart.draw(data,
{width: 800, height: 600, title: 'Company Performance'});
JavaScript 文字標記法
在 JSON 文字中,您必須使用 "role":"role-type"
值指定資料欄的 p
屬性。以下範例說明如何使用 JavaScript 文字標記法指定角色。這項作業只能在建立資料表時完成。
{"cols":[ {"id":"","label":"Month","pattern":"","type":"string"}, {"id":"","label":"Sales","pattern":"","type":"number"}, {"id":"","label":"","pattern":"","type":"number","p":{"role":"interval"}}, {"id":"","label":"","pattern":"","type":"number","p":{"role":"interval"}}, {"id":"","label":"Expenses","pattern":"","type":"number"}], "rows":[ {"c":[ {"v":"April","f":null}, {"v":1000,"f":null}, {"v":900,"f":null}, {"v":1100,"f":null}, {"v":400,"f":null}]}, {"c":[ {"v":"May","f":null}, {"v":1170,"f":null}, {"v":1000,"f":null}, {"v":1200,"f":null}, {"v":460,"f":null}]}, {"c":[{"v":"June","f":null}, {"v":660,"f":null}, {"v":550,"f":null}, {"v":800,"f":null}, {"v":1120,"f":null}]}, {"c":[ {"v":"July","f":null}, {"v":1030,"f":null}, {"v":null,"f":null}, {"v":null,"f":null}, {"v":540,"f":null}]}], "p":null }
DataView.setColumns 方法
建立檢視畫面時,您可以明確設定資料欄的角色。這有助於建立新的計算資料欄。如需詳細資訊,請參閱 DataView.setColumns()
。