視覺呈現:資料表

總覽

可排序及分頁的資料表。 表格儲存格可使用格式字串設定格式,或直接插入 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);

資料格式

資料表會轉換為對應的 HTML 表格,其中資料表中的每個列/欄都會轉換成 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
alternatingRowStyle

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

類型:布林值
預設值:true
cssClassNames

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

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

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

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

類型:物件
預設值:null
firstRowNumber

資料表內第一列的資料列編號。只有在 showRowNumber 為 true 時才能使用。

類型:數字
預設值:1
frozenColumns

從左側要凍結的欄數。水平捲動剩餘的資料欄時,這些資料欄會留在原位。如果 showRowNumberfalse,將 frozenColumns 設為 0 會等同於設為 null,但如果 showRowNumber 設為 true,資料列編號欄會凍結。

類型:數字
預設值:null
高度

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

類型:字串
預設:自動
page

是否及如何啟用資料分頁功能。請選擇下列其中一個字串值:

  • 「啟用」:表格包含「上一頁」和「上一頁」按鈕。按一下這些按鈕,即可執行分頁作業並變更顯示頁面。建議您一併設定 pageSize 選項。
  • 「event」:表格包含下一頁和上一頁按鈕,但點按這些按鈕會觸發「網頁」事件,且不會變更顯示頁面。如果程式碼實作專屬的頁面轉彎邏輯,請使用這個選項。如需手動處理分頁事件的範例,請參閱 TableQueryWrapper 範例
  • 不支援「disable」- [預設] 分頁。
  • 類型:字串
    預設值:「停用」
pageSize

透過頁面選項啟用分頁功能時,每個頁面的列數。

類型:數字
預設值:10
pagingButtons

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

  • 「揚」 - 啟用上一個和下一個按鈕
  • 「prev」- 已啟用上一個按鈕
  • 「Next」- 已啟用「Next」按鈕
  • 「auto」:系統會根據目前頁面啟用這些按鈕。只會顯示在第一頁。只會顯示在最後一頁。否則兩者都會啟用。
  • number - 顯示的分頁按鈕數量。這個明確的數字會覆寫 pageSize 計算得出的數值。
類型:字串或數字
預設:「auto」
rtlTable

透過反轉表格欄順序,讓從右到左的語言 (例如阿拉伯文或希伯來文) 新增基本支援,讓最左欄的第 0 欄成為最右欄。這不會影響基礎資料中的資料欄索引,只會影響顯示順序。即使有這個選項,表格視覺化功能也不支援完整雙向 (BiDi) 語言顯示。如果啟用分頁功能 (使用頁面選項),或表格含有捲軸,系統會忽略這個選項,因為您指定的高度和寬度選項小於所需的表格大小。

類型:布林值
預設值:false
scrollLeftStartPosition

您已設定寬度屬性,因此如果表格有水平捲軸,可設定水平捲動位置 (以像素為單位)。表格會開啟,顯示出許多像素超過最左欄的像素。

類型:數字
預設值:0
showRowNumber

如果設為 true,列號會顯示為表格的第一欄。

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

使用者點選欄標題時,系統如何排序資料欄。如果已啟用排序功能,請考慮一併設定排序 Ascending 和 orderColumn 屬性。請選擇下列其中一個字串值:

  • 'enable' - [預設] 使用者可以按一下欄標題,依點選的欄排序。使用者點選資料欄標題時,系統會自動排序資料列,並觸發「排序」事件。
  • 「event」:使用者按一下欄標題時,會觸發「sort」事件,但不會自動排序資料列。如果頁面實作了自己的排序方式,請使用這個選項。如需手動處理事件排序的範例,請參閱 TableQueryWrapper 範例
  • 「停用」- 按一下欄標題沒有任何作用,
類型:字串
預設:「啟用」
sortAscending

初始排序資料欄的排序方式。true 代表遞增,false 代表遞減。如未指定 sortColumn,系統會忽略這項設定。

類型:布林值
預設值:true
sortColumn

資料表中的資料欄索引,資料表最初的排序依據。資料欄會標上一個代表排序順序的小箭頭。

類型:數字
預設:-1
startPage

要顯示的第一個表格頁面。只有在 page 處於啟用/事件時才能使用。

類型:數字
預設值:0
寬度

設定視覺呈現容器元素的寬度。您可以使用標準 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 - (數字陣列) 數字陣列,其中陣列中的索引是排序 (在可見資料表中) 的列編號,值則是基礎 (未排序) 資料資料表中該列的索引。
已就緒

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

屬性:

格式設定工具

注意: 表格視覺呈現擁有一組由一般格式設定工具取代的格式設定工具物件。一般而言,這個物件的運作方式相同,但可用於任何視覺化呈現作業。

下表列出舊版資料表的格式設定器和同等的通用格式設定工具。編寫新程式碼時,應使用通用的格式設定工具。

表格格式設定工具
TableArrowFormat google.visualization.ArrowFormat
TableBarFormat google.visualization.BarFormat
TableColorFormat google.visualization.ColorFormat
TableDateFormat google.visualization.DateFormat
TableNumberFormat google.visualization.NumberFormat
TablePatternFormat google.visualization.PatternFormat

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

資料政策

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