Tổng quan
Bảng có thể được sắp xếp và phân trang. Bạn có thể định dạng các ô trong bảng bằng cách sử dụng chuỗi định dạng hoặc chèn trực tiếp HTML dưới dạng giá trị của ô. Giá trị số được căn phải; các giá trị boolean được hiển thị dưới dạng dấu kiểm. Người dùng có thể chọn các hàng đơn lẻ bằng bàn phím hoặc chuột. Người dùng có thể sắp xếp hàng bằng cách nhấp vào tiêu đề cột. Hàng tiêu đề vẫn cố định khi người dùng cuộn. Bảng này sẽ kích hoạt một số sự kiện tương ứng với hoạt động tương tác của người dùng.
Ví dụ
<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>
Đang tải
Tên gói google.charts.load là "table".
google.charts.load('current', {packages: ['table']});
Tên lớp của hình ảnh trực quan là google.visualization.Table.
var visualization = new google.visualization.Table(container);
Định dạng dữ liệu
DataTable được chuyển đổi thành một bảng HTML tương ứng, trong đó mỗi hàng/cột trong DataTable được chuyển đổi thành một hàng/cột trong bảng HTML. Mỗi cột phải thuộc cùng một loại dữ liệu và tất cả các loại dữ liệu hình ảnh chuẩn đều được hỗ trợ (chuỗi, boolean, số, v.v.).
Thuộc tính tuỳ chỉnh
Bạn có thể chỉ định các thuộc tính tuỳ chỉnh sau cho các phần tử của bảng dữ liệu bằng cách sử dụng
phương thức setProperty()
của DataTable.
| Tên thuộc tính | Áp dụng cho | Nội dung mô tả |
|---|---|---|
| className | Ô | Tên lớp chuỗi để gán cho một ô riêng lẻ. Sử dụng thuộc tính này để chỉ định kiểu CSS cho từng ô. |
| kiểu | Ô | Một chuỗi kiểu để chỉ định cùng dòng cho ô. Thao tác này sẽ ghi đè kiểu lớp CSS
áp dụng cho ô đó. Bạn phải đặt thuộc tính allowhtml=true để thuộc tính này hoạt động. Ví dụ: 'border: 1px solid green;' |
Ví dụ
dataTable.setCell(22, 2, 15, 'Fifteen', {style: 'font-style:bold; font-size:22px;'});
Các lựa chọn cấu hình
| Tên | |
|---|---|
| allowHtml |
Nếu bạn đặt chính sách này thành true, thì các giá trị được định dạng của những ô chứa thẻ HTML sẽ hiển thị dưới dạng HTML. Nếu bạn đặt chính sách này thành false (sai), hầu hết trình định dạng tuỳ chỉnh sẽ không hoạt động đúng cách. Loại: boolean
Mặc định: false
|
| alternatingRowStyle |
Xác định xem có nên chỉ định kiểu màu xen kẽ cho các hàng lẻ và hàng chẵn hay không. Loại: boolean
Mặc định: true
|
| cssClassNames |
Một đối tượng trong đó mỗi tên thuộc tính mô tả một phần tử của bảng và giá trị thuộc tính là một chuỗi, xác định một lớp cần gán cho phần tử đó của bảng. Sử dụng thuộc tính này để chỉ định CSS tuỳ chỉnh cho các phần tử cụ thể trong bảng của bạn. Để sử dụng thuộc tính này, hãy gán một đối tượng, trong đó tên thuộc tính chỉ định phần tử trong bảng, còn giá trị thuộc tính là một chuỗi, chỉ định tên lớp để gán cho phần tử đó. Sau đó, bạn phải xác định kiểu CSS cho lớp đó trên trang của mình. Hệ thống hỗ trợ các tên thuộc tính sau:
Ví dụ:
Lưu ý: Trong CSS, một số phần tử sẽ ghi đè các phần tử khác. Ví dụ: nếu bạn chỉ định màu nền cho phần tử Loại: đối tượng
Mặc định: rỗng
|
| firstRowNumber |
Số hàng cho hàng đầu tiên trong dataTable. Chỉ dùng nếu showRowNumber là true. Loại: số
Mặc định: 1
|
| frozenColumns |
Số lượng cột bên trái sẽ bị cố định. Các cột này sẽ vẫn giữ nguyên vị trí khi cuộn các cột còn lại theo chiều ngang. Nếu Loại: số
Mặc định: rỗng
|
| độ cao |
Đặt chiều cao cho phần tử vùng chứa của hình ảnh trực quan. Bạn có thể sử dụng các đơn vị HTML chuẩn (ví dụ: "100px", "80em", "60"). Nếu bạn không chỉ định đơn vị nào, số này được giả định là pixel. Nếu bạn không chỉ định, trình duyệt sẽ tự động điều chỉnh chiều cao cho vừa với bảng, sẽ thu nhỏ hết mức có thể trong quá trình. Nếu chiều cao được đặt nhỏ hơn chiều cao bắt buộc, bảng sẽ thêm một thanh cuộn dọc (hàng tiêu đề cũng bị cố định). Nếu bạn đặt thành "100%", bảng sẽ mở rộng nhiều nhất có thể vào phần tử vùng chứa. Loại: chuỗi
Mặc định: tự động
|
| trang |
Trường hợp và cách bật tính năng phân trang thông qua dữ liệu. Chọn một trong các giá trị chuỗi sau:
Loại: chuỗi
Mặc định: "disable"
|
| pageSize |
Số hàng trong mỗi trang khi tính năng phân trang được bật bằng tuỳ chọn trang. Loại: số
Mặc định: 10
|
| pagingButtons |
Đặt tuỳ chọn được chỉ định cho các nút phân trang. Các lựa chọn như sau:
Loại: chuỗi hoặc số
Mặc định: "tự động"
|
| rtlTable |
Thêm tính năng hỗ trợ cơ bản cho các ngôn ngữ viết từ phải sang trái (chẳng hạn như tiếng Ả Rập hoặc tiếng Do Thái) bằng cách đảo ngược thứ tự cột của bảng, để cột 0 là cột ngoài cùng bên phải, và cột cuối cùng là cột ngoài cùng bên trái. Điều này chỉ ảnh hưởng đến thứ tự hiển thị chứ không ảnh hưởng đến chỉ mục cột trong dữ liệu cơ bản. Hình ảnh theo bảng không hỗ trợ chế độ hiển thị ngôn ngữ đầy đủ hai chiều (BiDi) ngay cả khi đã có tuỳ chọn này. Tuỳ chọn này sẽ bị bỏ qua nếu bạn bật tính năng phân trang (bằng tuỳ chọn trang) hoặc nếu bảng có thanh cuộn vì bạn đã chỉ định các tuỳ chọn chiều cao và chiều rộng nhỏ hơn kích thước bảng bắt buộc. Loại: boolean
Mặc định: false
|
| scrollLeftStartPosition |
Thiết lập vị trí cuộn theo chiều ngang (tính bằng pixel) nếu bảng có thanh cuộn ngang vì bạn đã thiết lập thuộc tính chiều rộng. Bảng sẽ mở ra với số lượng pixel mà bạn đã cuộn qua cột ngoài cùng bên trái. Loại: số
Mặc định: 0
|
| showRowNumber |
Nếu bạn đặt chính sách này thành true, số hàng sẽ hiển thị dưới dạng cột đầu tiên của bảng. Loại: boolean
Mặc định: false
|
| sắp xếp |
Trường hợp và cách sắp xếp cột khi người dùng nhấp vào tiêu đề cột. Nếu tính năng sắp xếp được bật, hãy cân nhắc đặt cả các thuộc tínhSắp xếp tăng dần vàsortColumn. Chọn một trong các giá trị chuỗi sau:
Loại: chuỗi
Mặc định: "enable"
|
| sortAscending |
Thứ tự sắp xếp cột sắp xếp ban đầu. True cho tăng dần, false cho giảm dần. Sẽ bỏ qua nếu bạn không chỉ định Loại: boolean
Mặc định: true
|
| sortColumn |
Chỉ mục của cột trong bảng dữ liệu mà bảng được sắp xếp ban đầu. Cột này sẽ được đánh dấu bằng một mũi tên nhỏ biểu thị thứ tự sắp xếp. Loại: số
Mặc định: -1
|
| startPage |
Trang đầu tiên của bảng xuất hiện. Chỉ dùng nếu Loại: số
Mặc định: 0
|
| chiều rộng |
Đặt chiều rộng cho phần tử vùng chứa của hình ảnh trực quan. Bạn có thể sử dụng các đơn vị HTML chuẩn (ví dụ: "100px", "80em", "60"). Nếu bạn không chỉ định đơn vị nào, số này được giả định là pixel. Nếu bạn không chỉ định, trình duyệt sẽ tự động điều chỉnh chiều rộng cho vừa với bảng, sẽ thu nhỏ hết mức có thể trong quá trình. Nếu chiều rộng bạn đặt nhỏ hơn chiều rộng bắt buộc, bảng sẽ thêm một thanh cuộn ngang. Nếu bạn đặt thành "100%", bảng sẽ mở rộng nhiều nhất có thể sang phần tử vùng chứa. Loại: chuỗi
Mặc định: tự động
|
Phương thức
| Phương thức | |
|---|---|
draw(data, options) |
Vẽ bảng. Loại trả lại: không có
|
getSelection() |
Cách triển khai getSelection chuẩn. Các phần tử lựa chọn là tất cả các phần tử hàng. Có thể trả về nhiều hàng đã chọn. Các chỉ mục hàng trong đối tượng lựa chọn sẽ tham chiếu đến bảng dữ liệu gốc bất kể mọi hoạt động tương tác của người dùng (sắp xếp, phân trang, v.v.). Lưu ý: nút bật/tắt lựa chọn: nhấp vào một ô lần đầu tiên; thao tác nhấp vào ô một lần nữa sẽ bỏ chọn ô đó, dẫn đến một sự kiện lựa chọn nhưng không có mục đã chọn nào trong đối tượng lựa chọn được truy xuất. Loại dữ liệu trả về: Mảng gồm các phần tử lựa chọn
|
getSortInfo() |
Gọi phương thức này để truy xuất thông tin về trạng thái sắp xếp hiện tại của bảng đã được sắp xếp (thường là theo người dùng đã nhấp vào tiêu đề cột để sắp xếp các hàng theo một cột cụ thể). Nếu bạn đã tắt tính năng sắp xếp, phương pháp này sẽ không hoạt động. Nếu bạn chưa sắp xếp dữ liệu bằng mã hoặc người dùng chưa sắp xếp dữ liệu bằng cách chọn mã, thì giá trị sắp xếp mặc định sẽ được trả về. Loại dữ liệu trả về: Đối tượng có các thuộc tính sau:
|
setSelection(selection) |
Cách triển khai Loại trả lại: không có
|
clearChart() |
Xoá biểu đồ và giải phóng tất cả tài nguyên đã phân bổ của biểu đồ đó. Loại trả lại: không có
|
Sự kiện
| Tên | |
|---|---|
| chọn |
Chọn sự kiện chuẩn, nhưng bạn chỉ có thể chọn toàn bộ hàng. Thuộc tính: Không có
|
| trang |
Được kích hoạt khi người dùng nhấp vào một nút điều hướng trang. Cơ sở lưu trú:
page: Số. Chỉ mục của trang mà bạn muốn chuyển đến. |
| sắp xếp |
Được kích hoạt khi người dùng nhấp vào tiêu đề cột và tùy chọn sắp xếp không "tắt". Thuộc tính: Một đối tượng có các thuộc tính sau:
|
| sẵn sàng |
Biểu đồ này đã sẵn sàng cho các lệnh gọi phương thức bên ngoài. Nếu muốn tương tác với biểu đồ và gọi các phương thức sau khi vẽ, bạn nên thiết lập trình nghe cho sự kiện này trước khi gọi phương thức vẽ và chỉ gọi các phương thức này sau khi sự kiện được kích hoạt. Thuộc tính: Không có
|
Trình định dạng
Lưu ý: Hình ảnh trực quan dạng bảng có một tập hợp các đối tượng trình định dạng đã được thay thế bằng các trình định dạng chung. Các đối tượng này hoạt động theo cách tương tự, nhưng có thể được dùng trong mọi hình ảnh trực quan.
Bảng sau đây trình bày trình định dạng bảng cũ và trình định dạng chung tương đương. Bạn nên sử dụng trình định dạng chung khi viết mã mới.
| Trình định dạng bảng | |
|---|---|
| TableArrowFormat | google.visualization.ArrowFormat |
| TableBarFormat | google.visualization.BarFormat |
| TableColorFormat | google.visualization.ColorFormat |
| TableDateFormat | google.visualization.DateFormat |
| TableNumberFormat | google.visualization.NumberFormat |
| TablePatternFormat | google.visualization.PatternFormat |
Lưu ý quan trọng: Các trình định dạng thường dùng HTML để định dạng văn bản; do đó, bạn nên đặt tuỳ chọn allowHtml thành true.
Chính sách về dữ liệu
Tất cả mã và dữ liệu đều được xử lý và hiển thị trong trình duyệt. Không có dữ liệu nào được gửi đến bất kỳ máy chủ nào.