總覽
可排序及分頁的資料表。 表格儲存格可使用格式字串設定格式,或直接插入 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 表格中的列/欄。每個資料欄都必須屬於相同的資料類型,且支援所有標準視覺化資料類型 (字串、布林值、數字等)。
自訂屬性
您可以使用 DataTable 的 setProperty()
方法,將下列自訂屬性指派給資料表元素。
資源名稱 | 適用項目 | 說明 |
---|---|---|
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 樣式。支援的屬性名稱如下:
範例:
注意:CSS 中的部分元素會覆寫其他元素。舉例來說,如果您為 類型:物件
預設值:null
|
firstRowNumber |
資料表內第一列的資料列編號。只有在 showRowNumber 為 true 時才能使用。 類型:數字
預設值:1
|
frozenColumns |
從左側要凍結的欄數。水平捲動剩餘的資料欄時,這些資料欄會留在原位。如果 類型:數字
預設值:null
|
高度 |
設定視覺呈現容器元素的高度。您可以使用標準 HTML 單位 (例如「100px」、「80em」、「60」)。如未指定單位,系統會假設該數字為像素。如未指定,瀏覽器會根據表格自動調整高度,在過程中盡可能盡可能縮小。如果設定小於所需的高度,表格就會新增垂直捲軸 (標題列也會凍結)。如果設為「100%」,表格會盡可能展開至容器元素。 類型:字串
預設:自動
|
page |
是否及如何啟用資料分頁功能。請選擇下列其中一個字串值:
類型:字串
預設值:「停用」
|
pageSize |
透過頁面選項啟用分頁功能時,每個頁面的列數。 類型:數字
預設值:10
|
pagingButtons |
設定分頁按鈕的指定選項。選項如下:
類型:字串或數字
預設:「auto」
|
rtlTable |
透過反轉表格欄順序,讓從右到左的語言 (例如阿拉伯文或希伯來文) 新增基本支援,讓最左欄的第 0 欄成為最右欄。這不會影響基礎資料中的資料欄索引,只會影響顯示順序。即使有這個選項,表格視覺化功能也不支援完整雙向 (BiDi) 語言顯示。如果啟用分頁功能 (使用頁面選項),或表格含有捲軸,系統會忽略這個選項,因為您指定的高度和寬度選項小於所需的表格大小。 類型:布林值
預設值:false
|
scrollLeftStartPosition |
您已設定寬度屬性,因此如果表格有水平捲軸,可設定水平捲動位置 (以像素為單位)。表格會開啟,顯示出許多像素超過最左欄的像素。 類型:數字
預設值:0
|
showRowNumber |
如果設為 true,列號會顯示為表格的第一欄。 類型:布林值
預設值:false
|
排序 |
使用者點選欄標題時,系統如何排序資料欄。如果已啟用排序功能,請考慮一併設定排序 Ascending 和 orderColumn 屬性。請選擇下列其中一個字串值:
類型:字串
預設:「啟用」
|
sortAscending |
初始排序資料欄的排序方式。true 代表遞增,false 代表遞減。如未指定 類型:布林值
預設值:true
|
sortColumn |
資料表中的資料欄索引,資料表最初的排序依據。資料欄會標上一個代表排序順序的小箭頭。 類型:數字
預設:-1
|
startPage |
要顯示的第一個表格頁面。只有在 類型:數字
預設值:0
|
寬度 |
設定視覺呈現容器元素的寬度。您可以使用標準 HTML 單位 (例如「100px」、「80em」、「60」)。如未指定單位,系統會假設該數字為像素。如未指定,瀏覽器會自動配合表格調整寬度,在過程中盡可能縮減寬度。如果設定小於所需的寬度,表格就會新增水平捲軸。如果設為「100%」,表格會盡可能展開至容器元素。 類型:字串
預設:自動
|
方法
方法 | |
---|---|
draw(data, options) |
繪製表格。 傳回類型:無
|
getSelection() |
標準 getSelection 實作。選取元素是指所有資料列元素。可以傳回多個選定的資料列。無論使用者互動 (排序、分頁等),選取物件中的資料列索引都會參照原始資料表。 請注意選取選項的切換按鈕:第一次點選某個儲存格時,會選取該儲存格,再次點選儲存格則可取消選取,但會產生選取事件,但不包括擷取的選取物件中的所選項目。 傳回類型:選取元素的陣列
|
getSortInfo() |
呼叫此方法即可針對已排序的資料表,擷取目前排序狀態的資訊 (通常是按照使用者點選欄標題,依特定資料欄排序資料列)。如果已停用排序功能,此方法就無法運作。 如果您尚未透過程式碼中排序資料,或是使用者尚未透過選取程式碼來排序資料,系統將傳回預設的排序值。 傳回類型:具有下列屬性的物件:
|
setSelection(selection) |
標準 傳回類型:無
|
clearChart() |
清除圖表並釋出所有分配的資源。 傳回類型:無
|
事件
名稱 | |
---|---|
選取 |
標準選取事件,但只能選取整列。 屬性:無
|
page |
在使用者點選網頁導覽按鈕時觸發。 屬性:
page :數字。要前往的頁面索引。 |
排序 |
當使用者按一下欄標題,而且排序選項不是「停用」時就會觸發。 屬性:含有下列屬性的物件:
|
已就緒 |
圖表已可供外部方法呼叫。如果您想與圖表互動,並在繪製後呼叫方法,請先為這個事件設定事件監聽器,再呼叫繪圖方法,並且只在事件觸發後呼叫這些事件監聽器。 屬性:無
|
格式設定工具
注意: 表格視覺呈現擁有一組由一般格式設定工具取代的格式設定工具物件。一般而言,這個物件的運作方式相同,但可用於任何視覺化呈現作業。
下表列出舊版資料表的格式設定器和同等的通用格式設定工具。編寫新程式碼時,應使用通用的格式設定工具。
表格格式設定工具 | |
---|---|
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
。
資料政策
所有程式碼和資料都經過處理並在瀏覽器中顯示。系統不會將任何資料傳送至任何伺服器。