簡介
可排序及分頁的表格。 您可以使用表格字串來設定格式,也可以直接插入 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 資料表中的列/欄。每一欄都必須具有相同資料類型,且支援所有標準視覺化資料類型 (字串、布林值、數字等)。
自訂屬性
您可以使用 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
|
變更列樣式 |
決定是否要將交替顏色樣式指派給奇數或偶數列。 類型:布林值
預設:是
|
cssClassNames |
物件中,每個屬性名稱都描述一個表格元素,而屬性值是字串,用於定義要指派給該表格元素的類別。請使用這項屬性將自訂 CSS 指派給資料表中的特定元素。如要使用這項屬性,請指派物件 (屬性名稱會指定資料表元素),而屬性值是字串,且指定要指派給該元素的類別名稱。然後,您必須針對網頁上的該類別定義 CSS 樣式。系統支援下列屬性名稱:
範例:
注意:在 CSS 中,某些元素會覆寫其他元素。舉例來說,如果您為 類型:物件
預設值:空值
|
第一列號碼 |
資料表中第一列的列數。只有在 showRowNumber 為 True 時才可使用。 類型:數字
預設:1
|
凍結欄 |
左邊要凍結的欄數。水平捲動其餘資料欄時,這些資料欄將保持不變。如果 類型:數字
預設值:空值
|
height |
設定視覺元素容器的高度。您可以使用標準 HTML 單位 (例如「100px」、「80em」、「60」)。如未指定單位,系統會假設該數值為像素。如未指定,瀏覽器會自動調整表格大小以配合表格大小,在過程中會盡可能縮小;如果設定值小於所需的高度,表格就會新增垂直的捲軸 (標題列也會凍結)。如果設為「100%」,系統會盡可能將資料表展開到容器元素中。 類型:字串
預設:自動
|
page |
是否允許透過分頁執行分頁。選擇下列其中一個字串值:
類型:字串
預設值:「disable」
|
網頁大小 |
使用分頁選項啟用分頁時,每個網頁的列數。 類型:數字
預設:10 個
|
分頁按鈕 |
設定分頁按鈕的指定選項。選項如下:
類型:字串或數字
預設值:「auto」
|
rtlTable |
為反向輸入由右至左的語言 (例如阿拉伯文或希伯來文) 變更資料欄的排序順序,使資料欄 0 是最右欄,而最後一欄則為最左欄。這不會影響基礎資料中的資料欄索引,只有顯示順序的順序。即使採用這個選項,表格視覺化呈現還是不支援完整的雙向 (BiDi) 語言顯示功能。如果您啟用分頁 (使用頁面選項),或者資料表含有捲軸,因為您指定的高度和寬度選項小於所需的資料表大小,系統會忽略這個選項。 類型:布林值
預設值:false
|
ScrollLeft 起始位置 |
設定您的水平捲動位置 (以像素為單位),如果表格有水平捲軸,因為您已設定寬度屬性。表格會隨即開啟,其中最寬的像素會超出左側欄。 類型:數字
預設:0
|
showRowNumber |
設為 true 時,將資料列編號顯示為表格的第一欄。 類型:布林值
預設值:false
|
排序 |
使用者點選欄標題時,該資料欄的排序方式和排序方式。如果已啟用排序功能,請考慮一併設定 sortAscending 和 sortColumn 屬性。請選擇下列其中一個字串值:
類型:字串
預設值:「enable」
|
遞增排序 |
初始排序欄的排序順序。如果是遞增,傳回 True,表示遞減為 false。如未指定 類型:布林值
預設:是
|
排序欄 |
資料表中資料欄的初始索引,資料表在一開始是排序依據。此資料欄將標示一個用來表示排序順序的小箭頭。 類型:數字
預設值:-1
|
起始網頁 |
第一個顯示的表格頁面。只有在 類型:數字
預設:0
|
width |
設定視覺元素容器元素的寬度。您可以使用標準 HTML 單位 (例如「100px」、「80em」、「60」)。如未指定單位,系統會假設該數值為像素。如未指定,瀏覽器會自動調整表格寬度以配合表格大小,在過程中會盡可能縮小;如果設定值小於所需的寬度,表格就會加入水平捲軸。如果設為「100%」,系統會盡可能將資料表展開到容器元素中。 類型:字串
預設:自動
|
方法
方法 | |
---|---|
draw(data, options) |
繪製表格。 傳回類型:無
|
getSelection() |
標準 getSelection 實作。選取元素皆為所有列元素。可傳回多個所選資料列。無論使用者互動 (排序、分頁等) 為何,選取物件中的資料列索引都會參照原始資料表。 請注意,選取項目切換設定:第一次點選儲存格時選取該儲存格;再按一下儲存格再次取消選取,就會產生選取事件,但不會在擷取的選取物件中選取任何項目。 傳回類型:選取元素陣列
|
getSortInfo() |
呼叫這個方法,即可擷取已排序資料表目前排序狀態的相關資訊 (使用者通常藉由點選資料欄標題,按照特定資料欄排序資料列)。如果停用排序功能,此方法就無法運作。 如果您尚未在程式碼中排序資料,或使用者未透過選擇程式碼來排序資料,系統會傳回預設的排序值。 傳回類型:含有以下屬性的物件:
|
setSelection(selection) |
標準 傳回類型:無
|
clearChart() |
清除圖表並釋出其分配的所有資源。 傳回類型:無
|
活動
名稱 | |
---|---|
選取 |
標準選取事件,但只能選取整列。 屬性:無
|
page |
在使用者點選網頁導覽按鈕時觸發。 屬性:
page :數字。要前往的網頁索引。 |
排序 |
在使用者按一下欄標題時觸發,排序選項則為 [停用]。 屬性:具備下列屬性的物件:
|
已就緒 |
圖表可供外部方法呼叫使用。如果您想要與圖表互動,並在繪製後呼叫方法,請先為這個事件設定事件監聽器,然後再呼叫繪圖方法,並且只在事件觸發後呼叫這些方法。 屬性:無
|
格式化工具
注意:資料表視覺化呈現了一組格式化工具物件,由一般格式轉換程式取代,其運作方式相同,但可用於任何視覺呈現。
下表列出舊版表格格式轉換器和對等的一般通用格式。編寫新程式碼時,請使用一般格式轉換程式。
表格格式 | |
---|---|
表格箭頭格式 | google.visualization.arrowFormat |
資料表列格式 | google.visualization.BarFormat |
表格顏色格式 | google.visualization.ColorFormat |
資料表日期格式 | google.visualization.DateFormat |
表格編號格式 | google.visualization.NumberFormat |
表格格式格式 | google.visualization.PatternFormat |
重要事項:格式化工具通常會使用 HTML 設定文字格式,因此您應將 allowHtml
選項設為 true
。
資料政策
系統會處理所有程式碼和資料,並在瀏覽器中顯示。系統不會將資料傳送至任何伺服器。