欄角色

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

  1. 什麼是角色？
  2. 有哪些角色可用？
  3. 角色階層結構與關聯性
  4. 指派角色

什麼是角色？

Google DataTable 和 DataView 物件現在支援明確指派的資料欄角色。資料欄角色說明該欄資料的用途：例如，資料欄可能會保留描述工具提示文字、資料點註解或不確定度指標的資料。大多數的資料欄角色都會套用至位於前的「資料」欄，無論該資料欄緊接在前的「資料」資料欄，或是位於連續角色欄的第一組之前。舉例來說，您可以在「資料」欄後面有兩個資料欄，一個代表「tooltip」，另一個代表「註解」。但在「domain」資料欄之後，我們通常也會允許「annotation」和「annotationText」欄角色。

注意：如要控制使用者將遊標懸停在圖表上時顯示的工具提示內容，請參閱工具提示一節。

資料欄原本有兩個角色可使用，分別是指定主要軸值的「domain」和「data」，分別指定長條高度、圓餅圖區塊寬度等。這些角色是根據資料表中資料欄的順序和類型間接指派。不過，您現在可以新增選用資料欄，為圖表提供有趣的全新功能，例如任意註解標籤、懸停文字和不確定度長條。

如果您沒有明確指派資料欄的角色，則系統會依據圖表的資料格式規格，依資料表中的資料欄順序推論其角色。本頁面說明如何明確指派哪些角色，以及如何指派角色。

以下比較您僅使用預設、推測的角色，以及與其他明確指派角色相比，可以對折線圖執行的動作比較。

折線圖資料表格格式：

  第 0 欄 第 1 欄 ... 第 N 欄
目的 第 1 行的值 ... 第 N 行值
資料類型 號碼 ... 號碼
角色 網域 資料 ... 資料
支援的選用
資料欄角色
  • 註解
  • annotationText
  • 註解
  • annotationText
  • 確定性
  • 強調
  • 間隔
  • 範圍
  • 樣式
  • 工具提示
 ...
  • 註解
  • 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 長條的頂端和底部。圖表中有三個 I 長條。
  • grty 資料欄表示該時間點的資料是否確定。最後一個資料點不確定性，因此指向該資料點的線條會加上虛線。

資料表：

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 Charts 取代的所有角色。並非所有圖表類型都支援所有角色；每張圖表的說明文件都會說明可用的角色和用途。不同圖表類型的角色會有所不同。

角色 說明 範例
註解

要在圖表，在關聯資料點附近顯示的文字。系統會在使用者沒有任何互動的情況下顯示文字。註解和註解文字可同時指派給資料點和類別 (軸標籤)。

註解有兩種樣式：點 (預設) 可在指定點附近繪製註解文字；線條 (在與圖表區域交會的線條上繪製註解文字)。您可以透過設定這個圖表選項來指定線條樣式：annotations: {'column_id': {style: 'line'}}

資料類型：字串

預設：空白字串

資料：

label：'Year'、'Sales'、null、null、'Expenses'、null、null、null role：網域、資料、註解、加註文字、資料、註解、annotationText '2004'、1000、空值、空值、0、400、空值、空值 '2005'、107'、空值、空值、空值、

這張圖表中的「A」和「B」為註解。將滑鼠遊標懸停在註解上，即可查看註解文字。請注意，您必須將滑鼠遊標懸停在註解 (而非套用該註解的資料點) 上，才會顯示 AnnotationText 值。

註解和 annotationText 儲存格都接受空值；不過，如果您有 commentsText 值，則必須有相關聯的註解值。
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

在這張圖表中，「銷售」系列包含一個強調區隔，並以第 3 欄、第 1 列和第 2 欄加以指定。「支出」系列有兩個強調的區隔，由第五欄、第二列、第三列和第四欄指定。請注意，強調如何同時強調兩個邊界點。
間隔

表示特定點的潛在資料範圍。間隔通常會顯示為 I 長條樣式範圍指標。間隔欄是數值欄；將間隔資料欄成對新增，並標示長條的低與高值。間隔值應由左至右遞增。

資料類型：數字

預設：無間隔

資料：

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 長條。數值會從左到右增加。資料點的最高與最低間隔會標示長條的頂端和底部，

注意：如需間隔所有詳細資料，請參閱「間隔」一文。
範圍

表示資料點是否在範圍內。如果某個點超出範疇，看起來會變淡。

折線圖和面積圖中的兩個資料點之間的區隔如果「任一」端點位於範圍內，就屬於這個範圍。

資料類型：布林值，其中 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

第一個範圍欄會套用至左側的「銷售」資料欄。由於兩個邊界點都超出範圍，因此系統顯示第一個區段超出範圍。第二個範圍欄適用於左側的「支出」資料欄。第一個路段中有某個邊界點在範圍內，因此系統會將第一個路段標示為範圍內。由於其他所有點都標示為範圍外，因此其餘部分不在範圍內。
樣式

為資料的不同面向設定特定屬性的樣式。這些值包括：

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

資料類型：字串 (可使用 'firstProperty: value; secondProperty: value' 語法套用多個樣式)，或是指定類型並包裝大括號內的樣式屬性 (例如 bar { //properties go here })，為 bar, line, 和 point 設定特定樣式。

預設值：null

資料：

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 Quarter」)，最後兩欄則修改第二個網域 (「2008 Quarter」)。兩個網域重疊在相同的軸刻度表上。
資料

您不需要明確指派這個角色；資料表的基本格式可讓圖表引擎推論哪些資料欄是網域欄。不過，請留意哪些資料欄屬於資料欄，以便瞭解哪些其他資料欄可以修改這個資料欄。

資料角色欄會指定要在圖表中顯示的序列資料。在大多數的圖表中，只有一個資料欄代表一個序列，但這可能會依圖表類型而有所不同 (舉例來說，散佈圖需要在第一個序列中加入兩個資料欄，其他序列各一個資料欄；K 線圖需要每個序列四個資料欄)。

資料類型：數字

  

角色階層與關聯

下圖顯示哪些角色欄可以套用至其他角色欄。除了網域資料欄外，所有資料欄都會套用至最左鄰。

例如，scope 資料欄會套用至左側最接近的 data 資料欄；annotationText 資料欄會將該資料欄套用至左側最接近的 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.setColumn 方法

建立檢視表時，您可以明確設定資料欄的角色。適合用於建立新的計算結果欄。詳情請參閱 DataView.setColumns()。