Tổng quan
Bảng có thể được sắp xếp và phân trang. Bạn có thể định dạng ô trong bảng bằng cách sử dụng các chuỗi định dạng hoặc bằng cách chèn trực tiếp HTML dưới dạng giá trị ô. Các giá trị số được căn phải, giá trị boolean được hiển thị dưới dạng dấu kiểm. Người dùng có thể chọn một hàng 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 kích hoạt một số sự kiện tương ứng với 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, 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à mọi 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ử trong bảng dữ liệu bằng cách sử dụng phương thức
setProperty()
của DataTable.
| Tên tài sản | Áp dụng cho | Mô tả |
|---|---|---|
| className | Ô | Tên lớp chuỗi để gán cho một ô riêng lẻ. Dùng công cụ này để chỉ định kiểu CSS cho từng ô. |
| kiểu | Ô | Chuỗi kiểu để gán nội tuyến cho ô. Thao tác này sẽ ghi đè kiểu lớp CSS áp dụng cho ô đó. Bạn phải thiết lập 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 về cấu hình
| Tên | |
|---|---|
| allowHtml |
Nếu được đặt thành true, các giá trị được định dạng đúng của các ô chứa thẻ HTML sẽ được hiển thị dưới dạng HTML. Nếu bạn đặt chính sách này thành false, thì hầu hết các bộ định dạng tuỳ chỉnh sẽ không hoạt động đúng cách. Loại: Boolean
Mặc định: sai
|
| kiểu hàng chỉnh |
Xác định xem kiểu màu thay thế sẽ được gán cho các hàng lẻ và chẵn. 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ử bảng, và giá trị thuộc tính là một chuỗi, xác định một lớp để chỉ định cho phần tử đó trong bảng. Sử dụng thuộc tính này để gán CSS tùy chỉnh cho các phần tử cụ thể trong bảng. Để sử dụng thuộc tính này, hãy chỉ định một đối tượng, trong đó tên thuộc tính chỉ định phần tử bảng và giá trị thuộc tính là một chuỗi, chỉ định tên lớp để chỉ định cho phần tử đó. Sau đó, bạn phải xác định một kiểu CSS cho lớp đó trên trang. Những tên thuộc tính sau được hỗ trợ:
Ví dụ:
Lưu ý: Trong CSS, một số phần tử 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
|
| Số đầu tiên |
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
|
| cố địnhCột |
Số cột ở bên trái sẽ được cố định. Các cột này sẽ vẫn giữ nguyên khi cuộn theo chiều ngang các cột còn lại. Nếu Loại: số
Mặc định: rỗng
|
| độ cao |
Đặt chiều cao của 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ố giả định sẽ là pixel. Nếu không được chỉ định, trình duyệt sẽ tự động điều chỉnh chiều cao cho vừa với bảng, thu nhỏ nhiều nhất có thể trong quá trình này; nếu bạn đặt giá trị nhỏ hơn chiều cao cần thiết, bảng sẽ thêm một thanh cuộn dọc (hàng tiêu đề cũng bị treo). Nếu được đặt thành "100%", bảng sẽ mở rộng nhất có thể trong phần tử vùng chứa. Loại: chuỗi
Mặc định: tự động
|
| trang |
Nếu và cách bật 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: "tắt"
|
| pageSize |
Số hàng trong mỗi trang, khi phân trang được bật bằng tùy chọn trang. Loại: số
Mặc định: 10
|
| Nút phân trang |
Đặt một tuỳ chọn cụ thể cho các nút phân trang. Có các lựa chọn sau:
Loại: chuỗi hoặc số
Mặc định: "tự động"
|
| Bảng rtl |
Thêm tính năng hỗ trợ cơ bản cho các ngôn ngữ 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 số 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 không ảnh hưởng đến chỉ mục cột trong dữ liệu cơ bản mà chỉ ảnh hưởng đến thứ tự hiển thị. Hình ảnh ngôn ngữ hai chiều đầy đủ (BiDi) không được hỗ trợ trong hình ảnh trực quan hoá bảng ngay cả với tuỳ chọn này. Tùy chọn này sẽ bị bỏ qua nếu bạn bật tính năng phân trang (bằng tùy chọn trang) hoặc nếu bảng có các thanh cuộn vì bạn đã chỉ định các tùy 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: sai
|
| scrollLeftStartPosition |
Đặt vị trí cuộn ngang, tính bằng pixel, nếu bảng có các thanh cuộn ngang vì bạn đã đặt thuộc tính chiều rộng. Bảng này sẽ cuộn cuộn nhiều pixel đó qua cột ngoài cùng bên trái. Loại: số
Mặc định: 0
|
| showRowNumber |
Nếu được đặt thành true, hãy hiển thị số hàng ở cột đầu tiên của bảng. Loại: Boolean
Mặc định: sai
|
| sắp xếp |
Nếu và cách sắp xếp cột khi người dùng nhấp vào tiêu đề cột. Nếu bạn bật tính năng sắp xếp, hãy cân nhắc đặt cả các thuộc tính sắp xếp và sắp xếp thứ tự. Chọn một trong các giá trị chuỗi sau:
Loại: chuỗi
Mặc định: "enable"
|
| sắp xếp tăng dần |
Thứ tự sắp xếp cột ban đầu. True cho tăng dần, false cho giảm dần. Bỏ qua nếu bạn không chỉ định Loại: Boolean
Mặc định: true
|
| sắp xếp cột |
Chỉ mục của một cột trong bảng dữ liệu, theo đó 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
|
| trang đầu |
Trang bảng đầu tiên để hiển thị. Chỉ được dùng nếu Loại: số
Mặc định: 0
|
| chiều rộng |
Đặt chiều rộng của 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ố giả định sẽ là pixel. Nếu không được chỉ định, trình duyệt sẽ tự động điều chỉnh chiều rộng cho vừa với bảng, thu nhỏ nhiều nhất có thể trong quá trình này; nếu bạn đặt chiều rộng nhỏ hơn chiều rộng cần thiết, bảng sẽ thêm một thanh cuộn ngang. Nếu được đặt thành "100%", bảng sẽ mở rộng nhất có thể trong 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 dữ liệu trả về: không có
|
getSelection() |
Triển khai getSelection chuẩn. Các phần tử lựa chọn đều là các phần tử hàng. Có thể trả về nhiều hàng đã chọn. Hàng chỉ mục trong đối tượng lựa chọn 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 ý rằng(các) lựa chọn: việc nhấp vào một ô trong lần đầu tiên chọn ô đó; việc nhấp vào ô một lần nữa sẽ bỏ chọn ô đó, dẫn đến sự kiện lựa chọn, nhưng không có mục nào được chọn trong đối tượng lựa chọn đã truy xuất. Loại dữ liệu trả về: Một mảng 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à do 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 thì phương thức này sẽ không hoạt động. Nếu bạn chưa sắp xếp dữ liệu trong mã hoặc người dùng chưa sắp xếp dữ liệu bằng cách chọn mã, các giá trị sắp xếp mặc định sẽ được trả về. Loại dữ liệu trả về: Một đối tượng có các thuộc tính sau:
|
setSelection(selection) |
Cách triển khai Loại dữ liệu trả về: không có
|
clearChart() |
Xoá biểu đồ và giải phóng tất cả tài nguyên được phân bổ của biểu đồ. Loại dữ liệu trả về: không có
|
Sự kiện
| Tên | |
|---|---|
| chọn |
Sự kiện chọn chuẩn, nhưng chỉ có thể chọn toàn bộ hàng. Properties: 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. Thuộc tính:
page: Số. Chỉ mục của trang để điều hướng đến. |
| sắp xếp |
Được kích hoạt khi người dùng nhấp vào tiêu đề cột và tuỳ chọn sắp xếp không phải là 'tắt'. Properties (Thuộc tính): Một đối tượng có các thuộc tính sau:
|
| sẵn sàng |
Biểu đồ đã 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. Properties: Không có
|
Bộ định dạng
Lưu ý: Hình ảnh dữ liệu trong 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 bộ định dạng chung, hoạt động theo cách tương tự, nhưng có thể dùng trong mọi hình ảnh trực quan.
Bảng sau đây cho thấ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 | |
|---|---|
| Bảng tính định dạng mũi tên | google.Visualization.Mũi tên |
| Định dạng BarBar | google.Visualization.BarFormat |
| Bảng màu | google.Visualization.ColorFormat |
| Bảng định dạng ngày | google.Visualization.DateFormat |
| Bảng số định dạng | google.Visualization.NumberFormat |
| Bảng định dạng | google.Visualization.PatternFormat |
Lưu ý quan trọng: Các trình định dạng thường sử 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 dữ liệu
Toàn bộ mã và dữ liệu đều được xử lý và kết xuất trong trình duyệt. Dữ liệu không được gửi đến bất kỳ máy chủ nào.