欄角色

本頁說明圖表資料表中角色的概念和使用情形。

  1. 什麼是角色?
  2. Google 提供哪些角色?
  3. 角色階層和關聯
  4. 指派角色

什麼是角色?

Google DataTable 和 DataView 物件現在支援明確指派的資料欄角色。資料欄角色說明該資料欄中的資料,例如:資料欄可能會保留說明工具提示文字、資料點註解或不確定度指標的資料。大多數資料欄角色都會套用至之前的「data」資料欄,無論其緊接在連續的角色欄之前或之前。例如,您可以在「data」欄之後有兩個資料欄,一個用於「tooltip」,另一個用於「annotation」。不過,在「domain」欄之後,我們通常也會允許「annotation」和「annotationText」欄的角色。

注意:如要控制當使用者將滑鼠遊標移到圖表上時顯示的工具提示內容,請參閱工具提示

資料欄有兩個主要角色可用:「網域」來指定主要軸值;「資料」則用於指定長條的高度、圓切片寬度等。這些角色是根據資料表中的資料欄順序和類型,以默示方式指派。但可以明確指派資料欄角色,您現在可以新增選用資料欄,為圖表提供有趣的新功能,例如任意註解標籤、遊標懸停文字和不確定列。

如果您未明確指派資料欄的角色,則系統會按照圖表的資料格式規格,以資料表中的順序來推估其角色。這個頁面會顯示您可明確指派的角色,以及如何指派這些角色。

以下比較圖表和只與其他明確指派的角色相比,您只能使用預設推論角色來執行的折線圖。

折線圖資料表格式

  第 0 欄 第 1 欄 N 欄
目的 第 1 行值 N 行值
資料類型
  • 字串 (離散)
  • 數字、日期、日期或
    時間 (連續)
數字 數字
角色 網域 資料 資料
支援的支援
資料欄角色
  • Annotation
  • AnnotationText
  • Annotation
  • AnnotationText
  • 確定
  • 強調
  • 間隔
  • 範圍
  • 樣式
  • 工具提示
  • Annotation
  • 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.addRows([
  ['April',1000],
  ['May',  1170],
  ['June',  660],
  ['July', 1030]
]);

這個圖表會明確指派角色,因此您可以加入選用資料欄。此圖表包含註解、annotationText、間隔和確定性角色的選用資料欄。

  • annotation 資料欄會在圖表中指定靜態標籤;這裡的「A」、「B」、「C」都是註解。
  • annotationText 資料欄會指定滑鼠遊標懸停在註解上方時,而不是資料點。
  • interval 資料欄會指定圖表上 I 長條的頂點和底端。圖表中有三個長條列。
  • confirmty 欄會指出該點是否為特定資料。最後資料點沒有不確定,因此它所導致的虛線是虛線。

資料表:

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),可繪製指定點附近的註解文字;此外,兩行會在註解圖中加上註解文字。您可以設定以下圖表選項,指定線條樣式:annotations: {'column_id': {style: 'line'}}

資料類型:字串

預設:空白字串

資料:

下訂

此圖表中的「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 [樣式]

設定資料不同層面的某些屬性。這些值如下:

  • color
  • opacity
  • stroke-width
  • stroke-color
  • stroke-opacity
  • fill-color
  • fill-opacity

Data Type: string (使用字串的多種語法),可使用 'firstProperty: value; secondProperty: value' 語法來套用多個樣式;如要指定 bar, line,point 的特定樣式,請指定類型並用大括號括住樣式屬性 (例如 bar { //properties go here })。

預設值:空值

資料:

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}'

      

這張圖表中的各個長條分別採用「style」欄角色的樣式。您可以明確設定點、線或長條的樣式 (請參閱「蜘蛛人」列),也可以根據樣式,將樣式套用至所有點、線條和長條,視圖表類型而定。

注意:請參閱其他說明,進一步瞭解如何自訂線條長條的樣式。另請參閱每個圖表類型的選項,您可以為其他實體 (例如區域、文字和方塊) 指定樣式。

工具提示

當使用者將滑鼠遊標懸停在與這個列相關的資料點時,要顯示的文字。

注意:泡泡圖視覺化功能支援這項功能。對話框圖表的 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 將套用到最接近的 datadomain 資料欄。

指派角色

在 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()