視覺呈現:資料表

簡介

可排序及分頁的表格。 您可以使用表格字串來設定格式,也可以直接插入 HTML 做為儲存格值。數值會靠右對齊;布林值會以勾號顯示。使用者可以透過鍵盤或滑鼠選取單一資料列。使用者可以按一下欄標題來排序資料列。使用者捲動畫面時,標頭列會保持不變。該表格會啟動一些與使用者互動相對應的事件。

範例

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['table']});
      google.charts.setOnLoadCallback(drawTable);

      function drawTable() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Name');
        data.addColumn('number', 'Salary');
        data.addColumn('boolean', 'Full Time Employee');
        data.addRows([
          ['Mike',  {v: 10000, f: '$10,000'}, true],
          ['Jim',   {v:8000,   f: '$8,000'},  false],
          ['Alice', {v: 12500, f: '$12,500'}, true],
          ['Bob',   {v: 7000,  f: '$7,000'},  true]
        ]);

        var table = new google.visualization.Table(document.getElementById('table_div'));

        table.draw(data, {showRowNumber: true, width: '100%', height: '100%'});
      }
    </script>
  </head>
  <body>
    <div id="table_div"></div>
  </body>
</html>

載入中

google.charts.load 套件名稱為 "table"

  google.charts.load('current', {packages: ['table']});

視覺化的類別名稱是 google.visualization.Table

  var visualization = new google.visualization.Table(container);

資料格式

DataTable 會轉換為對應的 HTML 表格,DataTable 中的每個列/欄都會轉換為 HTML 資料表中的列/欄。每一欄都必須具有相同資料類型,且支援所有標準視覺化資料類型 (字串、布林值、數字等)。

自訂屬性

您可以使用 DataTablesetProperty() 方法,將下列自訂屬性指派給資料表元素。

資源名稱 適用項目 說明
className 儲存格 要指派給個別儲存格的字串類別名稱。可用來為個別儲存格指派 CSS 樣式設定。
樣式 儲存格 要指派給儲存格內嵌的樣式字串。這樣會覆寫該儲存格套用的 CSS 類別樣式。您必須設定 allowHtml=true 屬性,這個方法才能正常運作。範例:'border: 1px solid green;'

示例

dataTable.setCell(22, 2, 15, 'Fifteen', {style: 'font-style:bold; font-size:22px;'});

設定選項

名稱
allowHtml

如果設為 True,系統會將包含 HTML 標記的儲存格格式格式化為 HTML。如果設為 False,多數自訂格式將無法正常運作。

類型:布林值
預設值:false
變更列樣式

決定是否要將交替顏色樣式指派給奇數或偶數列。

類型:布林值
預設:
cssClassNames

物件中,每個屬性名稱都描述一個表格元素,而屬性值是字串,用於定義要指派給該表格元素的類別。請使用這項屬性將自訂 CSS 指派給資料表中的特定元素。如要使用這項屬性,請指派物件 (屬性名稱會指定資料表元素),而屬性值是字串,且指定要指派給該元素的類別名稱。然後,您必須針對網頁上的該類別定義 CSS 樣式。系統支援下列屬性名稱:

  • headerRow - 為資料表標題列 (<tr> 元素) 指派類別名稱。
  • tableRow - 為非標頭列 (<tr> 元素) 指派類別名稱。
  • oddTableRow - 為奇數資料表資料列 (<tr> 元素) 指派類別名稱。注意: changenatingRowStyle 選項必須設為 true。
  • selectedTableRow:為所選表格列 (<tr> 元素) 指派類別名稱。
  • hoverTableRow - 為懸停錶格列 (<tr> 元素) 指派類別名稱。
  • headerCell - 為標題列 (<td> 元素) 中的所有儲存格指派類別名稱。
  • tableCell - 為所有非標頭表格儲存格 (<td> 元素) 指派類別名稱。
  • rowNumberCell - 為列號欄中的儲存格 (<td> 元素) 指派類別名稱。注意:showRowNumber 選項必須設為 true。

範例: var cssClassNames = {headerRow: 'bigAndBoldClass',
hoverTableRow: 'highlightClass'};

注意:在 CSS 中,某些元素會覆寫其他元素。舉例來說,如果您為 <tr> 元素和 <td> 元素指定背景顏色,後者的優先順序高於前者。請務必在 cssClassNames 中指定所有相關的 CSS 樣式,以免發生衝突。

類型:物件
預設值:空值
第一列號碼

資料表中第一列的列數。只有在 showRowNumber 為 True 時才可使用。

類型:數字
預設:1
凍結欄

左邊要凍結的欄數。水平捲動其餘資料欄時,這些資料欄將保持不變。如果 showRowNumberfalse,則將 frozenColumns 設為 0 時,其顯示方式會與設為 null 相同,但如果 showRowNumber 設為 true,資料列編號欄就會凍結。

類型:數字
預設值:空值
height

設定視覺元素容器的高度。您可以使用標準 HTML 單位 (例如「100px」、「80em」、「60」)。如未指定單位,系統會假設該數值為像素。如未指定,瀏覽器會自動調整表格大小以配合表格大小,在過程中會盡可能縮小;如果設定值小於所需的高度,表格就會新增垂直的捲軸 (標題列也會凍結)。如果設為「100%」,系統會盡可能將資料表展開到容器元素中。

類型:字串
預設:自動
page

是否允許透過分頁執行分頁。選擇下列其中一個字串值:

  • 'enable' - 表格會包含下一頁和上一頁按鈕。只要按一下這些按鈕,就會執行分頁作業,並變更顯示的網頁。您也可以設定 pageSize 選項。
  • 「event」:表格包含下一頁和上一頁按鈕,但按一下這些按鈕會觸發「page」事件,但不會變更顯示的頁面。當程式碼實作自己的網頁轉彎邏輯時,應使用這個選項。如需手動處理分頁事件的範例,請參閱 TableQueryWrapper 範例
  • 'disable' - [Default] 不支援分頁。
  • 類型:字串
    預設值:「disable」
網頁大小

使用分頁選項啟用分頁時,每個網頁的列數。

類型:數字
預設:10 個
分頁按鈕

設定分頁按鈕的指定選項。選項如下:

  • 「更換」:啟用 [上一個] 和 [下一個] 按鈕
  • 「prev」:只啟用 [上一個] 按鈕
  • 「next」:僅啟用下一個按鈕
  • [自動]:根據目前的網頁啟用按鈕。只在第一頁顯示。最後一頁只會顯示上一張。否則兩者都會啟用。
  • number - 要顯示的分頁按鈕數量。這個確切的數字會覆寫 pageSize 中的計算數字。
類型:字串或數字
預設值:「auto」
rtlTable

為反向輸入由右至左的語言 (例如阿拉伯文或希伯來文) 變更資料欄的排序順序,使資料欄 0 是最右欄,而最後一欄則為最左欄。這不會影響基礎資料中的資料欄索引,只有顯示順序的順序。即使採用這個選項,表格視覺化呈現還是不支援完整的雙向 (BiDi) 語言顯示功能。如果您啟用分頁 (使用頁面選項),或者資料表含有捲軸,因為您指定的高度和寬度選項小於所需的資料表大小,系統會忽略這個選項。

類型:布林值
預設值:false
ScrollLeft 起始位置

設定您的水平捲動位置 (以像素為單位),如果表格有水平捲軸,因為您已設定寬度屬性。表格會隨即開啟,其中最寬的像素會超出左側欄。

類型:數字
預設:0
showRowNumber

設為 true 時,將資料列編號顯示為表格的第一欄。

類型:布林值
預設值:false
排序

使用者點選欄標題時,該資料欄的排序方式和排序方式。如果已啟用排序功能,請考慮一併設定 sortAscending 和 sortColumn 屬性。請選擇下列其中一個字串值:

  • 'enable' - [Default] 使用者可以按一下欄標題,按點擊的資料欄來排序。使用者按一下欄標題後,系統會自動排序列,並觸發「排序」事件。
  • 「event」:使用者點擊欄標題時就會觸發「sort」事件,但系統不會自動排序資料列。如果網頁採用自己的排序方式,則應使用這個選項。如需手動處理排序事件的範例,請參閱 TableQueryWrapper 範例
  • 「disable」:按一下欄標題就不會有任何作用。
類型:字串
預設值:「enable」
遞增排序

初始排序欄的排序順序。如果是遞增,傳回 True,表示遞減為 false。如未指定 sortColumn,系統會忽略這個屬性。

類型:布林值
預設:
排序欄

資料表中資料欄的初始索引,資料表在一開始是排序依據。此資料欄將標示一個用來表示排序順序的小箭頭。

類型:數字
預設值:-1
起始網頁

第一個顯示的表格頁面。只有在 page 處於啟用/啟用模式時才會使用。

類型:數字
預設:0
width

設定視覺元素容器元素的寬度。您可以使用標準 HTML 單位 (例如「100px」、「80em」、「60」)。如未指定單位,系統會假設該數值為像素。如未指定,瀏覽器會自動調整表格寬度以配合表格大小,在過程中會盡可能縮小;如果設定值小於所需的寬度,表格就會加入水平捲軸。如果設為「100%」,系統會盡可能將資料表展開到容器元素中。

類型:字串
預設:自動

方法

方法
draw(data, options)

繪製表格。

傳回類型:
getSelection()

標準 getSelection 實作。選取元素皆為所有列元素。可傳回多個所選資料列。無論使用者互動 (排序、分頁等) 為何,選取物件中的資料列索引都會參照原始資料表。

請注意,選取項目切換設定:第一次點選儲存格時選取該儲存格;再按一下儲存格再次取消選取,就會產生選取事件,但不會在擷取的選取物件中選取任何項目。

傳回類型:選取元素陣列
getSortInfo()

呼叫這個方法,即可擷取已排序資料表目前排序狀態的相關資訊 (使用者通常藉由點選資料欄標題,按照特定資料欄排序資料列)。如果停用排序功能,此方法就無法運作。

如果您尚未在程式碼中排序資料,或使用者未透過選擇程式碼來排序資料,系統會傳回預設的排序值。

傳回類型:含有以下屬性的物件:
  • column - (數字) 資料欄排序資料欄的索引。
  • ascending - (如果遞增) 表示遞增,傳回 True;如果遞減,傳回 false。
  • sortedIndexes - (數字陣列) 數字陣列,其中陣列的索引是排序的列號 (在可見的資料表中),值則是基礎 (未排序) 資料表中該資料列的索引。
setSelection(selection)

標準 setSelection() 實作,但只能選取整個資料列或多個資料列。無論使用者互動 (排序、分頁等) 為何,選取物件中的資料列索引都會參照原始資料表。

傳回類型:
clearChart()

清除圖表並釋出其分配的所有資源。

傳回類型:

活動

名稱
選取

標準選取事件,但只能選取整列。

屬性:
page

在使用者點選網頁導覽按鈕時觸發。

屬性:page:數字。要前往的網頁索引。
排序

在使用者按一下欄標題時觸發,排序選項則為 [停用]。

屬性:具備下列屬性的物件:
  • column - (數字) 資料欄排序資料欄的索引。
  • ascending - (如果遞增) 表示遞增,傳回 True;如果遞減,傳回 false。
  • sortedIndexes - (數字陣列) 數字陣列,陣列中的索引是排序後顯示的資料列編號 (在可見資料表中),值則是基礎 (未排序) 資料表中該資料列的索引。
已就緒

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

屬性:

格式化工具

注意:資料表視覺化呈現了一組格式化工具物件,由一般格式轉換程式取代,其運作方式相同,但可用於任何視覺呈現。

下表列出舊版表格格式轉換器和對等的一般通用格式。編寫新程式碼時,請使用一般格式轉換程式。

表格格式
表格箭頭格式 google.visualization.arrowFormat
資料表列格式 google.visualization.BarFormat
表格顏色格式 google.visualization.ColorFormat
資料表日期格式 google.visualization.DateFormat
表格編號格式 google.visualization.NumberFormat
表格格式格式 google.visualization.PatternFormat

重要事項:格式化工具通常會使用 HTML 設定文字格式,因此您應將 allowHtml 選項設為 true

資料政策

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