Trang này được dịch bởi Cloud Translation API.

Tài liệu tham khảo API Google trực quan hoá

Trang này liệt kê các đối tượng mà API Trực quan hoá của Google hiển thị và các phương thức tiêu chuẩn được hiển thị trong tất cả hình ảnh trực quan.

Lưu ý: Không gian tên của Google Nghĩa của API là google.visualization.*

Lớp DataTable
Lớp DataView
Lớp học ChartWrapper
Lớp ChartEditor
Phương thức thao túng dữ liệu
1. group()
2. join()
Công cụ định dạng
Lớp tiện ích trợ giúp
Lớp truy vấn
1. Cụm từ tìm kiếm
2. QueryResponse
Lớp hiển thị lỗi
Sự kiện
Thuộc tính và phương thức trực quan hoá chuẩn
Các loại phương thức tĩnh

Lưu ý về mảng

Một số trình duyệt không xử lý chính xác dấu phẩy theo sau trong các mảng JavaScript, vì vậy bạn không nên sử dụng chúng. Bạn có thể chấp nhận giá trị trống ở giữa một mảng. Vì vậy, ví dụ:

data = ['a','b','c', ,]; // BAD data = ['a','b','c']; // OK data = ['a','b', ,'d']; // Also OK. The third value is undefined.

Lớp DataTable

Đại diện cho một bảng giá trị hai chiều và có thể thay đổi. Để tạo bản sao chỉ có thể đọc của DataTable (không bắt buộc được lọc để hiển thị các giá trị, hàng hoặc cột cụ thể), hãy tạo một DataView.

Mỗi cột được gán một loại dữ liệu và một số thuộc tính không bắt buộc như mã nhận dạng, nhãn và chuỗi mẫu.

Ngoài ra, bạn có thể chỉ định các thuộc tính tuỳ chỉnh (cặp tên/giá trị) cho bất kỳ ô, hàng, cột nào hoặc toàn bộ bảng. Một số hình ảnh trực quan hỗ trợ các thuộc tính tuỳ chỉnh cụ thể; ví dụ: Hình ảnh trực quan hoá bảng hỗ trợ một thuộc tính ô có tên là "style", cho phép bạn chỉ định một chuỗi kiểu CSS cùng dòng cho ô trong bảng được hiển thị. Hình ảnh phải mô tả trong tài liệu về mọi thuộc tính tuỳ chỉnh mà hình ảnh đó hỗ trợ.

Xem thêm: QueryResponse.getDataTable

Hàm khởi tạo

Cú pháp

DataTable(opt_data, opt_version)

opt_data: [Không bắt buộc] Dữ liệu dùng để khởi tạo bảng. Đây có thể là JSON được trả về bằng cách gọi DataTable.toJSON() trên bảng điền sẵn hoặc một đối tượng JavaScript chứa dữ liệu dùng để khởi chạy bảng. Cấu trúc của đối tượng cố định JavaScript được mô tả tại đây. Nếu thông số này không được cung cấp, thì một bảng dữ liệu mới, trống sẽ được trả về.
opt_version: [Không bắt buộc] Một giá trị số chỉ định phiên bản của giao thức dây được sử dụng. Chỉ Trình triển khai nguồn dữ liệu của Công cụ biểu đồ mới sử dụng tính năng này. Phiên bản hiện tại là 0.6.

Chi tiết

Đối tượng DataTable dùng để lưu giữ dữ liệu được truyền vào hình ảnh trực quan. DataTable là một bảng hai chiều cơ bản. Tất cả dữ liệu trong mỗi cột phải có cùng một loại dữ liệu. Mỗi cột có một mã mô tả bao gồm loại dữ liệu, nhãn cho cột đó (có thể hiển thị trong hình ảnh trực quan) và mã nhận dạng, có thể dùng để tham chiếu đến một cột cụ thể (thay vì sử dụng chỉ mục cột). Đối tượng DataTable cũng hỗ trợ liên kết các thuộc tính tuỳ ý được gán cho một giá trị, hàng, cột hoặc toàn bộ DataTable cụ thể. Hình ảnh trực quan có thể dùng những nội dung này để hỗ trợ các tính năng bổ sung. Ví dụ: Hình ảnh trực quan hoá bảng sử dụng các thuộc tính tuỳ chỉnh để cho phép bạn chỉ định tên lớp hoặc kiểu tuỳ ý cho từng ô.

Mỗi ô trong bảng chứa một giá trị. Các ô có thể có giá trị rỗng hoặc giá trị thuộc loại được cột xác định. Các ô có thể tuỳ ý lấy phiên bản "được định dạng" của dữ liệu; đây là phiên bản chuỗi của dữ liệu, được định dạng để hiển thị dưới dạng hình ảnh trực quan. Hình ảnh trực quan có thể (nhưng không bắt buộc) sử dụng phiên bản đã định dạng để hiển thị, nhưng sẽ luôn sử dụng chính dữ liệu đó cho mọi cách sắp xếp hoặc tính toán mà công cụ đó thực hiện (chẳng hạn như xác định vị trí đặt một điểm trên biểu đồ). Ví dụ có thể là gán giá trị "thấp" "trung bình" và "cao" làm giá trị được định dạng cho các giá trị ô số 1, 2 và 3.

Để thêm hàng dữ liệu sau khi gọi hàm khởi tạo, bạn có thể gọi addRow() cho một hàng hoặc addRows() cho nhiều hàng. Bạn cũng có thể thêm cột bằng cách gọi các phương thức addColumn(). Bạn cũng có thể xoá các hàng và cột. Tuy nhiên, thay vì xoá hàng hoặc cột, hãy cân nhắc tạo một DataView – một thành phần hiển thị có chọn lọc của DataTable.

Nếu bạn thay đổi các giá trị trong một DataTable sau khi truyền vào phương thức draw() của một hình ảnh trực quan, thì các thay đổi đó sẽ không làm thay đổi biểu đồ ngay lập tức. Bạn phải gọi lại draw() để phản ánh mọi thay đổi.

Lưu ý: Google Biểu đồ không thực hiện bất kỳ xác thực nào đối với các bảng dữ liệu. (Nếu có, biểu đồ sẽ hiển thị chậm hơn.) Nếu bạn cung cấp số mà cột của bạn sẽ mong đợi một chuỗi hoặc ngược lại, Google Biểu đồ sẽ cố gắng hết sức để diễn giải giá trị theo cách hợp lý, nhưng sẽ không gắn cờ các lỗi.

Ví dụ

Ví dụ sau minh hoạ việc tạo thực thể và điền sẵn DataTable bằng một chuỗi giá trị cố định, với cùng dữ liệu như trong ví dụ về JavaScript ở trên:

var dt = new google.visualization.DataTable({
    cols: [{id: 'task', label: 'Task', type: 'string'},
           {id: 'hours', label: 'Hours per Day', type: 'number'}],
    rows: [{c:[{v: 'Work'}, {v: 11}]},
           {c:[{v: 'Eat'}, {v: 2}]},
           {c:[{v: 'Commute'}, {v: 2}]},
           {c:[{v: 'Watch TV'}, {v:2}]},
           {c:[{v: 'Sleep'}, {v:7, f:'7.000'}]}]
    }, 0.6);

Ví dụ sau đây sẽ tạo một DataTable mới trống, sau đó điền thủ công cùng một dữ liệu như trên:

var data = new google.visualization.DataTable();
data.addColumn('string', 'Task');
data.addColumn('number', 'Hours per Day');
data.addRows([
  ['Work', 11],
  ['Eat', 2],
  ['Commute', 2],
  ['Watch TV', 2],
  ['Sleep', {v:7, f:'7.000'}]
]);

Tôi nên tạo DataTable trong JavaScript hay ký hiệu bằng chữ đối tượng?

Bạn có thể tạo DataTable bằng cách gọi hàm khởi tạo không có tham số, sau đó thêm giá trị bằng cách gọi các phương thức addColumn()/addRows() được liệt kê bên dưới hoặc bằng cách truyền vào một đối tượng cố định JavaScript đã điền sẵn để khởi chạy đối tượng đó. Cả hai phương pháp đều được mô tả bên dưới. Bạn nên sử dụng công cụ nào?

Việc tạo và điền bảng trong JavaScript bằng cách gọi addColumn(), addRow() và addRows() là mã rất dễ đọc. Phương thức này rất hữu ích khi bạn nhập mã thủ công. Cách này chậm hơn so với việc sử dụng ký hiệu bằng chữ đối tượng (như mô tả ở phần tiếp theo). Tuy nhiên, trong các bảng nhỏ hơn (ví dụ: 1.000 ô), bạn có thể sẽ không nhận thấy khác biệt nhiều.
Việc khai báo trực tiếp đối tượng DataTable bằng ký hiệu dưới dạng văn bản đối tượng sẽ nhanh hơn đáng kể trong các bảng lớn. Tuy nhiên, để đưa ra quyết định đúng đắn có thể là một cú pháp phức tạp; hãy sử dụng cú pháp này nếu bạn có thể tạo cú pháp bằng chữ đối tượng trong mã, giúp giảm khả năng xảy ra lỗi.

Phương thức

Phương thức	Giá trị trả về	Nội dung mô tả
`addColumn(type, opt_label, opt_id)` OR `addColumn(description_object)`	Số	Thêm một cột mới vào bảng dữ liệu và trả về chỉ mục của cột mới. Tất cả các ô của cột mới đều được gán giá trị `null`. Phương thức này có hai chữ ký: Chữ ký đầu tiên có các thông số sau: `type` – Một chuỗi có kiểu dữ liệu của các giá trị trong cột. Loại này có thể là một trong những loại sau: `'string', 'number', 'boolean', 'date', 'datetime',` và `'timeofday'.` `opt_label` – [Không bắt buộc] Chuỗi có nhãn của cột. Nhãn cột thường xuất hiện trong hình ảnh trực quan, chẳng hạn như tiêu đề cột trong bảng hoặc nhãn chú giải trong biểu đồ hình tròn. Nếu bạn không chỉ định giá trị nào, thì chuỗi trống sẽ được gán. `opt_id` – [Không bắt buộc] Một chuỗi có giá trị nhận dạng duy nhất cho cột. Nếu bạn không nêu rõ giá trị, thì hệ thống sẽ chỉ định một chuỗi trống. Chữ ký thứ hai có một tham số đối tượng duy nhất với các thành phần sau: `type` – Một chuỗi mô tả loại dữ liệu cột. Các giá trị giống với `type` ở trên. `label` – [Không bắt buộc, chuỗi] Nhãn cho cột. `id` – [Không bắt buộc, chuỗi] Mã nhận dạng cho cột. `role` – [Không bắt buộc, chuỗi] Vai trò cho cột. `pattern` – [Không bắt buộc, chuỗi] Chuỗi định dạng số (hoặc ngày) chỉ định cách hiển thị giá trị cột. Xem thêm: getColumnId, getColumnLabel, getColumnType, insertColumn, getColumnRole
`addRow(opt_cellArray)`	Số	Thêm một hàng mới vào bảng dữ liệu và trả về chỉ mục của hàng mới. `opt_cellArray` [không bắt buộc] Một đối tượng hàng, trong ký hiệu JavaScript, chỉ định dữ liệu cho hàng mới. Nếu không bao gồm thông số này, phương thức này sẽ chỉ thêm một hàng trống mới vào cuối bảng. Tham số này là một mảng các giá trị của ô: nếu chỉ muốn chỉ định một giá trị cho một ô, bạn chỉ cần cung cấp giá trị cho ô đó (ví dụ: 55 hoặc 'hello'); nếu muốn chỉ định một giá trị và/hoặc thuộc tính được định dạng cho ô, hãy sử dụng đối tượng ô (ví dụ: {v:55, f:'năm mươi năm'}). Bạn có thể kết hợp các giá trị đơn giản và đối tượng ô trong cùng một lệnh gọi phương thức). Sử dụng `null` hoặc mục nhập mảng trống cho ô trống. Ví dụ: data.addRow(); // Add an empty row data.addRow(['Hermione', new Date(1999,0,1)]); // Add a row with a string and a date value. // Add a row with two cells, the second with a formatted value. data.addRow(['Hermione', {v: new Date(1999,0,1), f: 'January First, Nineteen ninety-nine'} ]); data.addRow(['Col1Val', null, 'Col3Val']); // Second column is undefined. data.addRow(['Col1Val', , 'Col3Val']); // Same as previous.
`addRows(numOrArray)`	Số	Thêm hàng mới vào bảng dữ liệu và trả về chỉ mục của hàng được thêm gần đây nhất. Bạn có thể gọi phương thức này để tạo các hàng trống mới hoặc bằng dữ liệu dùng để điền vào các hàng, như mô tả dưới đây. `numOrArray` – Một số hoặc một mảng: Số – Số chỉ định số lượng hàng mới, chưa được điền sẵn để thêm. Array (Mảng) – Một mảng các đối tượng hàng được dùng để điền một tập hợp các hàng mới. Mỗi hàng là một đối tượng như mô tả trong `addRow()`. Sử dụng `null` hoặc mục nhập mảng trống cho ô trống. Ví dụ: data.addRows([ ['Ivan', new Date(1977,2,28)], ['Igor', new Date(1962,7,5)], ['Felix', new Date(1983,11,17)], ['Bob', null] // No date set for Bob. ]); Xem thêm: insertRows
`clone()`	DataTable	Trả về một bản sao của bảng dữ liệu. Kết quả là một bản sao sâu của bảng dữ liệu, ngoại trừ các thuộc tính ô, thuộc tính hàng, thuộc tính bảng và thuộc tính cột. Đây là các bản sao nông; điều này có nghĩa là các thuộc tính không gốc được sao chép bằng cách tham chiếu, nhưng các thuộc tính gốc được sao chép theo giá trị.
`getColumnId(columnIndex)`	Chuỗi	Trả về giá trị nhận dạng của một cột nhất định do chỉ mục cột trong bảng cơ bản chỉ định. Đối với các bảng dữ liệu do truy vấn truy xuất, giá trị nhận dạng cột do nguồn dữ liệu đặt và có thể dùng để tham chiếu đến các cột khi sử dụng ngôn ngữ truy vấn. Xem thêm: Query.setQuery
`getColumnIndex(columnIdentifier)`	Chuỗi, số	Trả về chỉ mục của một cột cho trước được chỉ định bởi chỉ mục cột, mã nhận dạng hoặc nhãn nếu cột đó tồn tại trong bảng này, nếu không thì trả về giá trị -1. Khi `columnIdentifier` là một chuỗi, nó sẽ được dùng để tìm cột theo mã nhận dạng trước tiên, sau đó theo nhãn của cột đó. Xem thêm: getColumnId, getColumnLabel
`getColumnLabel(columnIndex)`	Chuỗi	Trả về nhãn của một cột cho trước do chỉ mục cột trong bảng cơ bản chỉ định. Nhãn cột thường xuất hiện trong hình ảnh trực quan. Ví dụ: nhãn cột có thể hiển thị dưới dạng tiêu đề cột trong bảng hoặc nhãn chú thích trong biểu đồ hình tròn. Đối với các bảng dữ liệu được truy xuất bằng truy vấn, nhãn cột được đặt bởi nguồn dữ liệu hoặc theo mệnh đề `label` của ngôn ngữ truy vấn. Xem thêm: setColumnLabel
`getColumnPattern(columnIndex)`	Chuỗi	Trả về mẫu định dạng dùng để định dạng các giá trị của cột được chỉ định. `columnIndex` phải là một số lớn hơn hoặc bằng 0 và nhỏ hơn số cột do phương thức `getNumberOfColumns()` trả về. Đối với các bảng dữ liệu do truy vấn truy xuất, Mẫu cột được đặt theo nguồn dữ liệu hoặc theo mệnh đề `format` của ngôn ngữ truy vấn. Ví dụ về mẫu là `'#,##0.00'`. Để biết thêm thông tin về mẫu, hãy xem tài liệu tham khảo về ngôn ngữ truy vấn.
`getColumnProperties(columnIndex)`	Đối tượng	Trả về bản đồ của tất cả thuộc tính cho cột được chỉ định. Lưu ý rằng đối tượng thuộc tính được trả về bằng tham chiếu. Vì vậy, việc thay đổi các giá trị trong đối tượng được truy xuất sẽ thay đổi các giá trị đó trong `DataTable`. `columnIndex` là chỉ mục số của cột để truy xuất thuộc tính.
`getColumnProperty(columnIndex, name)`	Tự động	Trả về giá trị của một thuộc tính được đặt tên, hoặc `null` nếu bạn không đặt thuộc tính nào như vậy cho cột được chỉ định. Kiểu dữ liệu trả về sẽ khác nhau tuỳ thuộc vào thuộc tính. `columnIndex` phải là một số lớn hơn hoặc bằng 0 và nhỏ hơn số cột do phương thức `getNumberOfColumns()` trả về. `name` là tên thuộc tính ở dạng chuỗi. Xem thêm: setColumnProperty setColumnProperties
`getColumnRange(columnIndex)`	Đối tượng	Trả về giá trị tối thiểu và lớn nhất của các giá trị trong một cột được chỉ định. Đối tượng trả về có các thuộc tính `min` và `max`. Nếu dải ô không có giá trị, `min` và `max` sẽ chứa `null`. `columnIndex` phải là một số lớn hơn hoặc bằng 0 và nhỏ hơn số cột do phương thức `getNumberOfColumns()` trả về.
`getColumnRole(columnIndex)`	Chuỗi	Trả về vai trò của cột được chỉ định.
`getColumnType(columnIndex)`	Chuỗi	Trả về loại của một cột cho trước được chỉ định bởi chỉ mục cột. `columnIndex` phải là một số lớn hơn hoặc bằng 0 và nhỏ hơn số cột do phương thức `getNumberOfColumns()` trả về. Loại cột được trả về có thể là một trong các loại sau: `'string', 'number', 'boolean', 'date', 'datetime',` và `'timeofday'`
`getDistinctValues(columnIndex)`	Mảng đối tượng	Trả về các giá trị duy nhất trong một cột nhất định theo thứ tự tăng dần. `columnIndex` phải là một số lớn hơn hoặc bằng 0 và nhỏ hơn số cột do phương thức `getNumberOfColumns()` trả về. Loại đối tượng được trả về giống với loại đối tượng mà phương thức `getValue` trả về.
`getFilteredRows(filters)`	Mảng đối tượng	Trả về chỉ mục hàng của các hàng phù hợp với tất cả bộ lọc cho trước. Các chỉ mục được trả về theo thứ tự tăng dần. Kết quả đầu ra của phương thức này có thể được dùng làm dữ liệu đầu vào cho `DataView.setRows()` để thay đổi tập hợp các hàng hiển thị trong hình ảnh trực quan. `filters` – Một mảng đối tượng mô tả một giá trị ô được chấp nhận. Phương thức này trả về chỉ mục hàng nếu chỉ mục đó khớp với tất cả các bộ lọc nhất định. Mỗi bộ lọc là một đối tượng có một thuộc tính dạng số `column` chỉ định chỉ mục của cột trong hàng cần đánh giá, cùng với một trong các chỉ số sau: Một thuộc tính `value` có giá trị phải khớp chính xác với ô trong cột được chỉ định. Giá trị phải cùng loại với cột; hoặc Một hoặc cả hai thuộc tính sau, cùng loại với cột được lọc: `minValue` – Một giá trị nhỏ nhất cho ô. Giá trị ô trong cột được chỉ định phải lớn hơn hoặc bằng giá trị này. `maxValue` – Một giá trị tối đa cho ô. Giá trị ô trong cột được chỉ định phải nhỏ hơn hoặc bằng giá trị này. Giá trị rỗng hoặc không xác định cho `minValue` (hoặc `maxValue`) có nghĩa là giới hạn dưới (hoặc trên) của dải ô sẽ không được thực thi. Một thuộc tính không bắt buộc khác là `test` chỉ định một hàm để kết hợp với tính năng lọc giá trị hoặc phạm vi. Hàm được gọi bằng giá trị ô, chỉ mục hàng và cột, cũng như bảng dữ liệu. Hàm này sẽ trả về false nếu cần loại trừ hàng khỏi kết quả. Ví dụ: `getFilteredRows([{column: 3, value: 42}, {column: 2, minValue: 'bar', maxValue: 'foo'}, {column: 1, test: (value, rowId, columnId, datatable) => { return value == "baz"; }}])` trả về một mảng có chứa, theo thứ tự tăng dần, chỉ mục của tất cả các hàng trong đó cột thứ tư (chỉ mục cột 3) chính xác là 42 và cột thứ ba (chỉ mục cột 2) nằm giữa "bar" và "foo" (bao gồm cả cột thứ tư).
`getFormattedValue(rowIndex, columnIndex)`	Chuỗi	Trả về giá trị được định dạng của ô tại chỉ mục hàng và cột cho sẵn. `rowIndex` phải là một số lớn hơn hoặc bằng 0 và nhỏ hơn số hàng do phương thức `getNumberOfRows()` trả về. `ColumnIndex` phải là một số lớn hơn hoặc bằng 0 và nhỏ hơn số cột do phương thức `getNumberOfColumns()` trả về. Để biết thêm thông tin về các giá trị của cột định dạng, hãy xem tài liệu tham khảo về ngôn ngữ truy vấn. Xem thêm: setFormattedValue
`getNumberOfColumns()`	Số	Trả về số lượng cột trong bảng.
`getNumberOfRows()`	Số	Trả về số lượng hàng trong bảng.
`getProperties(rowIndex, columnIndex)`	Đối tượng	Trả về bản đồ chứa tất cả thuộc tính cho một ô được chỉ định. Lưu ý rằng đối tượng thuộc tính được trả về bằng tham chiếu. Vì vậy, việc thay đổi các giá trị trong đối tượng được truy xuất sẽ thay đổi các giá trị đó trong `DataTable`. `rowIndex` là chỉ mục hàng của ô. `columnIndex` là chỉ mục cột của ô.
`getProperty(rowIndex, columnIndex, name)`	Tự động	Trả về giá trị của một thuộc tính được đặt tên, hoặc `null` nếu không có thuộc tính nào như vậy được đặt cho ô được chỉ định. Kiểu dữ liệu trả về sẽ khác nhau tuỳ thuộc vào thuộc tính. `rowIndex` phải là một số lớn hơn hoặc bằng 0 và nhỏ hơn số hàng do phương thức `getNumberOfRows()` trả về. `columnIndex` phải là một số lớn hơn hoặc bằng 0 và nhỏ hơn số cột do phương thức `getNumberOfColumns()` trả về. `name` là một chuỗi có tên thuộc tính. Xem thêm: setCell setProperties setProperty
`getRowProperties(rowIndex)`	Đối tượng	Trả về bản đồ của tất cả các thuộc tính cho một hàng được chỉ định. Lưu ý rằng đối tượng thuộc tính được trả về bằng tham chiếu. Vì vậy, việc thay đổi các giá trị trong đối tượng được truy xuất sẽ thay đổi các giá trị đó trong `DataTable`. `rowIndex` là chỉ mục của hàng để truy xuất các thuộc tính.
`getRowProperty(rowIndex, name)`	Tự động	Trả về giá trị của một thuộc tính được đặt tên hoặc `null` nếu không có thuộc tính nào như vậy được đặt cho hàng được chỉ định. Kiểu dữ liệu trả về sẽ khác nhau tuỳ thuộc vào thuộc tính. `rowIndex` phải là một số lớn hơn hoặc bằng 0 và nhỏ hơn số hàng mà phương thức `getNumberOfRows()` trả về. `name` là một chuỗi có tên thuộc tính. Xem thêm: setRowProperty setRowProperties
`getSortedRows(sortColumns)`	Mảng số	Trả về phiên bản được sắp xếp của bảng mà không sửa đổi thứ tự của dữ liệu cơ bản. Để sắp xếp vĩnh viễn dữ liệu cơ bản, hãy gọi `sort()`. Bạn có thể chỉ định cách sắp xếp theo một số cách, tuỳ thuộc vào kiểu mà bạn chuyển vào tham số `sortColumns`: Một số chỉ định chỉ mục của cột cần sắp xếp. Cách sắp xếp sẽ theo thứ tự tăng dần. Ví dụ: `sortColumns(3)` sẽ sắp xếp theo cột thứ 4 theo thứ tự tăng dần. Một đối tượng chứa số lượng chỉ mục cột cần sắp xếp và một thuộc tính boolean không bắt buộc `desc`. Nếu bạn đặt `desc` thành true, thì cột cụ thể sẽ được sắp xếp theo thứ tự giảm dần; nếu không, thứ tự sắp xếp sẽ tăng dần. Ví dụ: `sortColumns({column: 3})` sẽ sắp xếp theo cột thứ 4 theo thứ tự tăng dần; `sortColumns({column: 3, desc: true})` sẽ sắp xếp theo cột thứ 4 theo thứ tự giảm dần. Một mảng số của các chỉ mục cột cần sắp xếp. Số đầu tiên là cột chính để sắp xếp, số thứ hai là cột phụ, v.v. Điều này có nghĩa là khi hai giá trị trong cột đầu tiên bằng nhau, các giá trị trong cột tiếp theo sẽ được so sánh, v.v. Ví dụ: Trước tiên, `sortColumns([3, 1, 6])` sẽ sắp xếp theo cột thứ 4 (theo thứ tự tăng dần), sau đó theo cột thứ 2 (theo thứ tự tăng dần), sau đó theo cột thứ 7 (theo thứ tự tăng dần). Một mảng đối tượng, mỗi mảng có số chỉ mục cột cần sắp xếp và một thuộc tính boolean không bắt buộc `desc`. Nếu bạn đặt `desc` thành true, thì cột cụ thể sẽ được sắp xếp theo thứ tự giảm dần (mặc định là thứ tự tăng dần). Đối tượng đầu tiên là cột chính để sắp xếp, đối tượng thứ hai là cột phụ, v.v. Điều này có nghĩa là khi hai giá trị trong cột đầu tiên bằng nhau, các giá trị trong cột tiếp theo sẽ được so sánh, v.v. Ví dụ: `sortColumn([{column: 3}, {column: 1, desc: true}, {column: 6, desc: true}])` sẽ sắp xếp trước tiên theo cột thứ 4 (theo thứ tự tăng dần), sau đó đến cột 2 theo thứ tự giảm dần và sau đó là cột 7 theo thứ tự giảm dần. Giá trị trả về là một mảng số, mỗi số là một chỉ mục của hàng `DataTable`. Việc lặp lại trên các hàng `DataTable` theo thứ tự của mảng được trả về sẽ dẫn đến các hàng được sắp xếp theo thứ tự của `sortColumns` đã chỉ định. Bạn có thể dùng dữ liệu đầu ra làm dữ liệu đầu vào cho `DataView.setRows()` để nhanh chóng thay đổi tập hợp các hàng hiển thị trong hình ảnh trực quan. Xin lưu ý rằng cách sắp xếp được đảm bảo sẽ mang tính ổn định: nghĩa là nếu bạn sắp xếp trên các giá trị bằng nhau của hai hàng, thì cùng một cách sắp xếp sẽ trả về các hàng theo cùng một thứ tự mỗi lần. Xem thêm: sắp xếp Ví dụ: Để lặp lại các hàng được sắp xếp theo cột thứ ba, hãy sử dụng: var rowInds = data.getSortedRows([{column: 2}]); for (var i = 0; i < rowInds.length; i++) { var v = data.getValue(rowInds[i], 2); }
`getTableProperties`	Đối tượng	Trả về bản đồ của tất cả thuộc tính cho bảng.
`getTableProperty(name)`	Tự động	Trả về giá trị của một thuộc tính được đặt tên hoặc `null` nếu không có thuộc tính nào như vậy được đặt cho bảng. Kiểu dữ liệu trả về sẽ khác nhau tuỳ thuộc vào thuộc tính. `name` là một chuỗi có tên thuộc tính. Xem thêm: setTableProperties setTableProperty
`getValue(rowIndex, columnIndex)`	Đối tượng	Trả về giá trị của ô tại các chỉ mục hàng và cột cho sẵn. `rowIndex` phải là một số lớn hơn hoặc bằng 0 và nhỏ hơn số hàng mà phương thức `getNumberOfRows()` trả về. `columnIndex` phải là một số lớn hơn hoặc bằng 0 và nhỏ hơn số cột do phương thức `getNumberOfColumns()` trả về. Loại giá trị được trả về phụ thuộc vào loại cột (xem getColumnType): Nếu loại cột là "chuỗi", thì giá trị sẽ là một chuỗi. Nếu loại cột là "number", thì giá trị sẽ là một số. Nếu loại cột là "boolean", thì giá trị sẽ là một giá trị boolean. Nếu loại cột là "ngày" hoặc "ngày giờ", thì giá trị sẽ là đối tượng Ngày. Nếu loại cột là "timeofday" (thời gian trong ngày), thì giá trị là một mảng gồm 4 số: [giờ, phút, giây, mili giây]. Nếu giá trị của ô là giá trị rỗng, hàm này sẽ trả về `null`.
`insertColumn(columnIndex, type [,label [,id]])`	Không có	Chèn một cột mới vào bảng dữ liệu, tại chỉ mục đặc tả. Tất cả các cột hiện có tại hoặc sau chỉ mục đã chỉ định sẽ được chuyển sang chỉ mục cao hơn. `columnIndex` là một số có chỉ mục bắt buộc của cột mới. `type` phải là một chuỗi có kiểu dữ liệu của các giá trị trong cột. Loại này có thể là một trong những loại sau: `'string', 'number', 'boolean', 'date', 'datetime',` và `'timeofday'.` `label` phải là một chuỗi có nhãn của cột. Nhãn cột thường xuất hiện trong hình ảnh trực quan, chẳng hạn như tiêu đề cột trong bảng hoặc nhãn chú thích trong biểu đồ hình tròn. Nếu bạn không chỉ định giá trị nào, thì chuỗi trống sẽ được gán. `id` phải là một chuỗi có giá trị nhận dạng duy nhất của cột. Nếu bạn không chỉ định giá trị nào, thì chuỗi trống sẽ được gán. Xem thêm: addColumn
`insertRows(rowIndex, numberOrArray)`	Không có	Chèn số hàng được chỉ định tại chỉ mục hàng được chỉ định. `rowIndex` là số chỉ mục nơi để chèn(các) hàng mới. Các hàng sẽ được thêm vào, bắt đầu tại số chỉ mục được chỉ định. `numberOrArray` là một số hàng trống mới cần thêm vào hoặc một mảng gồm một hoặc nhiều hàng được điền sẵn để thêm vào chỉ mục. Hãy xem `addRows()` để biết cú pháp để biết cách thêm một mảng các đối tượng hàng. Xem thêm: addRows
`removeColumn(columnIndex)`	Không có	Xoá cột tại chỉ mục được chỉ định. `columnIndex` phải là một số có chỉ mục cột hợp lệ. Xem thêm: removeColumns
`removeColumns(columnIndex, numberOfColumns)`	Không có	Xoá số lượng cột được chỉ định bắt đầu từ cột tại chỉ mục được chỉ định. `numberOfColumns` là số lượng cột cần xoá. `columnIndex` phải là một số có chỉ mục cột hợp lệ. Xem thêm: removeColumn
`removeRow(rowIndex)`	Không có	Xoá hàng tại chỉ mục được chỉ định. `rowIndex` phải là một số có chỉ mục hàng hợp lệ. Xem thêm: removeRows
`removeRows(rowIndex, numberOfRows)`	Không có	Xoá số hàng được chỉ định bắt đầu từ hàng có chỉ mục được chỉ định. `numberOfRows` là số hàng cần xoá. `rowIndex` phải là một số có chỉ mục hàng hợp lệ. Xem thêm: removeRow
`setCell(rowIndex, columnIndex [, value [, formattedValue [, properties]]])`	Không có	Đặt giá trị, giá trị được định dạng và/hoặc thuộc tính cho một ô. `rowIndex` phải là một số lớn hơn hoặc bằng 0 và nhỏ hơn số hàng mà phương thức `getNumberOfRows()` trả về. `columnIndex` phải là một số lớn hơn hoặc bằng 0 và nhỏ hơn số cột do phương thức `getNumberOfColumns()` trả về. `value` [Không bắt buộc] là giá trị được gán cho ô được chỉ định. Để tránh ghi đè giá trị này, hãy đặt tham số này thành `undefined`; để xoá giá trị này, hãy đặt thành `null`. Loại giá trị phụ thuộc vào loại cột (xem getColumnType()): Nếu loại cột là "chuỗi", thì giá trị phải là một chuỗi. Nếu loại cột là "số", thì giá trị phải là một số. Nếu loại cột là "boolean", thì giá trị phải là giá trị boolean. Nếu loại cột là "ngày" hoặc "ngày giờ", giá trị phải là đối tượng Ngày. Nếu loại cột là "timeofday" (thời gian trong ngày), thì giá trị phải là một mảng gồm 4 số: [giờ, phút, giây, mili giây]. `formattedValue` [Không bắt buộc] là một chuỗi có giá trị được định dạng dưới dạng chuỗi. Để tránh ghi đè giá trị này, hãy đặt tham số này thành `undefined`; để xoá giá trị này và yêu cầu API áp dụng định dạng mặc định cho `value` nếu cần, hãy đặt giá trị này thành `null`; để đặt rõ ràng một giá trị được định dạng trống, hãy đặt giá trị này thành một chuỗi trống. Giá trị được định dạng thường được các hình ảnh trực quan dùng để hiển thị các nhãn giá trị. Ví dụ: giá trị được định dạng có thể xuất hiện dưới dạng văn bản nhãn trong biểu đồ hình tròn. `properties` [Không bắt buộc] là một `Object` (bản đồ tên/giá trị) có các thuộc tính bổ sung cho ô này. Để tránh ghi đè giá trị này, hãy đặt tham số này thành `undefined`; để xoá giá trị này, hãy đặt thành `null`. Một số hình ảnh trực quan hỗ trợ các thuộc tính hàng, cột hoặc ô để sửa đổi cách hiển thị hoặc hành vi của các hình ảnh đó. Hãy xem tài liệu về hình ảnh để biết những thuộc tính được hỗ trợ. Xem thêm: setValue(), setFormattedValue(), setProperty(), setProperties().
`setColumnLabel(columnIndex, label)`	Không có	Đặt nhãn cho một cột. `columnIndex` phải là một số lớn hơn hoặc bằng 0 và nhỏ hơn số cột do phương thức `getNumberOfColumns()` trả về. `label` là một chuỗi có nhãn để gán cho cột. Nhãn cột thường xuất hiện trong hình ảnh trực quan. Ví dụ: nhãn cột có thể hiển thị dưới dạng tiêu đề cột trong bảng hoặc nhãn chú thích trong biểu đồ hình tròn. Xem thêm: getColumnLabel
`setColumnProperty(columnIndex, name, value)`	Không có	Đặt một thuộc tính cột duy nhất. Một số hình ảnh trực quan hỗ trợ các thuộc tính hàng, cột hoặc ô để sửa đổi cách hiển thị hoặc hành vi của các hình ảnh đó. Hãy xem tài liệu về hình ảnh trực quan để biết những thuộc tính được hỗ trợ. `columnIndex` phải là một số lớn hơn hoặc bằng 0 và nhỏ hơn số cột do phương thức `getNumberOfColumns()` trả về. `name` là một chuỗi có tên thuộc tính. `value` là giá trị bất kỳ thuộc loại nào để gán cho thuộc tính được đặt tên được chỉ định của cột được chỉ định. Xem thêm:setColumnProperties getColumnProperty
`setColumnProperties(columnIndex, properties)`	Không có	Đặt nhiều thuộc tính cột. Một số hình ảnh trực quan hỗ trợ các thuộc tính hàng, cột hoặc ô để sửa đổi cách hiển thị hoặc hành vi của các hình ảnh đó. Hãy xem tài liệu về hình ảnh trực quan để biết những thuộc tính được hỗ trợ. `columnIndex` phải là một số lớn hơn hoặc bằng 0 và nhỏ hơn số cột do phương thức `getNumberOfColumns()` trả về. `properties` là một `Object` (bản đồ tên/giá trị) có các thuộc tính khác cho cột này. Nếu bạn chỉ định `null`, mọi thuộc tính bổ sung của cột đó sẽ bị xoá. Xem thêm: setColumnProperty getColumnProperty
`setFormattedValue(rowIndex, columnIndex, formattedValue)`	Không có	Đặt giá trị được định dạng cho một ô. `rowIndex` phải là một số lớn hơn hoặc bằng 0 và nhỏ hơn số hàng mà phương thức `getNumberOfRows()` trả về. `columnIndex` phải là một số lớn hơn hoặc bằng 0 và nhỏ hơn số cột do phương thức `getNumberOfColumns()` trả về. `formattedValue` là một chuỗi có giá trị được định dạng để hiển thị. Để xoá giá trị này và yêu cầu API áp dụng định dạng mặc định cho giá trị ô nếu cần, hãy đặt giá trị formattedValue `null`; để đặt rõ ràng một giá trị được định dạng trống, hãy đặt giá trị đó thành một chuỗi trống. Xem thêm: getFormattedValue
`setProperty(rowIndex, columnIndex, name, value)`	Không có	Đặt một thuộc tính ô. Một số hình ảnh trực quan hỗ trợ các thuộc tính hàng, cột hoặc ô để sửa đổi cách hiển thị hoặc hành vi của các hình ảnh đó. Hãy xem tài liệu về hình ảnh để biết những thuộc tính được hỗ trợ. `rowIndex` phải là một số lớn hơn hoặc bằng 0 và nhỏ hơn số hàng do phương thức `getNumberOfRows()` trả về. `columnIndex` phải là một số lớn hơn hoặc bằng 0 và nhỏ hơn số cột do phương thức `getNumberOfColumns()` trả về. `name` là một chuỗi có tên thuộc tính. `value` là giá trị bất kỳ thuộc loại nào để gán cho thuộc tính được đặt tên được chỉ định của ô được chỉ định. Xem thêm: setCell setProperties getProperty
`setProperties(rowIndex, columnIndex, properties)`	Không có	Đặt thuộc tính nhiều ô. Một số hình ảnh trực quan hỗ trợ các thuộc tính hàng, cột hoặc ô để sửa đổi cách hiển thị hoặc hành vi của các hình ảnh đó. Hãy xem tài liệu về hình ảnh trực quan để biết những thuộc tính được hỗ trợ. `rowIndex` phải là một số lớn hơn hoặc bằng 0 và nhỏ hơn số hàng mà phương thức `getNumberOfRows()` trả về. `columnIndex` phải là một số lớn hơn hoặc bằng 0 và nhỏ hơn số cột do phương thức `getNumberOfColumns()` trả về. `properties` là một `Object` (bản đồ tên/giá trị) có các thuộc tính khác cho ô này. Nếu bạn chỉ định `null`, mọi thuộc tính bổ sung của ô sẽ bị xoá. Xem thêm: setCell setProperty getProperty
`setRowProperty(rowIndex, name, value)`	Không có	Đặt một thuộc tính hàng. Một số hình ảnh trực quan hỗ trợ các thuộc tính hàng, cột hoặc ô để sửa đổi cách hiển thị hoặc hành vi của các hình ảnh đó. Hãy xem tài liệu về hình ảnh để biết những thuộc tính được hỗ trợ. `rowIndex` phải là một số lớn hơn hoặc bằng 0 và nhỏ hơn số hàng do phương thức `getNumberOfRows()` trả về. `name` là một chuỗi có tên thuộc tính. `value` là giá trị thuộc bất kỳ loại nào để gán cho thuộc tính được đặt tên được chỉ định của hàng được chỉ định. Xem thêm: setRowProperties getRowProperty
`setRowProperties(rowIndex, properties)`	Không có	Đặt nhiều thuộc tính hàng. Một số hình ảnh trực quan hỗ trợ các thuộc tính hàng, cột hoặc ô để sửa đổi cách hiển thị hoặc hành vi của các hình ảnh đó. Hãy xem tài liệu về hình ảnh để biết những thuộc tính được hỗ trợ. `rowIndex` phải là một số lớn hơn hoặc bằng 0 và nhỏ hơn số hàng do phương thức `getNumberOfRows()` trả về. `properties` là một `Object` (bản đồ tên/giá trị) có các thuộc tính khác cho hàng này. Nếu bạn chỉ định `null`, mọi thuộc tính bổ sung của hàng đó sẽ bị xoá. Xem thêm: setRowProperty getRowProperty
`setTableProperty(name, value)`	Không có	Đặt một thuộc tính bảng duy nhất. Một số hình ảnh trực quan hỗ trợ các thuộc tính bảng, hàng, cột hoặc ô để sửa đổi cách hiển thị hoặc hành vi của các hình ảnh đó. Hãy xem tài liệu về hình ảnh để biết thuộc tính nào được hỗ trợ. `name` là một chuỗi có tên thuộc tính. `value` là giá trị bất kỳ thuộc loại nào để gán cho thuộc tính đã đặt tên được chỉ định của bảng. Xem thêm: setTableProperties getTableProperty
`setTableProperties(properties)`	Không có	Thiết lập nhiều thuộc tính bảng. Một số hình ảnh trực quan hỗ trợ các thuộc tính bảng, hàng, cột hoặc ô để sửa đổi cách hiển thị hoặc hành vi của các hình ảnh đó. Hãy xem tài liệu về hình ảnh để biết thuộc tính nào được hỗ trợ. `properties` là một `Object` (bản đồ tên/giá trị) có các thuộc tính khác cho bảng. Nếu bạn chỉ định `null`, mọi thuộc tính bổ sung của bảng sẽ bị xoá. Xem thêm: setTableProperty getTableProperty
`setValue(rowIndex, columnIndex, value)`	Không có	Đặt giá trị cho một ô. Ngoài việc ghi đè mọi giá trị ô hiện có, phương thức này cũng sẽ xoá mọi giá trị và thuộc tính đã định dạng của ô đó. `rowIndex` phải là một số lớn hơn hoặc bằng 0 và nhỏ hơn số hàng mà phương thức `getNumberOfRows()` trả về. `columnIndex` phải là một số lớn hơn hoặc bằng 0 và nhỏ hơn số cột do phương thức `getNumberOfColumns()` trả về. Phương thức này không cho phép bạn đặt một giá trị được định dạng cho ô này. Để thực hiện việc đó, hãy gọi `setFormattedValue()`. `value` là giá trị được gán cho ô được chỉ định. Loại giá trị được trả về tuỳ thuộc vào loại cột (xem getColumnType): Nếu loại cột là "chuỗi", thì giá trị phải là một chuỗi. Nếu loại cột là "số", thì giá trị phải là một số. Nếu loại cột là "boolean", thì giá trị phải là giá trị boolean. Nếu loại cột là "ngày" hoặc "ngày giờ", giá trị phải là đối tượng Ngày. Nếu loại cột là "timeofday" (thời gian trong ngày), thì giá trị phải là một mảng gồm 4 số: [giờ, phút, giây, mili giây]. Đối với mọi loại cột, bạn có thể đặt giá trị thành `null`. Xem thêm: setCell, setFormattedValue, setProperty, setProperties
`sort(sortColumns)`	Không có	Sắp xếp các hàng theo các cột sắp xếp được chỉ định. `DataTable` được sửa đổi bằng phương thức này. Hãy xem `getSortedRows()` để biết nội dung mô tả chi tiết cách sắp xếp. Phương thức này không trả về dữ liệu đã sắp xếp. Xem thêm: getSortedRows Ví dụ: Để sắp xếp theo cột thứ ba rồi đến cột thứ hai, hãy sử dụng: `data.sort([{column: 2}, {column: 1}]);`
`toJSON()`	Chuỗi	Trả về bản trình bày JSON của `DataTable` có thể được truyền vào hàm khởi tạo `DataTable`. Ví dụ: {"cols":[{"id":"Col1","label":"","type":"date"}], "rows":[ {"c":[{"v":"a"},{"v":"Date(2010,10,6)"}]}, {"c":[{"v":"b"},{"v":"Date(2010,10,7)"}]} ] }

Định dạng tham số dữ liệu JavaScript Literal của Hàm khởi tạo

Bạn có thể khởi chạy DataTable bằng cách truyền một đối tượng cố định dạng chuỗi JavaScript vào tham số data. Chúng ta sẽ gọi đối tượng này là đối tượng data. Bạn có thể viết mã cho đối tượng này theo cách thủ công theo nội dung mô tả bên dưới, hoặc bạn có thể dùng một thư viện Python của trình trợ giúp nếu bạn biết cách sử dụng Python và trang web của bạn có thể sử dụng nó. Tuy nhiên, nếu bạn muốn tạo đối tượng theo cách thủ công, phần này sẽ mô tả cú pháp.

Trước tiên, hãy xem ví dụ về một đối tượng JavaScript đơn giản mô tả một bảng có 3 hàng và 3 cột (loại Chuỗi, Số và Ngày):

{
  cols: [{id: 'A', label: 'NEW A', type: 'string'},
         {id: 'B', label: 'B-label', type: 'number'},
         {id: 'C', label: 'C-label', type: 'date'}
  ],
  rows: [{c:[{v: 'a'},
             {v: 1.0, f: 'One'},
             {v: new Date(2008, 1, 28, 0, 31, 26), f: '2/28/08 12:31 AM'}
        ]},
         {c:[{v: 'b'},
             {v: 2.0, f: 'Two'},
             {v: new Date(2008, 2, 30, 0, 31, 26), f: '3/30/08 12:31 AM'}
        ]},
         {c:[{v: 'c'},
             {v: 3.0, f: 'Three'},
             {v: new Date(2008, 3, 30, 0, 31, 26), f: '4/30/08 12:31 AM'}
        ]}
  ],
  p: {foo: 'hello', bar: 'world!'}
}

Giờ hãy mô tả cú pháp:

Đối tượng data bao gồm 2 thuộc tính cấp cao nhất bắt buộc là cols và rows, và một thuộc tính p không bắt buộc là bản đồ của các giá trị tuỳ ý.

Lưu ý: Tất cả tên thuộc tính và hằng số chuỗi hiển thị đều phân biệt chữ hoa chữ thường. Ngoài ra, các thuộc tính được mô tả là nhận giá trị chuỗi phải nằm trong dấu ngoặc kép. Ví dụ: nếu bạn muốn chỉ định thuộc tính loại là số, thuộc tính sẽ được biểu thị như sau: type: 'number' nhưng bản thân giá trị, dưới dạng số, sẽ được biểu thị như sau: v: 42

Tài sản cols

cols là một mảng các đối tượng mô tả mã nhận dạng và loại của mỗi cột. Mỗi thuộc tính là một đối tượng có các thuộc tính sau (phân biệt chữ hoa chữ thường):

type [Bắt buộc] Loại dữ liệu của dữ liệu trong cột. Hỗ trợ các giá trị chuỗi sau đây (ví dụ như thuộc tính v: được mô tả ở phần sau):
- 'boolean' – Giá trị boolean JavaScript ('true' hoặc 'false'). Giá trị mẫu: v:'true'
- 'number' - Giá trị số JavaScript. Giá trị mẫu: v:7 , v:3.14, v:-55
- "string" – Giá trị chuỗi JavaScript. Giá trị mẫu: v:'hello'
- "date" – Đối tượng Ngày trong JavaScript (tháng dựa trên giá trị 0), với thời gian được cắt bớt. Giá trị mẫu: v:new Date(2008, 0, 15)
- "ngày giờ" – Đối tượng ngày trong JavaScript bao gồm cả thời gian. Giá trị mẫu: v:new Date(2008, 0, 15, 14, 30, 45)
- "timeofday" – Mảng gồm 3 số và một số thứ tư không bắt buộc, đại diện cho giờ (0 biểu thị nửa đêm), phút, giây và mili giây (không bắt buộc). Giá trị mẫu: v:[8, 15, 0], v: [6, 12, 1, 144]
id [Không bắt buộc] Mã chuỗi của cột. Phải là duy nhất trong bảng. Sử dụng các ký tự bao gồm chữ và số cơ bản để trang lưu trữ không yêu cầu các ký tự thoát khác để truy cập vào cột trong JavaScript. Hãy cẩn thận không chọn từ khoá JavaScript. Ví dụ: id:'col_1'
label [Không bắt buộc] Giá trị chuỗi mà một số hình ảnh trực quan hiển thị cho cột này. Ví dụ: label:'Height'
pattern [Không bắt buộc] Mẫu chuỗi mà nguồn dữ liệu sử dụng để định dạng các giá trị cột số, ngày hoặc giờ. Thông tin này chỉ để tham khảo; bạn có thể không cần đọc mẫu và không bắt buộc phải có mẫu này. Ứng dụng Google Trực quan hoá không dùng giá trị này (ứng dụng này sẽ đọc giá trị được định dạng của ô). Nếu DataTable xuất phát từ một nguồn dữ liệu để phản hồi một truy vấn có mệnh đề format, thì mẫu mà bạn chỉ định trong mệnh đề đó có thể sẽ được trả về trong giá trị này. Các tiêu chuẩn mẫu được đề xuất là ICU DecimalFormat và SimpleDateFormat .
p [Không bắt buộc] Đối tượng là bản đồ của các giá trị tuỳ chỉnh được áp dụng cho ô. Các giá trị này có thể thuộc bất kỳ loại JavaScript nào. Nếu hình ảnh của bạn hỗ trợ bất kỳ thuộc tính cấp ô nào, hình ảnh sẽ mô tả các thuộc tính đó; nếu không, thuộc tính này sẽ bị bỏ qua. Ví dụ: p:{style: 'border: 1px solid green;'}.

Ví dụ về cols

cols: [{id: 'A', label: 'NEW A', type: 'string'},
       {id: 'B', label: 'B-label', type: 'number'},
       {id: 'C', label: 'C-label', type: 'date'}]

Tài sản rows

Thuộc tính rows lưu giữ một mảng các đối tượng hàng.

Mỗi đối tượng hàng có một thuộc tính bắt buộc tên là c. Đây là một mảng ô trong hàng đó. Lớp này cũng có một thuộc tính p không bắt buộc giúp xác định bản đồ các giá trị tuỳ chỉnh tuỳ ý để gán cho toàn bộ hàng. Nếu hình ảnh của bạn hỗ trợ bất kỳ thuộc tính cấp hàng nào, thì hình ảnh sẽ mô tả các thuộc tính đó; nếu không, thuộc tính này sẽ bị bỏ qua.

Đối tượng ô

Mỗi ô trong bảng được mô tả bằng một đối tượng có các thuộc tính sau:

v [Không bắt buộc] Giá trị của ô. Loại dữ liệu phải khớp với loại dữ liệu cột. Nếu ô rỗng, thuộc tính v sẽ có giá trị rỗng (mặc dù vẫn có thể chứa các thuộc tính f và p).
f [Không bắt buộc] Phiên bản chuỗi của giá trị v, được định dạng để hiển thị. Thông thường, các giá trị sẽ khớp nhau mặc dù không cần thiết. Vì vậy, nếu chỉ định Date(2008, 0, 1) cho v, bạn nên chỉ định "Ngày 1 tháng 1 năm 2008" hoặc một số chuỗi tương tự cho thuộc tính này. Giá trị này không được đối chiếu với giá trị v. Hình ảnh trực quan sẽ không sử dụng giá trị này để tính toán mà chỉ dùng làm nhãn để hiển thị. Nếu bạn bỏ qua thì phiên bản chuỗi của v sẽ tự động được tạo bằng trình định dạng mặc định. Bạn có thể sửa đổi các giá trị f bằng trình định dạng của riêng mình, đặt các giá trị này bằng setFormattedValue() hay setCell() hoặc truy xuất bằng getFormattedValue().
p [Không bắt buộc] Đối tượng là bản đồ của các giá trị tuỳ chỉnh được áp dụng cho ô. Các giá trị này có thể thuộc bất kỳ loại JavaScript nào. Nếu hình ảnh của bạn hỗ trợ bất kỳ thuộc tính cấp ô nào, thì hình ảnh sẽ mô tả các thuộc tính đó. Bạn có thể truy xuất các thuộc tính này bằng phương thức getProperty() và getProperties(). Ví dụ: p:{style: 'border: 1px solid green;'}.

Các ô trong mảng hàng phải theo đúng thứ tự như phần mô tả cột trong cols. Để chỉ định một ô rỗng, bạn có thể chỉ định null, để trống một ô trong mảng hoặc bỏ qua các thành phần của mảng theo sau. Vì vậy, để chỉ định một hàng có giá trị rỗng cho hai ô đầu tiên, bạn có thể chỉ định [ , , {cell_val}] hoặc [null, null, {cell_val}].

Dưới đây là một đối tượng bảng mẫu có 3 cột và chứa 3 hàng dữ liệu:

{
  cols: [{id: 'A', label: 'NEW A', type: 'string'},
         {id: 'B', label: 'B-label', type: 'number'},
         {id: 'C', label: 'C-label', type: 'date'}
  ],
  rows: [{c:[{v: 'a'},
             {v: 1.0, f: 'One'},
             {v: new Date(2008, 1, 28, 0, 31, 26), f: '2/28/08 12:31 AM'}
        ]},
         {c:[{v: 'b'},
             {v: 2.0, f: 'Two'},
             {v: new Date(2008, 2, 30, 0, 31, 26), f: '3/30/08 12:31 AM'}
        ]},
         {c:[{v: 'c'},
             {v: 3.0, f: 'Three'},
             {v: new Date(2008, 3, 30, 0, 31, 26), f: '4/30/08 12:31 AM'}
        ]}
  ]
}

Tài sản

Thuộc tính p cấp bảng là bản đồ các giá trị tuỳ chỉnh được áp dụng cho toàn bộ DataTable. Các giá trị này có thể thuộc bất kỳ loại JavaScript nào. Nếu hình ảnh của bạn hỗ trợ mọi thuộc tính ở cấp bảng dữ liệu, hình ảnh sẽ mô tả các thuộc tính đó; nếu không, thuộc tính này sẽ được cung cấp để dùng trong ứng dụng. Ví dụ: p:{className: 'myDataTable'}.

Lớp DataView

Chế độ xem chỉ có thể đọc của DataTable cơ bản. DataView chỉ cho phép chọn một nhóm nhỏ các cột và/hoặc hàng. Công cụ này cũng cho phép sắp xếp lại các cột/hàng và sao chép các cột/hàng.

Khung hiển thị là một cửa sổ trực tiếp trên DataTable cơ bản, không phải là ảnh chụp nhanh tĩnh của dữ liệu. Tuy nhiên, bạn vẫn phải cẩn thận khi thay đổi cấu trúc của bảng, như mô tả dưới đây:

Việc thêm hoặc xoá cột khỏi bảng cơ bản sẽ không được chế độ xem phản ánh và có thể gây ra hành vi không mong muốn trong chế độ xem; bạn sẽ phải tạo một DataView mới từ DataTable để nhận những thay đổi này.
Việc thêm hoặc xoá hàng khỏi bảng cơ bản là an toàn và các thay đổi sẽ được áp dụng cho chế độ xem ngay lập tức (nhưng bạn phải gọi draw() trên mọi hình ảnh sau thay đổi này để nhóm hàng mới hiển thị). Xin lưu ý rằng nếu khung hiển thị của bạn đã lọc ra các hàng bằng cách gọi một trong các phương thức setRows() or hideRows(), đồng thời bạn thêm hoặc xoá các hàng khỏi bảng cơ bản, thì hành vi này là không mong muốn; bạn phải tạo một DataView mới để phản ánh bảng mới.
Việc thay đổi giá trị ô trong các ô hiện có là an toàn và các thay đổi sẽ được truyền ngay lập tức đến DataView (nhưng bạn phải gọi draw() trên mọi hình ảnh trực quan sau thay đổi này để các giá trị mới được hiển thị trong ô).

Bạn cũng có thể tạo DataView từ một DataView khác. Xin lưu ý rằng mỗi khi đề cập đến một bảng hoặc chế độ xem cơ sở, thì thuộc tính đó sẽ đề cập đến cấp ngay bên dưới cấp này. Nói cách khác, thuộc tính này đề cập đến đối tượng dữ liệu dùng để tạo DataView này.

DataView cũng hỗ trợ các cột đã tính toán; đây là những cột có giá trị được tính toán nhanh chóng bằng hàm bạn cung cấp. Ví dụ: bạn có thể thêm một cột là tổng của hai cột trước đó hoặc một cột tính toán và hiển thị quý của một ngày trên lịch khác. Hãy xem setColumns() để biết thêm chi tiết.

Khi bạn sửa đổi một DataView bằng cách ẩn hoặc hiện các hàng hoặc cột, hình ảnh sẽ không bị ảnh hưởng cho đến khi bạn gọi lại draw() trên hình ảnh trực quan.

Bạn có thể kết hợp DataView.getFilteredRows() với DataView.setRows() để tạo DataView với một tập hợp con dữ liệu thú vị, như minh hoạ dưới đây:

var data = new google.visualization.DataTable();
data.addColumn('string', 'Employee Name');
data.addColumn('date', 'Start Date');
data.addRows(6);
data.setCell(0, 0, 'Mike');
data.setCell(0, 1, new Date(2008, 1, 28));
data.setCell(1, 0, 'Bob');
data.setCell(1, 1, new Date(2007, 5, 1));
data.setCell(2, 0, 'Alice');
data.setCell(2, 1, new Date(2006, 7, 16));
data.setCell(3, 0, 'Frank');
data.setCell(3, 1, new Date(2007, 11, 28));
data.setCell(4, 0, 'Floyd');
data.setCell(4, 1, new Date(2005, 3, 13));
data.setCell(5, 0, 'Fritz');
data.setCell(5, 1, new Date(2007, 9, 2));

// Create a view that shows everyone hired since 2007.
var view = new google.visualization.DataView(data);
view.setRows(view.getFilteredRows([{column: 1, minValue: new Date(2007, 0, 1)}]));
var table = new google.visualization.Table(document.getElementById('test_dataview'));
table.draw(view, {sortColumn: 1});

Hàm khởi tạo

Có 2 cách để tạo một thực thể DataView mới:

Hàm khởi tạo 1

var myView = new google.visualization.DataView(data)

data: DataTable hoặc DataView dùng để khởi tạo khung hiển thị. Theo mặc định, khung hiển thị này sẽ chứa tất cả các cột và hàng trong bảng hoặc chế độ xem dữ liệu cơ bản theo thứ tự ban đầu. Để ẩn hoặc hiện các hàng hoặc cột trong khung hiển thị này, hãy gọi các phương thức set...() hoặc hide...() thích hợp.

Xem thêm:

setColumns(), hideColumns(), setRows(), hideRows().

Hàm khởi tạo 2

Hàm khởi tạo này tạo một DataView mới bằng cách gán DataView được chuyển đổi tuần tự cho DataTable. Thao tác này giúp bạn tạo lại DataView mà bạn đã chuyển đổi tuần tự bằng DataView.toJSON().

var myView = google.visualization.DataView.fromJSON(data, viewAsJson)

dữ liệu: Đối tượng DataTable mà bạn đã dùng để tạo DataView trên đó bạn đã gọi DataView.toJSON(). Nếu bảng này khác với bảng gốc, bạn sẽ nhận được kết quả ngoài dự đoán.
viewAsJson: Chuỗi JSON do DataView.toJSON() trả về. Đây là nội dung mô tả về những hàng sẽ hiển thị hoặc ẩn khỏi Bảng dữ liệu dữ liệu.

Phương thức

Phương thức	Giá trị trả về	Nội dung mô tả
`getColumnId` `getColumnLabel` `getColumnPattern` `getColumnProperty` `getColumnRange` `getColumnType` `getDistinctValues` `getFilteredRows` `getFormattedValue` `getNumberOfColumns` `getNumberOfRows` `getProperty` `getProperties` `getRowProperty` `getSortedRows` `getTableProperty` `getValue`	Xem nội dung mô tả bằng `DataTable`.	Giống như các phương thức `DataTable` tương đương, ngoại trừ việc chỉ mục hàng/cột tham chiếu đến chỉ mục trong khung hiển thị chứ không phải trong bảng/chế độ xem cơ bản.
`getTableColumnIndex(viewColumnIndex)`	Số	Trả về chỉ mục trong bảng (hoặc chế độ xem) cơ bản của một cột nhất định do chỉ mục của cột đó chỉ định trong chế độ xem này. `viewColumnIndex` phải là một số lớn hơn hoặc bằng 0 và nhỏ hơn số cột do phương thức `getNumberOfColumns()` trả về. Trả về -1 nếu đây là cột đã tạo. Ví dụ: Nếu `setColumns([3, 1, 4])` đã được gọi trước đó, thì `getTableColumnIndex(2)` sẽ trả về `4`.
`getTableRowIndex(viewRowIndex)`	Số	Trả về chỉ mục trong bảng (hoặc chế độ xem) cơ bản của một hàng nhất định do chỉ mục của chỉ mục đó chỉ định trong khung hiển thị này. `viewRowIndex` phải là một số lớn hơn hoặc bằng 0 và nhỏ hơn số hàng mà phương thức `getNumberOfRows()` trả về. Ví dụ: Nếu `setRows([3, 1, 4])` đã được gọi trước đó, thì `getTableRowIndex(2)` sẽ trả về `4`.
`getViewColumnIndex(tableColumnIndex)`	Số	Trả về chỉ mục trong thành phần hiển thị này (liên kết với một cột nhất định) do chỉ mục của chỉ mục đó trong bảng (hoặc chế độ xem) cơ bản chỉ định. Nếu có nhiều chỉ mục như vậy, sẽ trả về chỉ mục đầu tiên (nhỏ nhất). Nếu không có chỉ mục như vậy (cột được chỉ định không có trong chế độ xem), hãy trả về -1. `tableColumnIndex` phải là một số lớn hơn hoặc bằng 0 và nhỏ hơn số cột do phương thức `getNumberOfColumns()` của bảng/chế độ xem cơ bản trả về. Ví dụ: Nếu `setColumns([3, 1, 4])` đã được gọi trước đó, thì `getViewColumnIndex(4)` sẽ trả về `2`.
`getViewColumns()`	Mảng số	Trả về các cột trong thành phần hiển thị này theo thứ tự. Nghĩa là, nếu gọi `setColumns` bằng một số mảng rồi gọi `getViewColumns()`, bạn sẽ nhận được một mảng giống hệt.
`getViewRowIndex(tableRowIndex)`	Số	Trả về chỉ mục trong thành phần hiển thị này (liên kết với một hàng nhất định) do chỉ mục của chỉ mục đó chỉ định trong bảng (hoặc chế độ xem) cơ bản. Nếu có nhiều chỉ mục như vậy, sẽ trả về chỉ mục đầu tiên (nhỏ nhất). Nếu không có chỉ mục như vậy (hàng được chỉ định không có trong chế độ xem), trả về -1. `tableRowIndex` phải là một số lớn hơn hoặc bằng 0 và nhỏ hơn số hàng mà phương thức `getNumberOfRows()` của bảng/chế độ xem cơ bản trả về. Ví dụ: Nếu `setRows([3, 1, 4])` đã được gọi trước đó, thì `getViewRowIndex(4)` sẽ trả về `2`.
`getViewRows()`	Mảng số	Trả về các hàng trong thành phần hiển thị này theo thứ tự. Nghĩa là, nếu gọi `setRows` bằng một mảng nào đó rồi gọi `getViewRows()`, bạn sẽ nhận được một mảng giống hệt.
`hideColumns(columnIndexes)`	không có	Ẩn các cột được chỉ định khỏi chế độ xem hiện tại. `columnIndexes` là một mảng các số đại diện cho chỉ mục của các cột cần ẩn. Các chỉ mục này là số chỉ mục trong bảng/chế độ xem cơ sở. Các số trong `columnIndexes` không nhất thiết phải theo thứ tự (nghĩa là [3,4,1] cũng không có vấn đề gì). Các cột còn lại giữ nguyên thứ tự chỉ mục khi bạn lặp lại các cột đó. Việc nhập số chỉ mục cho một cột đã ẩn không phải là lỗi, nhưng việc nhập một chỉ mục không tồn tại trong bảng/chế độ xem cơ bản sẽ tạo ra lỗi. Để hiện cột, hãy gọi `setColumns()`. Ví dụ: Nếu bạn có một bảng có 10 cột, bạn gọi `setColumns([2,7,1,7,9])` rồi đến `hideColumns([7,9])`, thì các cột trong chế độ xem khi đó sẽ là [2,1].
`hideRows(min, max)`	Không có	Ẩn tất cả các hàng có chỉ mục nằm trong khoảng từ tối thiểu đến tối đa (bao gồm) khỏi chế độ xem hiện tại. Đây là cú pháp thuận tiện cho `hideRows(rowIndexes)` ở trên. Ví dụ: `hideRows(5, 10)` tương đương với `hideRows([5, 6, 7, 8, 9, 10])`.
`hideRows(rowIndexes)`	Không có	Ẩn các hàng được chỉ định khỏi chế độ xem hiện tại. `rowIndexes` là một mảng các số đại diện cho chỉ mục của các hàng cần ẩn. Những chỉ mục này là số chỉ mục trong bảng/chế độ xem cơ sở. Các số trong `rowIndexes` không nhất thiết phải theo thứ tự (nghĩa là [3,4,1] cũng không có vấn đề gì). Các hàng còn lại giữ nguyên thứ tự chỉ mục của chúng. Việc nhập số chỉ mục cho một hàng đã ẩn không phải là lỗi, nhưng việc nhập một chỉ mục không tồn tại trong bảng/chế độ xem cơ bản sẽ gây ra lỗi. Để hiện hàng, hãy gọi `setRows()`. Ví dụ: Nếu bạn có một bảng có 10 hàng, gọi `setRows([2,7,1,7,9])`, sau đó gọi `hideRows([7,9])`, thì các hàng trong khung hiển thị khi đó sẽ là [2,1].
`setColumns(columnIndexes)`	Không có	Chỉ định cột nào sẽ hiển thị trong chế độ xem này. Mọi cột không được chỉ định sẽ bị ẩn. Đây là một mảng gồm các chỉ mục cột trong bảng/chế độ xem cơ bản hoặc các cột đã tính toán. Nếu bạn không gọi phương thức này, giá trị mặc định sẽ hiển thị tất cả các cột. Mảng này cũng có thể chứa các bản sao để cho thấy cùng một cột nhiều lần. Các cột sẽ xuất hiện theo thứ tự đã chỉ định. `columnIndexes` – Một mảng số và/hoặc đối tượng (có thể kết hợp): Số chỉ định chỉ mục của cột dữ liệu nguồn cần đưa vào khung hiển thị. Dữ liệu được cung cấp dưới dạng chưa sửa đổi. Nếu bạn cần xác định rõ vai trò hoặc các thuộc tính cột khác, hãy chỉ định một đối tượng bằng thuộc tính `sourceColumn`. Đối tượng sẽ chỉ định một cột đã tính. Một cột đã tính toán sẽ nhanh chóng tạo ra một giá trị cho mỗi hàng và thêm giá trị đó vào chế độ xem. Đối tượng phải có các thuộc tính sau: `calc` [hàm] – Một hàm sẽ được gọi cho mỗi hàng trong cột để tính giá trị cho ô đó. Chữ ký hàm là `func(dataTable, row)`, trong đó `dataTable` là nguồn `DataTable` và `row` là chỉ mục của hàng dữ liệu nguồn. Hàm phải trả về một giá trị duy nhất thuộc loại do `type` chỉ định. `type` [string] – Loại JavaScript của giá trị mà hàm calc trả về. `label` [Không bắt buộc, chuỗi] – Một nhãn không bắt buộc để gán cho cột đã tạo này. Nếu không được chỉ định, cột chế độ xem sẽ không có nhãn. `id` [Không bắt buộc, chuỗi] – Mã nhận dạng không bắt buộc để chỉ định cho cột đã tạo này. `sourceColumn` – [Không bắt buộc, number] Cột nguồn để sử dụng làm giá trị; nếu được chỉ định, không chỉ định thuộc tính `calc` hoặc `type`. Điều này tương tự như việc truyền một số thay vì một đối tượng, nhưng cho phép bạn chỉ định vai trò và thuộc tính cho cột mới. `properties` [Không bắt buộc, đối tượng] – Một đối tượng chứa mọi thuộc tính tuỳ ý để gán cho cột này. Nếu không được chỉ định, cột chế độ xem sẽ không có thuộc tính nào. `role` [Không bắt buộc, chuỗi] – Một vai trò cần chỉ định cho cột này. Nếu bạn không chỉ định, vai trò hiện tại sẽ không được nhập. Ví dụ: // Show some columns directly from the underlying data. // Shows column 3 twice. view.setColumns([3, 4, 3, 2]); // Underlying table has a column specifying a value in centimeters. // The view imports this directly, and creates a calculated column // that converts the value into inches. view.setColumns([1,{calc:cmToInches, type:'number', label:'Height in Inches'}]); function cmToInches(dataTable, rowNum){ return Math.floor(dataTable.getValue(rowNum, 1) / 2.54); }
`setRows(min, max)`	Không có	Đặt các hàng trong chế độ xem này thành tất cả chỉ mục (trong bảng/chế độ xem cơ bản) nằm trong khoảng từ tối thiểu đến tối đa (bao gồm). Bên dưới là cú pháp thuận tiện cho `setRows(rowIndexes)`. Ví dụ: `setRows(5, 10)` tương đương với `setRows([5, 6, 7, 8, 9, 10])`.
`setRows(rowIndexes)`	Không có	Đặt các hàng hiển thị trong chế độ xem này, dựa trên số chỉ mục của bảng/chế độ xem cơ bản. `rowIndexes` phải là một mảng số chỉ mục chỉ định những hàng nào sẽ hiện trong thành phần hiển thị. Mảng sẽ chỉ định thứ tự hiển thị các hàng và các hàng có thể bị trùng lặp. Xin lưu ý rằng chỉ những hàng được chỉ định trong `rowIndexes` mới xuất hiện; phương thức này sẽ xoá mọi hàng khác khỏi khung hiển thị. Mảng này cũng có thể chứa các bản sao, trùng lặp hiệu quả với hàng được chỉ định trong thành phần hiển thị này (ví dụ: `setRows([3, 4, 3, 2])` sẽ khiến hàng `3` xuất hiện 2 lần trong thành phần hiển thị này). Do đó, mảng này sẽ liên kết các hàng từ bảng/chế độ xem cơ bản đến chế độ xem này. Bạn có thể sử dụng `getFilteredRows()` hoặc `getSortedRows()` để tạo dữ liệu đầu vào cho phương thức này. Ví dụ: Cách tạo chế độ xem có hàng 3 và 0 của bảng/chế độ xem cơ bản: `view.setRows([3, 0])`
`toDataTable()`	DataTable	Trả về một đối tượng `DataTable` được điền sẵn các hàng và cột hiển thị của `DataView`.
`toJSON()`	string	Trả về một chuỗi đại diện của `DataView` này. Chuỗi này không chứa dữ liệu thực tế mà chỉ chứa các chế độ cài đặt dành riêng cho `DataView`, chẳng hạn như các hàng và cột hiển thị. Bạn có thể lưu trữ chuỗi này và truyền chuỗi đến hàm khởi tạo tĩnh `DataView.fromJSON()` để tạo lại khung hiển thị này. Số liệu này sẽ không bao gồm các cột đã tạo.

Lớp học Biểu đồ

Lớp ChartWrapper được dùng để gói biểu đồ và xử lý tất cả hoạt động tải, vẽ và truy vấn Nguồn dữ liệu cho biểu đồ. Lớp này sẽ cung cấp các phương thức thuận tiện để đặt giá trị trên biểu đồ và vẽ biểu đồ đó. Lớp này giúp đơn giản hoá việc đọc từ một nguồn dữ liệu vì bạn không phải tạo trình xử lý gọi lại truy vấn. Bạn cũng có thể sử dụng tiện ích này để dễ dàng lưu biểu đồ và tái sử dụng.

Một lợi ích khác khi sử dụng ChartWrapper là bạn có thể giảm số lượt tải thư viện bằng cách dùng tính năng tải động. Ngoài ra, bạn không cần tải các gói một cách rõ ràng vì ChartWrapper sẽ xử lý việc tra cứu và tải các gói biểu đồ cho bạn. Hãy xem các ví dụ bên dưới để biết thông tin chi tiết.

Tuy nhiên, ChartWrapper hiện chỉ truyền một tập hợp con các sự kiện do biểu đồ gửi: chọn, sẵn sàng và lỗi. Các sự kiện khác không được truyền qua thực thể ChartWrapper. Để nhận các sự kiện khác, bạn phải gọi getChart() và đăng ký các sự kiện trực tiếp trên ô điều khiển biểu đồ, như minh hoạ dưới đây:

var wrapper;
function drawVisualization() {

  // Draw a column chart
  wrapper = new google.visualization.ChartWrapper({
    chartType: 'ColumnChart',
    dataTable: [['Germany', 'USA', 'Brazil', 'Canada', 'France', 'RU'],
                [700, 300, 400, 500, 600, 800]],
    options: {'title': 'Countries'},
    containerId: 'visualization'
  });

  // Never called.
  google.visualization.events.addListener(wrapper, 'onmouseover', uselessHandler);

  // Must wait for the ready event in order to
  // request the chart and subscribe to 'onmouseover'.
  google.visualization.events.addListener(wrapper, 'ready', onReady);

  wrapper.draw();

  // Never called
  function uselessHandler() {
    alert("I am never called!");
  }

  function onReady() {
    google.visualization.events.addListener(wrapper.getChart(), 'onmouseover', usefulHandler);
  }

  // Called
  function usefulHandler() {
    alert("Mouseover event!");
  }
}

Hàm dựng

ChartWrapper(opt_spec)

opt_spec: [Không bắt buộc] – Một đối tượng JSON xác định biểu đồ hoặc phiên bản chuỗi được chuyển đổi tuần tự của đối tượng đó. Định dạng của đối tượng này được thể hiện trong tài liệu vềdrawChart(). Nếu không được chỉ định, bạn phải đặt tất cả các thuộc tính thích hợp bằng cách sử dụng các phương thức set... mà đối tượng này hiển thị.

Phương thức

ChartWrapper cung cấp các phương thức bổ sung sau đây:

Phương thức	Loại dữ liệu trả về	Nội dung mô tả
`draw(opt_container_ref)`	Không có	Vẽ biểu đồ. Bạn phải gọi phương thức này sau mọi thay đổi mà bạn thực hiện đối với biểu đồ hoặc dữ liệu để cho thấy các thay đổi đó. opt_container_ref [Không bắt buộc] – Tham chiếu đến phần tử vùng chứa hợp lệ trên trang. Nếu được chỉ định, biểu đồ sẽ được vẽ tại đó. Nếu không, biểu đồ sẽ được vẽ trong phần tử có mã nhận dạng được chỉ định bằng containerId.
`toJSON()`	Chuỗi	Trả về phiên bản chuỗi của biểu đồ JSON.
`clone()`	ChartWrapper	Trả về một bản sao sâu của trình bao bọc biểu đồ.
`getDataSourceUrl()`	Chuỗi	Nếu biểu đồ này lấy dữ liệu từ một nguồn dữ liệu, sẽ trả về URL cho nguồn dữ liệu này. Nếu không, hàm sẽ trả về giá trị rỗng.
`getDataTable()`	google.visualization.DataTable	Nếu biểu đồ này lấy dữ liệu từ một `DataTable` được xác định cục bộ, thì biểu đồ sẽ trả về một mã tham chiếu đến `DataTable` của biểu đồ. Nếu biểu đồ này nhận dữ liệu từ một nguồn dữ liệu, thì biểu đồ này sẽ trả về giá trị rỗng. Mọi thay đổi bạn thực hiện đối với đối tượng được trả về sẽ được biểu đồ phản ánh vào lần tiếp theo bạn gọi `ChartWrapper.draw()`.
`getChartType()`	Chuỗi	Tên lớp của biểu đồ gói. Nếu đây là biểu đồ của Google, tên này sẽ không đủ điều kiện để dùng với `google.visualization`. Vì vậy, ví dụ: nếu đây là biểu đồ dạng sơ đồ dạng cây, thì biểu đồ này sẽ trả về "Treemap" (Bản đồ dạng cây) thay vì "google.Visualization.treemap".
`getChartName()`	Chuỗi	Trả về tên biểu đồ do `setChartName()` chỉ định.
`getChart()`	Tham chiếu đối tượng trong biểu đồ	Trả về một tham chiếu đến biểu đồ do ChartWrapper này tạo, ví dụ: `google.visualization.BarChart` hoặc `google.visualization.ColumnChart`. Lệnh này sẽ trả về giá trị rỗng cho đến khi bạn gọi `draw()` trên đối tượng ChartWrapper và gửi một sự kiện sẵn sàng. Các phương thức được gọi trên đối tượng được trả về sẽ được phản ánh trên trang.
`getContainerId()`	Chuỗi	Mã nhận dạng của phần tử vùng chứa DOM trong biểu đồ.
`getQuery()`	Chuỗi	Chuỗi truy vấn cho biểu đồ này (nếu có) và truy vấn một nguồn dữ liệu.
`getRefreshInterval()`	Số	Mọi khoảng thời gian làm mới cho biểu đồ này nếu biểu đồ truy vấn một nguồn dữ liệu. Số không có nghĩa là không làm mới.
`getOption(key, opt_default_val)`	Mọi loại	Trả về giá trị tuỳ chọn biểu đồ được chỉ định key (khoá) – Tên của tuỳ chọn truy xuất. Có thể là một tên đủ điều kiện, chẳng hạn như `'vAxis.title'`. opt_default_value [Không bắt buộc] – Nếu giá trị được chỉ định là không xác định hoặc rỗng, thì giá trị này sẽ được trả về.
`getOptions()`	Đối tượng	Trả về đối tượng tuỳ chọn cho biểu đồ này.
`getView()`	Đối tượng HOẶC mảng	Trả về đối tượng khởi tạo `DataView`, có cùng định dạng với `dataview.toJSON()` hoặc một mảng gồm các đối tượng như vậy.
`setDataSourceUrl(url)`	Không có	Đặt URL của một nguồn dữ liệu để sử dụng cho biểu đồ này. Nếu bạn cũng thiết lập bảng dữ liệu cho đối tượng này, thì URL nguồn dữ liệu sẽ bị bỏ qua.
`setDataTable(table)`	Không có	Thiết lập DataTable cho biểu đồ. Truyền một trong các giá trị sau: rỗng; một đối tượng DataTable; một biểu diễn JSON của DataTable; hoặc một mảng theo cú pháp arrayToDataTable().
`setChartType(type)`	Không có	Đặt loại biểu đồ. Truyền vào tên lớp của biểu đồ gói. Nếu đây là biểu đồ của Google, thì bạn không thể đánh giá bằng `google.visualization`. Ví dụ: đối với biểu đồ hình tròn, hãy chuyển vào "PieChart".
`setChartName(name)`	Không có	Đặt tên tuỳ ý cho biểu đồ. Thông tin này sẽ không xuất hiện ở bất kỳ vị trí nào trên biểu đồ, trừ phi một biểu đồ tuỳ chỉnh được thiết kế rõ ràng để sử dụng biểu đồ đó.
`setContainerId(id)`	Không có	Đặt ID của phần tử DOM chứa biểu đồ.
`setQuery(query_string)`	Không có	Đặt một chuỗi truy vấn nếu biểu đồ này truy vấn một nguồn dữ liệu. Bạn cũng phải đặt URL nguồn dữ liệu nếu chỉ định giá trị này.
`setRefreshInterval(interval)`	Không có	Đặt khoảng thời gian làm mới cho biểu đồ này nếu biểu đồ truy vấn một nguồn dữ liệu. Bạn cũng phải đặt URL nguồn dữ liệu nếu chỉ định giá trị này. Số không có nghĩa là không làm mới.
`setOption(key, value)`	Không có	Đặt một giá trị cho tuỳ chọn biểu đồ duy nhất, trong đó key (khoá) là tên tuỳ chọn và value là giá trị. Để huỷ đặt một lựa chọn, hãy chuyển giá trị rỗng vào giá trị đó. Xin lưu ý rằng khoá có thể là một tên đủ điều kiện, chẳng hạn như `'vAxis.title'`.
`setOptions(options_obj)`	Không có	Đặt một đối tượng tuỳ chọn hoàn chỉnh cho biểu đồ.
`setView(view_spec)`	Không có	Đặt một đối tượng khởi chạy `DataView`, đóng vai trò là bộ lọc trên dữ liệu cơ bản. Trình bao bọc biểu đồ phải có dữ liệu cơ bản từ một DataTable hoặc nguồn dữ liệu để áp dụng khung hiển thị này. Bạn có thể truyền vào một chuỗi hoặc đối tượng khởi tạo `DataView`, chẳng hạn như đối tượng do `dataview.toJSON()` trả về. Bạn cũng có thể truyền một mảng gồm các đối tượng khởi tạo `DataView`, trong trường hợp đó, `DataView` đầu tiên trong mảng sẽ được áp dụng cho dữ liệu cơ bản để tạo bảng dữ liệu mới và `DataView` thứ hai được áp dụng cho bảng dữ liệu phát sinh từ việc áp dụng `DataView` đầu tiên, v.v.

Sự kiện

Đối tượng ChartWrapper sẽ gửi các sự kiện sau đây. Xin lưu ý rằng bạn phải gọi ChartWrapper.draw() trước khi gửi bất kỳ sự kiện nào.

Tên	Nội dung mô tả	Thuộc tính
`error`	Được kích hoạt khi xảy ra lỗi khi cố gắng hiển thị biểu đồ.	mã nhận dạng, tin nhắn
`ready`	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 `draw` và chỉ gọi các phương thức đó sau khi sự kiện được kích hoạt.	Không có
`select`	Được kích hoạt khi người dùng nhấp vào một thanh hoặc chú giải. Khi bạn chọn một phần tử biểu đồ, ô tương ứng trong bảng dữ liệu sẽ được chọn; khi bạn chọn một chú giải, cột tương ứng trong bảng dữ liệu sẽ được chọn. Để tìm hiểu những mục đã được chọn, hãy gọi `ChartWrapper.getChart().` `getSelection()`. Lưu ý rằng thuộc tính này sẽ chỉ được gửi khi loại biểu đồ cơ bản gửi một sự kiện lựa chọn.	Không có

Ví dụ:

Hai đoạn mã sau đây sẽ tạo một biểu đồ dạng đường tương đương. Ví dụ đầu tiên sử dụng ký hiệu giá trị cố định JSON để xác định biểu đồ; ví dụ thứ hai sử dụng phương thức ChartWrapper để đặt các giá trị này.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Visualization API Sample</title>
<!--
  One script tag loads all the required libraries!
-->
<script type="text/javascript"
      src='https://www.gstatic.com/charts/loader.js'></script>
<script>
  google.charts.load('current);
  google.charts.setOnLoadCallback(drawVisualization);

  function drawVisualization() {
    var wrap = new google.visualization.ChartWrapper({
       'chartType':'LineChart',
       'dataSourceUrl':'http://spreadsheets.google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1',
       'containerId':'visualization',
       'query':'SELECT A,D WHERE D > 100 ORDER BY D',
       'options': {'title':'Population Density (people/km^2)', 'legend':'none'}
       });
     wrap.draw();
  }
</script>
</head>
<body>
  <div id="visualization" style="height: 400px; width: 400px;"></div>
</body>
</html>

Cùng một biểu đồ, hiện đang sử dụng phương thức setter:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv='content-type' content='text/html; charset=utf-8'/>
<title>Google Visualization API Sample</title>
<!-- One script tag loads all the required libraries!
-->
<script type="text/javascript"
    src='https://www.gstatic.com/charts/loader.js'></script>
<script type="text/javascript">
  google.charts.load('current');
  google.charts.setOnLoadCallback(drawVisualization);
  function drawVisualization() {
    // Define the chart using setters:
    var wrap = new google.visualization.ChartWrapper();
    wrap.setChartType('LineChart');
    wrap.setDataSourceUrl('http://spreadsheets.google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1');
    wrap.setContainerId('visualization');
    wrap.setQuery('SELECT A,D WHERE D > 100 ORDER BY D');
    wrap.setOptions({'title':'Population Density (people/km^2)', 'legend':'none'});
    wrap.draw();
  }
</script>
</head>
<body>
  <div id='visualization' style='height: 400px; width: 400px;'></div>
</body>
</html>

Lớp ChartEditor

Lớp ChartEditor dùng để mở hộp thoại trong trang cho phép người dùng tuỳ chỉnh hình ảnh trực quan một cách nhanh chóng.

Cách sử dụng ChartEditor:

Tải gói charteditor. Trong google.charts.load(), hãy tải gói "charteditor". Bạn không cần tải các gói cho loại biểu đồ mà bạn kết xuất trong trình chỉnh sửa; trình chỉnh sửa biểu đồ sẽ tải bất kỳ gói nào cho bạn khi cần.
Tạo một đối tượng ChartWrapper xác định biểu đồ để người dùng tuỳ chỉnh. Biểu đồ này sẽ xuất hiện trong hộp thoại và người dùng sẽ sử dụng trình chỉnh sửa để thiết kế lại biểu đồ, thay đổi loại biểu đồ hoặc thậm chí là thay đổi dữ liệu nguồn.
Tạo một thực thể ChartEditor mới và đăng ký theo dõi sự kiện "ok". Sự kiện này được gửi khi người dùng nhấp vào nút "OK" trên hộp thoại. Khi nhận được, bạn phải gọi ChartEditor.getChartWrapper() để truy xuất biểu đồ do người dùng sửa đổi.
Gọi ChartEditor.openDialog(), truyền vào giá trị ChartWrapper. Thao tác này sẽ mở hộp thoại. Các nút hộp thoại cho phép người dùng đóng trình chỉnh sửa. Thực thể ChartEditor vẫn tồn tại miễn là nó nằm trong phạm vi. Thực thể này sẽ không tự động bị huỷ sau khi người dùng đóng hộp thoại.
Để cập nhật biểu đồ bằng mã, hãy gọi setChartWrapper().

Phương thức

Phương thức	Giá trị trả về	Nội dung mô tả
`openDialog(chartWrapper, opt_options)`	null	Mở trình chỉnh sửa biểu đồ dưới dạng một hộp thoại được nhúng trên trang. Hàm này trả về ngay lập tức; không đợi hộp thoại đóng. Nếu không mất phạm vi của thực thể, bạn có thể gọi lại `openDialog()` để mở lại hộp thoại, mặc dù bạn phải truyền lại đối tượng ChartWrapper. chartWrapper – Đối tượng `ChartWrapper` xác định biểu đồ ban đầu cần hiển thị trong cửa sổ. Biểu đồ phải có `DataTable` được điền sẵn hoặc được kết nối với một nguồn dữ liệu hợp lệ. Trình bao bọc này được sao chép nội bộ vào trình chỉnh sửa biểu đồ, vì vậy, mọi thay đổi sau này mà bạn thực hiện đối với tên người dùng ChartWrapper sẽ không được phản ánh trong bản sao của trình chỉnh sửa biểu đồ. opt_options – [Không bắt buộc] Một đối tượng chứa bất kỳ tuỳ chọn nào cho trình chỉnh sửa biểu đồ. Hãy xem bảng lựa chọn bên dưới.
`getChartWrapper()`	`ChartWrapper`	Trả về `ChartWrapper` đại diện cho biểu đồ, có các nội dung sửa đổi của người dùng.
`setChartWrapper(chartWrapper)`	null	Hãy sử dụng phương thức này để cập nhật biểu đồ đã kết xuất trên trình chỉnh sửa. chartWrapper – Đối tượng `ChartWrapper` đại diện cho biểu đồ mới để kết xuất. Biểu đồ phải có `DataTable` được điền sẵn hoặc được kết nối với một nguồn dữ liệu hợp lệ.
`closeDialog()`	null	Đóng hộp thoại trình chỉnh sửa biểu đồ.

Tùy chọn

Trình chỉnh sửa biểu đồ hỗ trợ các tuỳ chọn sau:

Tên Loại Mặc định Nội dung mô tả

Tên	Loại	Mặc định	Nội dung mô tả
`dataSourceInput`	Ô điều khiển phần tử hoặc "hộp url"	null	Sử dụng thuộc tính này để cho phép người dùng chỉ định nguồn dữ liệu cho biểu đồ. Thuộc tính này có thể là một trong hai giá trị: 'urlbox' – Hiển thị URL nguồn dữ liệu của biểu đồ trên hộp thoại trong hộp văn bản có thể chỉnh sửa. Người dùng có thể sửa đổi giá trị này và biểu đồ sẽ được vẽ lại dựa trên nguồn dữ liệu mới. Phần tử DOM – Cho phép bạn cung cấp một phần tử HTML tuỳ chỉnh dùng để chọn nguồn dữ liệu. Chuyển một ô điều khiển vào một phần tử HTML, có thể là phần tử được tạo trong mã hoặc được sao chép từ trang. Phần tử này sẽ xuất hiện trên hộp thoại. Hãy sử dụng thông tin này để cho phép người dùng chọn nguồn dữ liệu của biểu đồ. Ví dụ: tạo một hộp danh sách chứa một số URL nguồn dữ liệu hoặc tên thân thiện với người dùng để người dùng có thể chọn. Phần tử phải triển khai một trình xử lý lựa chọn và dùng trình xử lý đó để thay đổi nguồn dữ liệu của biểu đồ: chẳng hạn như thay đổi `DataTable` cơ bản hoặc sửa đổi trường `dataSourceUrl` của biểu đồ.

dataSourceInput

Ô điều khiển phần tử hoặc "hộp url"

null

Sử dụng thuộc tính này để cho phép người dùng chỉ định nguồn dữ liệu cho biểu đồ. Thuộc tính này có thể là một trong hai giá trị:

'urlbox' – Hiển thị URL nguồn dữ liệu của biểu đồ trên hộp thoại trong hộp văn bản có thể chỉnh sửa. Người dùng có thể sửa đổi giá trị này và biểu đồ sẽ được vẽ lại dựa trên nguồn dữ liệu mới.
Phần tử DOM – Cho phép bạn cung cấp một phần tử HTML tuỳ chỉnh dùng để chọn nguồn dữ liệu. Chuyển một ô điều khiển vào một phần tử HTML, có thể là phần tử được tạo trong mã hoặc được sao chép từ trang. Phần tử này sẽ xuất hiện trên hộp thoại. Hãy sử dụng thông tin này để cho phép người dùng chọn nguồn dữ liệu của biểu đồ. Ví dụ: tạo một hộp danh sách chứa một số URL nguồn dữ liệu hoặc tên thân thiện với người dùng để người dùng có thể chọn. Phần tử phải triển khai một trình xử lý lựa chọn và dùng trình xử lý đó để thay đổi nguồn dữ liệu của biểu đồ: chẳng hạn như thay đổi DataTable cơ bản hoặc sửa đổi trường dataSourceUrl của biểu đồ.

Sự kiện

Trình chỉnh sửa biểu đồ sẽ gửi các sự kiện sau:

Tên	Nội dung mô tả	Thuộc tính
`ok`	Được kích hoạt khi người dùng nhấp vào nút "OK" trên hộp thoại. Sau khi nhận được phương thức này, bạn nên gọi `getChartWrapper()` để truy xuất biểu đồ do người dùng định cấu hình.	không có
`cancel`	Được kích hoạt khi người dùng nhấp vào nút "Huỷ" trên hộp thoại.	không có

Ví dụ:

Mã ví dụ sau đây sẽ mở ra một hộp thoại trình chỉnh sửa biểu đồ với một biểu đồ dạng đường được điền sẵn. Nếu người dùng nhấp vào "OK", biểu đồ đã chỉnh sửa sẽ được lưu vào <div> được chỉ định trên trang.

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
  <title>
    Google Visualization API Sample
  </title>
  <script type="text/javascript"
    src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">
    google.charts.load('current', {packages: ['charteditor']});
  </script>
  <script type="text/javascript">
    google.charts.setOnLoadCallback(loadEditor);
    var chartEditor = null;

    function loadEditor() {
      // Create the chart to edit.
      var wrapper = new google.visualization.ChartWrapper({
         'chartType':'LineChart',
         'dataSourceUrl':'http://spreadsheets.google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1',
         'query':'SELECT A,D WHERE D > 100 ORDER BY D',
         'options': {'title':'Population Density (people/km^2)', 'legend':'none'}
      });

      chartEditor = new google.visualization.ChartEditor();
      google.visualization.events.addListener(chartEditor, 'ok', redrawChart);
      chartEditor.openDialog(wrapper, {});
    }

    // On "OK" save the chart to a <div> on the page.
    function redrawChart(){
      chartEditor.getChartWrapper().draw(document.getElementById('vis_div'));
    }

  </script>
</head>
<body>
  <div id="vis_div" style="height: 400px; width: 600px;"></div>
</body>
</html>

Phương pháp thao túng dữ liệu

Không gian tên google.visualization.data lưu giữ các phương thức tĩnh để thực hiện các thao tác giống như SQL trên các đối tượng DataTable, chẳng hạn như kết hợp các phương thức đó hoặc nhóm theo giá trị cột.

Không gian tên google.visualization.data hiển thị các phương thức sau:

Phương thức	Nội dung mô tả
`google.visualization.data.group`	Thực hiện thao tác NHÓM SQL BY để trả về một bảng được nhóm theo giá trị trong các cột được chỉ định.
`google.visualization.data.join`	Kết hợp hai bảng dữ liệu trên một hoặc nhiều cột chính.

group()

Lấy một đối tượng DataTable được điền sẵn và thực hiện thao tác GROUP BY giống như SQL, trả về một bảng có các hàng được nhóm theo giá trị cột được chỉ định. Xin lưu ý rằng thao tác này không sửa đổi dữ liệu đầu vào DataTable.

Bảng được trả về bao gồm một hàng cho từng tổ hợp giá trị trong các cột chính được chỉ định. Mỗi hàng bao gồm các cột chính và một cột có giá trị cột tổng hợp trên tất cả các hàng khớp với tổ hợp khoá đó (ví dụ: tổng hoặc số lượng của tất cả giá trị trong cột được chỉ định).

Không gian tên google.visualization.data bao gồm một số giá trị tổng hợp hữu ích (ví dụ: sum và count). Tuy nhiên, bạn có thể xác định giá trị của riêng mình (ví dụ: standardDeviation hoặcsecondOnce). Bạn sẽ thấy hướng dẫn về cách xác định trình tổng hợp của riêng mình sau phần mô tả phương thức.

Cú pháp

google.visualization.data.group(data_table, keys, columns)

data_table

Giá trị nhập DataTable. Chế độ này sẽ không được sửa đổi bằng cách gọi group().

khoá

Một mảng số và/hoặc đối tượng chỉ định cột nào cần nhóm. Bảng kết quả bao gồm mọi cột trong mảng này, cũng như mọi cột trong cột. Nếu là số, thì đây là chỉ mục cột của dữ liệu đầu vào DataTable để nhóm theo. Nếu là một đối tượng, thì đối tượng đó sẽ bao gồm một hàm có thể sửa đổi cột được chỉ định (ví dụ: thêm 1 vào giá trị trong cột đó). Đối tượng phải có các thuộc tính sau:

cột – Một số là chỉ mục cột từ dt để áp dụng phép biến đổi.
đối tượng sửa đổi – Một hàm chấp nhận một giá trị (giá trị ô trong cột đó cho mỗi hàng) và trả về giá trị được sửa đổi. Hàm này dùng để sửa đổi giá trị của cột nhằm hỗ trợ việc nhóm: chẳng hạn như bằng cách gọi một hàm Quý nào tính toán một quý từ cột ngày, nhờ đó, API có thể nhóm các hàng theo quý. Giá trị đã tính toán sẽ xuất hiện trong các cột chính trong bảng được trả về. Bạn có thể khai báo hàm này cùng dòng bên trong đối tượng này hoặc có thể là một hàm mà bạn xác định ở nơi khác trong mã (phải nằm trong phạm vi gọi). API này cung cấp một hàm đối tượng sửa đổi đơn giản; sau đây là hướng dẫn về cách tạo các hàm riêng và hữu ích hơn. Bạn phải biết loại dữ liệu mà hàm này có thể chấp nhận và chỉ gọi loại dữ liệu đó trên các cột thuộc loại đó. Bạn cũng phải biết loại dữ liệu trả về của hàm này và khai báo loại dữ liệu đó trong thuộc tính type được mô tả tiếp theo.
loại – Loại được hàm đối tượng sửa đổi trả về. Đây phải là tên loại chuỗi JavaScript, ví dụ: "number" hoặc "boolean".
label – [Không bắt buộc] Một nhãn chuỗi để gán cho cột này trong DataTable được trả về.
id – [Không bắt buộc] Mã nhận dạng chuỗi để chỉ định cột này trong DataTable được trả về.

Ví dụ: [0], [0,2],

[0,{column:1,
    modifier:myPlusOneFunc, type:'number'},2]

cột

[Không bắt buộc] Cho phép bạn chỉ định những cột cần đưa vào bảng đầu ra (ngoài các cột chính). Vì tất cả các hàng trong nhóm hàng được nén vào một hàng đầu ra duy nhất, nên bạn phải xác định giá trị nào sẽ hiển thị cho nhóm hàng đó. Ví dụ: bạn có thể chọn hiển thị giá trị cột từ hàng đầu tiên trong tập hợp hoặc giá trị trung bình của tất cả các hàng trong nhóm đó. cột là một mảng các đối tượng, có các thuộc tính sau:

cột – Một số chỉ định chỉ mục của cột cần hiển thị.
tổng hợp – Một hàm chấp nhận một mảng gồm tất cả các giá trị của cột này trong nhóm hàng này và trả về một giá trị duy nhất để hiển thị trong hàng kết quả. Giá trị trả về phải thuộc loại được chỉ định bởi thuộc tính type của đối tượng. Dưới đây là thông tin chi tiết về cách tạo hàm tổng hợp của riêng bạn. Bạn phải biết những loại dữ liệu mà phương thức này chấp nhận và chỉ gọi phương thức này trên các cột thuộc loại thích hợp. API này cung cấp một số hàm tổng hợp hữu ích. Hãy xem phần Các hàm tổng hợp được cung cấp bên dưới để biết danh sách hoặc bài viết Tạo hàm tổng hợp để tìm hiểu cách viết hàm tổng hợp của riêng bạn.
loại – Loại dữ liệu trả về của hàm tổng hợp. Đây phải là tên loại chuỗi JavaScript, ví dụ: "number" hoặc "boolean".
label – [Không bắt buộc] Một nhãn chuỗi áp dụng cho cột này trong bảng được trả về.
id – [Không bắt buộc] Mã nhận dạng chuỗi áp dụng cho cột này trong bảng trả về.

Giá trị trả về

Một DataTable với một cột cho mỗi cột được liệt kê trong khoá và một cột cho mỗi cột được liệt kê trong cột. Bảng được sắp xếp theo các hàng chính, từ trái sang phải.

Ví dụ

// This call will group the table by column 0 values.
// It will also show column 3, which will be a sum of
// values in that column for that row group.
var result = google.visualization.data.group(
  dt,
  [0],
  [{'column': 3, 'aggregation': google.visualization.data.sum, 'type': 'number'}]
);

*Input table*
1  'john'  'doe'            10
1  'jane'  'doe'           100
3  'jill'  'jones'          50
3  'jack'  'jones'          75
5  'al'    'weisenheimer'  500

*Output table*
1  110
3  125
5  500

Đã cung cấp Hàm đối tượng sửa đổi

API này cung cấp các hàm sửa đổi mà bạn có thể truyền vào các khoá sau đây. Tham số đối tượng sửa đổi để tuỳ chỉnh hoạt động của nhóm.

Hàm	Loại mảng đầu vào	Loại dữ liệu trả về	Nội dung mô tả
`google.visualization.data.month`	Ngày	number	Khi có ngày, hàm này sẽ trả về giá trị tháng dựa trên 0 (0, 1, 2, v.v.).

Cung cấp các hàm tổng hợp

API này cung cấp các hàm tổng hợp sau đây mà bạn có thể truyền vào các cột. aggregate (tổng hợp) tham số.

Hàm	Loại mảng đầu vào	Loại dữ liệu trả về	Nội dung mô tả
`google.visualization.data.avg`	number	number	Giá trị trung bình của mảng được truyền vào.
`google.visualization.data.count`	mọi loại	number	Số lượng hàng trong nhóm. Các giá trị rỗng và trùng lặp đều được tính.
`google.visualization.data.max`	số, chuỗi, Ngày	number, string, Date, null	Giá trị lớn nhất trong mảng. Đối với chuỗi, đây là mục đầu tiên trong danh sách được sắp xếp theo từ điển; đối với các giá trị Ngày, đây là ngày gần đây nhất. Giá trị rỗng sẽ bị bỏ qua. Trả về giá trị rỗng nếu không có giá trị tối đa.
`google.visualization.data.min`	số, chuỗi, Ngày	number, string, Date, null	Giá trị nhỏ nhất trong mảng. Đối với chuỗi, đây là mục cuối cùng trong danh sách được sắp xếp theo từ điển; đối với giá trị Ngày, đây là ngày sớm nhất. Giá trị rỗng sẽ bị bỏ qua. Trả về giá trị rỗng nếu không có giá trị tối thiểu.
`google.visualization.data.sum`	number	number	Tổng của tất cả các giá trị trong mảng.

Tạo hàm đối tượng sửa đổi

Bạn có thể tạo một hàm sửa đổi để thực hiện một phép biến đổi đơn giản đối với các giá trị khoá trước khi hàm group() nhóm các hàng của bạn. Hàm này nhận một giá trị ô duy nhất, thực hiện một thao tác với giá trị đó (ví dụ: thêm 1 vào giá trị) và trả về giá trị đó. Loại dữ liệu đầu vào và trả về không cần phải cùng loại, nhưng phương thức gọi phải biết loại dữ liệu đầu vào và đầu ra. Dưới đây là ví dụ về một hàm chấp nhận một ngày và trả về quý:

// Input type: Date
// Return type: number (1-4)
function getQuarter(someDate) {
  return Math.floor(someDate.getMonth()/3) + 1;
}

Tạo hàm tổng hợp

Bạn có thể tạo một hàm tổng hợp chấp nhận một tập hợp các giá trị cột trong một nhóm hàng và trả về một số duy nhất, chẳng hạn như trả về số lượng hoặc giá trị trung bình. Dưới đây là cách triển khai hàm tổng hợp số lượng được cung cấp. Hàm này sẽ trả về số lượng hàng có trong nhóm hàng:

// Input type: Array of any type
// Return type: number
function count(values) {
  return values.length;
}

join()

Phương thức này liên kết hai bảng dữ liệu (đối tượng DataTable hoặc DataView) thành một bảng kết quả duy nhất, tương tự như câu lệnh THAM GIA SQL. Bạn sẽ chỉ định một hoặc nhiều cặp cột (cột khoá) giữa hai bảng và bảng đầu ra sẽ bao gồm các hàng theo phương thức kết hợp mà bạn chỉ định: chỉ những hàng mà cả hai khoá khớp với nhau; tất cả các hàng trong một bảng; hoặc tất cả các hàng của cả hai bảng, cho dù khoá có khớp hay không. Bảng kết quả chỉ bao gồm các cột chính, cộng với mọi cột khác mà bạn chỉ định. Lưu ý rằng dt2 không thể có các khoá trùng lặp nhưng dt1 thì có thể. Thuật ngữ "khoá" có nghĩa là tổ hợp tất cả giá trị khoá, không phải giá trị cột khoá cụ thể. Vì vậy, nếu một hàng có các giá trị ô A | B | C và cột 0 và 1 là cột chính, thì khoá cho hàng đó là AB.

Cú pháp

google.visualization.data.join(dt1, dt2, joinMethod,
                                 keys, dt1Columns, dt2Columns);

dt1

Một DataTable đã được điền sẵn để tham gia với dt2.

dt2

Một DataTable được điền sẵn để kết hợp với dt1. Bảng này không được có nhiều khoá giống nhau (trong đó một khoá là tổ hợp các giá trị của cột khoá).

joinMethod

Một chuỗi chỉ định loại kết hợp. Nếu dt1 có nhiều hàng khớp với một hàng dt2, thì bảng đầu ra sẽ bao gồm tất cả các hàng dt1 trùng khớp. Chọn trong số các giá trị sau:

"full" – Bảng đầu ra bao gồm tất cả các hàng của cả hai bảng, bất kể các khoá có khớp hay không. Các hàng không khớp sẽ không có mục nhập ô trống; các hàng trùng khớp được nối.
"bên trong" – Phần kết hợp đầy đủ được lọc để chỉ bao gồm các hàng có khoá trùng khớp.
"left" – Bảng đầu ra bao gồm tất cả các hàng của dt1, bất kể có hàng nào khớp từ dt2 hay không.
"right" – Bảng đầu ra bao gồm tất cả các hàng của dt2, bất kể có hàng nào khớp từ dt1 hay không.

khoá

Một mảng cột chính để so sánh trên cả hai bảng. Mỗi cặp là một mảng 2 phần tử, dữ liệu đầu tiên là một khoá trong dt1, dữ liệu thứ hai là một khoá trong dt2. Mảng này có thể chỉ định các cột theo chỉ mục, mã nhận dạng hoặc nhãn. Vui lòng xem getColumnIndex.
Trong cả hai bảng, các cột phải thuộc cùng loại. Tất cả các khoá đã chỉ định phải khớp theo quy tắc do joinMethod đưa ra để có một hàng trong bảng. Các cột chính luôn có trong bảng kết quả. Chỉ dt1 (bảng bên trái) mới có thể bao gồm các khoá trùng lặp; các khoá trong dt2 phải là duy nhất. Thuật ngữ "khoá" ở đây có nghĩa là một tập hợp các cột khoá duy nhất, chứ không phải các giá trị từng cột. Ví dụ: nếu các cột khoá của bạn là A và B, thì bảng sau đây sẽ chỉ có các giá trị khoá duy nhất (và do đó có thể được dùng làm dt2):

Đáp	B
Jen	Đỏ
Jen	Xanh dương
Fred	Đỏ

Ví dụ: [[0,0], [2,1]] so sánh các giá trị của cột đầu tiên trong cả hai bảng, cũng như cột thứ ba của dt1 với cột thứ hai của dt1.

dt1Columns

Một mảng cột trên dt1 để đưa vào bảng kết quả, ngoài các cột chính của dt1. Mảng này có thể chỉ định các cột theo chỉ mục, mã nhận dạng hoặc nhãn, vui lòng xem getColumnIndex.

dt2Columns

Một mảng cột từ dt2 để đưa vào bảng đầu ra, ngoài các cột chính của dt2. Mảng này có thể chỉ định các cột theo chỉ mục, mã nhận dạng hoặc nhãn, vui lòng xem getColumnIndex.

Giá trị trả về

DataTable với các cột chính, dt1Columns và dt2Column. Bảng này được sắp xếp theo các cột chính, từ trái sang phải. Khi joinMethod là "bên trong", tất cả các ô chính sẽ được điền sẵn. Đối với các phương thức kết hợp khác, nếu không tìm thấy khoá nào khớp, bảng sẽ có giá trị rỗng cho mọi ô khoá không khớp.

Ví dụ

*Tables*
dt1                        dt2
bob  | 111 | red           bob   | 111 | point
bob  | 111 | green         ellyn | 222 | square
bob  | 333 | orange        jane  | 555 | circle
fred | 555 | blue          jane  | 777 | triangle
jane | 777 | yellow        fred  | 666 | dodecahedron
* Note that right table has duplicate Jane entries, but the key we will use is
* columns 0 and 1. The left table has duplicate key values, but that is
* allowed.

*Inner join* google.visualization.data.join(dt1, dt2, 'inner', [[0,0],[1,1]], [2], [2]);
bob  | 111 | red    | point
bob  | 111 | green  | point
jane | 777 | yellow | triangle
* Note that both rows from dt1 are included and matched to
* the equivalent dt2 row.


*Full join* google.visualization.data.join(dt1, dt2, 'full', [[0,0],[1,1]], [2], [2]);
bob   | 111 | red    | point
bob   | 111 | green  | point
bob   | 333 | orange | null
ellyn | 222 | null | square
fred  | 555 | blue   | null
fred  | 666 | null | dodecahedron
jane  | 555 | null | circle
jane  | 777 | yellow | triangle


*Left join*  google.visualization.data.join(dt1, dt2, 'left', [[0,0],[1,1]], [2], [2]);
bob  | 111 | red | point
bob  | 111 | green | point
bob  | 333 | orange | null
fred | 555 | blue | null
jane | 777 | yellow | triangle


*Right join*  google.visualization.data.join(dt1, dt2, 'right', [[0,0],[1,1]], [2], [2]);
bob   | 111 | red | point
bob   | 111 | green | point
ellyn | 222 | null | square
fred  | 666 | null | dodecahedron
jane  | 555 | null | circle
jane  | 777 | yellow | triangle

Trình định dạng

Google Visual API cung cấp các trình định dạng có thể dùng để định dạng lại dữ liệu ở dạng hình ảnh trực quan. Các trình định dạng này thay đổi giá trị được định dạng của cột được chỉ định trong tất cả các hàng. Lưu ý:

Trình định dạng chỉ sửa đổi các giá trị được định dạng, chứ không sửa đổi các giá trị cơ bản. Ví dụ: giá trị hiển thị sẽ là "$1.000.00" nhưng giá trị cơ bản vẫn sẽ là "1000".
Trình định dạng chỉ ảnh hưởng đến một cột tại một thời điểm; để định dạng lại nhiều cột, hãy áp dụng một trình định dạng cho từng cột mà bạn muốn thay đổi.
Nếu bạn cũng sử dụng trình định dạng do người dùng xác định, một số trình định dạng của Google Hình ảnh hoá sẽ ghi đè tất cả các trình định dạng do người dùng xác định.

Định dạng thực tế áp dụng cho dữ liệu được lấy từ ngôn ngữ mà API được tải. Để biết thêm thông tin chi tiết, hãy xem cách tải biểu đồ bằng một ngôn ngữ cụ thể .

Lưu ý quan trọng: Bạn chỉ có thể sử dụng bộ định dạng với DataTable mà không thể dùng với DataView (các đối tượng DataView chỉ có thể đọc).

Dưới đây là các bước chung để sử dụng trình định dạng:

Lấy đối tượng DataTable được điền sẵn.
Đối với mỗi cột bạn muốn định dạng lại:
1. Tạo một đối tượng chỉ định tất cả các tuỳ chọn cho trình định dạng của bạn. Đây là đối tượng JavaScript cơ bản với một tập hợp các thuộc tính và giá trị. Hãy xem tài liệu của trình định dạng để biết thuộc tính nào được hỗ trợ. (Không bắt buộc, bạn có thể truyền vào một đối tượng ký hiệu bằng chữ đối tượng chỉ định các tuỳ chọn của mình.)
2. Tạo trình định dạng, truyền vào đối tượng tuỳ chọn.
3. Gọi formatter.format(table, colIndex), truyền vào DataTable và số cột (dựa trên 0) của dữ liệu để định dạng lại. Lưu ý rằng bạn chỉ có thể áp dụng một trình định dạng duy nhất cho mỗi cột; việc áp dụng một trình định dạng thứ hai sẽ chỉ ghi đè lên hiệu ứng của cột đầu tiên.
  Lưu ý quan trọng: Nhiều trình định dạng yêu cầu thẻ HTML hiển thị định dạng đặc biệt; nếu hình ảnh của bạn hỗ trợ tuỳ chọn allowHtml, thì bạn nên đặt định dạng đó thành true.

Dưới đây là ví dụ về cách thay đổi giá trị ngày được định dạng của một cột ngày để sử dụng định dạng ngày dài ("Ngày 1 tháng 1 năm 2009"):

var data = new google.visualization.DataTable();
data.addColumn('string', 'Employee Name');
data.addColumn('date', 'Start Date');
data.addRows(3);
data.setCell(0, 0, 'Mike');
data.setCell(0, 1, new Date(2008, 1, 28));
data.setCell(1, 0, 'Bob');
data.setCell(1, 1, new Date(2007, 5, 1));
data.setCell(2, 0, 'Alice');
data.setCell(2, 1, new Date(2006, 7, 16));

// Create a formatter.
// This example uses object literal notation to define the options.
var formatter = new google.visualization.DateFormat({formatType: 'long'});

// Reformat our data.
formatter.format(data, 1);

// Draw our data
var table = new google.visualization.Table(document.getElementById('dateformat_div'));
table.draw(data, {showRowNumber: true});

Hầu hết các trình định dạng đều hiển thị 2 phương thức sau:

Phương thức Nội dung mô tả

Phương thức	Nội dung mô tả
`google.visualization.formatter_name(options)`	Hàm khởi tạo, trong đó formatter_name là tên lớp định dạng đặc trưng. options – Đối tượng JavaScript chung chỉ định các tuỳ chọn cho trình định dạng đó. Đối tượng này là một đối tượng chung có các cặp thuộc tính/giá trị với các thuộc tính dành riêng cho trình định dạng đó. Hãy xem tài liệu về trình định dạng cụ thể của bạn để tìm hiểu xem tuỳ chọn nào được hỗ trợ. Dưới đây là hai cách ví dụ để gọi hàm khởi tạo cho đối tượng DateFormat, truyền 2 thuộc tính: // Object literal technique var formatter = new google.visualization.DateFormat({formatType: 'long', timeZone: -5}); // Equivalent property setting technique var options = new Object(); options['formatType'] = 'long'; options['timeZone'] = -5; var formatter = new google.visualization.DateFormat(options);
`format(data, colIndex)`	Định dạng lại dữ liệu trong cột được chỉ định. data – `DataTable` chứa dữ liệu cần định dạng lại. Bạn không thể sử dụng DataView tại đây. colIndex – Chỉ mục từ 0 của cột cần định dạng. Để định dạng nhiều cột, bạn phải gọi phương thức này nhiều lần, với các giá trị colIndex khác nhau.

google.visualization.formatter_name(options)

Hàm khởi tạo, trong đó formatter_name là tên lớp định dạng đặc trưng.

options – Đối tượng JavaScript chung chỉ định các tuỳ chọn cho trình định dạng đó. Đối tượng này là một đối tượng chung có các cặp thuộc tính/giá trị với các thuộc tính dành riêng cho trình định dạng đó. Hãy xem tài liệu về trình định dạng cụ thể của bạn để tìm hiểu xem tuỳ chọn nào được hỗ trợ. Dưới đây là hai cách ví dụ để gọi hàm khởi tạo cho đối tượng DateFormat, truyền 2 thuộc tính:

// Object literal technique
var formatter = new google.visualization.DateFormat({formatType: 'long', timeZone: -5});

// Equivalent property setting technique
var options = new Object();
options['formatType'] = 'long';
options['timeZone'] = -5;
var formatter = new google.visualization.DateFormat(options);

format(data, colIndex)

Định dạng lại dữ liệu trong cột được chỉ định.

data – DataTable chứa dữ liệu cần định dạng lại. Bạn không thể sử dụng DataView tại đây.
colIndex – Chỉ mục từ 0 của cột cần định dạng. Để định dạng nhiều cột, bạn phải gọi phương thức này nhiều lần, với các giá trị colIndex khác nhau.

Google Visual API cung cấp các trình định dạng sau:

Tên trình định dạng	Nội dung mô tả
ArrowFormat	Thêm một mũi tên lên hoặc xuống để cho biết giá trị của ô cao hơn hay thấp hơn một giá trị đã chỉ định.
BarFormat	Thêm một thanh màu, hướng và màu cho biết giá trị của ô cao hơn hay thấp hơn giá trị đã chỉ định.
ColorFormat	Tô màu ô tuỳ theo việc các giá trị có nằm trong dải ô được chỉ định hay không.
DateFormat	Định dạng giá trị Ngày hoặc Ngày giờ theo nhiều cách, trong đó có "Ngày 1 tháng 1 năm 2009", "Ngày 1/1/09" và "Ngày 1 tháng 1 năm 2009".
NumberFormat	Định dạng các khía cạnh khác nhau của giá trị số.
PatternFormat	Ghép các giá trị ô trên cùng một hàng vào một ô được chỉ định, cùng với văn bản tuỳ ý.

ArrowFormat

Thêm mũi tên lên hoặc xuống vào một ô số, tuỳ thuộc vào việc giá trị cao hơn hay thấp hơn giá trị cơ sở đã chỉ định. Nếu bằng giá trị cơ số, sẽ không có mũi tên nào xuất hiện.

Tùy chọn

ArrowFormat hỗ trợ các tuỳ chọn sau đây và được truyền vào hàm khởi tạo:

Phương thức	Nội dung mô tả
`base`	Một số cho biết giá trị cơ sở, dùng để so sánh với giá trị của ô. Nếu giá trị của ô cao hơn, ô đó sẽ có một mũi tên hướng lên màu xanh lục; nếu giá trị thấp hơn, thì ô đó sẽ có một mũi tên xuống màu đỏ; nếu tương tự thì sẽ không có mũi tên nào.

Mã mẫu

var data = new google.visualization.DataTable();
data.addColumn('string', 'Department');
data.addColumn('number', 'Revenues Change');
data.addRows([
  ['Shoes', {v:12, f:'12.0%'}],
  ['Sports', {v:-7.3, f:'-7.3%'}],
  ['Toys', {v:0, f:'0%'}],
  ['Electronics', {v:-2.1, f:'-2.1%'}],
  ['Food', {v:22, f:'22.0%'}]
]);

var table = new google.visualization.Table(document.getElementById('arrowformat_div'));

var formatter = new google.visualization.ArrowFormat();
formatter.format(data, 1); // Apply formatter to second column

table.draw(data, {allowHtml: true, showRowNumber: true});

BarFormat

Thêm một thanh màu vào một ô số cho biết giá trị của ô cao hơn hay thấp hơn giá trị cơ sở đã chỉ định.

Tùy chọn

BarFormat hỗ trợ các tuỳ chọn sau đây và được truyền vào hàm khởi tạo:

Phương thức	Ví dụ: Nội dung mô tả
`base`	Một số là giá trị cơ sở để so sánh với giá trị của ô. Nếu giá trị của ô cao hơn, giá trị này sẽ được vẽ ở bên phải của đế; còn nếu giá trị thấp hơn, giá trị này sẽ được vẽ ở bên trái. Giá trị mặc định là 0.
`colorNegative`	Chuỗi cho biết phần giá trị âm của các thanh. Giá trị có thể là 'red' (đỏ), 'xanh' và 'blue'; giá trị mặc định là 'red'.
`colorPositive`	Một chuỗi cho biết màu của phần giá trị dương trên các thanh. Các giá trị có thể là "đỏ", "xanh lục" và "xanh dương". Mặc định là "xanh dương".
`drawZeroLine`	Giá trị boolean cho biết liệu có vẽ đường cơ sở tối 1 pixel hay không khi có các giá trị âm. Có đường màu tối để cải thiện việc quét trực quan các thanh. Giá trị mặc định là 'false'.
`max`	Giá trị số lớn nhất cho dải ô. Giá trị mặc định là giá trị cao nhất trong bảng.
`min`	Giá trị số nhỏ nhất cho dải ô. Giá trị mặc định là giá trị thấp nhất trong bảng.
`showValue`	Nếu true hiển thị giá trị và thanh; nếu là false, chỉ hiển thị các thanh. Giá trị mặc định là true.
`width`	Độ dày của mỗi thanh, tính bằng pixel. Giá trị mặc định là 100.

Mã mẫu

var data = new google.visualization.DataTable();
data.addColumn('string', 'Department');
data.addColumn('number', 'Revenues');
data.addRows([
  ['Shoes', 10700],
  ['Sports', -15400],
  ['Toys', 12500],
  ['Electronics', -2100],
  ['Food', 22600],
  ['Art', 1100]
]);

var table = new google.visualization.Table(document.getElementById('barformat_div'));

var formatter = new google.visualization.BarFormat({width: 120});
formatter.format(data, 1); // Apply formatter to second column

table.draw(data, {allowHtml: true, showRowNumber: true, width: '100%', height: '100%'});

ColorFormat

Chỉ định màu cho nền trước hoặc nền của một ô số, tuỳ thuộc vào giá trị của ô. Trình định dạng này là một điểm bất thường, vì trình định dạng này không có các tuỳ chọn trong hàm khởi tạo. Thay vào đó, bạn nên gọi addRange() hoặc addGradientRange() bao nhiêu lần tuỳ thích để thêm các dải màu trước khi gọi format(). Bạn có thể chỉ định màu ở bất kỳ định dạng HTML nào được chấp nhận, ví dụ: "đen", "#000000" hoặc "#000".

Phương thức

ColorFormat hỗ trợ các phương thức sau:

Phương thức	Nội dung mô tả
`google.visualization.ColorFormat()`	Hàm khởi tạo. Không nhận đối số.
`addRange(from, to, color, bgcolor)`	Chỉ định màu nền trước và/hoặc màu nền cho một ô, tuỳ thuộc vào giá trị của ô. Bất kỳ ô nào có giá trị trong dải ô from—to được chỉ định sẽ được gán color và bgcolor. Bạn cần lưu ý rằng dải ô này không bao hàm, vì việc tạo một dải ô từ 1 đến 1.000 và một giây từ 1.000 đến 2.000 sẽ không bao hàm giá trị 1.000! from – [String, Number, Date, DateTime hoặc TimeOfDay] Ranh giới dưới (bao gồm) của dải ô, hoặc giá trị rỗng. Nếu rỗng, giá trị này sẽ khớp với -∞. Ranh giới chuỗi được so sánh theo thứ tự bảng chữ cái với giá trị chuỗi. to – [Chuỗi, Số, Ngày, Ngày giờ hoặc TimeOfDay] Ranh giới cao (không bao gồm) của dải ô hoặc rỗng. Nếu là rỗng, giá trị này sẽ khớp với +∞. Ranh giới chuỗi được so sánh theo thứ tự bảng chữ cái với giá trị chuỗi. color - Màu cần áp dụng cho văn bản trong các ô phù hợp. Giá trị có thể là giá trị "#RRGGBB" hoặc hằng số màu đã xác định (ví dụ: "#FF0000" hoặc "đỏ"). bgcolor – Màu cần áp dụng cho nền của các ô trùng khớp. Giá trị có thể là giá trị "#RRGGBB" hoặc hằng số màu đã xác định (ví dụ: "#FF0000" hoặc "đỏ").
`addGradientRange(from, to, color, fromBgColor, toBgColor)`	Chỉ định màu nền từ một dải ô, theo giá trị của ô. Màu được điều chỉnh theo tỷ lệ để khớp với giá trị của ô trong phạm vi từ màu ranh giới dưới đến màu ranh giới trên. Lưu ý rằng phương thức này không thể so sánh các giá trị chuỗi, như `addRange()` có thể. Mẹo: Người xem thường khó đánh giá chính xác dải màu. Dải màu đơn giản và dễ đọc nhất là từ màu bão hoà hoàn toàn sang màu trắng (ví dụ: #FF0000—FFFFFF). from – [Số, Ngày, Ngày giờ hoặc TimeOfDay] Ranh giới dưới (bao gồm) dải ô, hoặc giá trị rỗng. Nếu rỗng, giá trị này sẽ khớp với giá trị -∞. to – [Number, Date, DateTime hoặc TimeOfDay] Ranh giới cao hơn (không bao gồm) của dải ô hoặc rỗng. Nếu giá trị rỗng, giá trị này sẽ khớp với giá trị +∞. color - Màu cần áp dụng cho văn bản trong các ô phù hợp. Màu này giống nhau cho tất cả các ô, bất kể giá trị của các ô đó là gì. fromBgColor – Màu nền cho các ô chứa giá trị ở cuối dải chuyển màu. Giá trị có thể là giá trị "#RRGGBB" hoặc hằng số màu đã xác định (ví dụ: "#FF0000" hoặc "đỏ"). toBgColor - Màu nền của các ô chứa giá trị ở đầu dải chuyển màu. Giá trị có thể là giá trị "#RRGGBB" hoặc hằng số màu đã xác định (ví dụ: "#FF0000" hoặc "đỏ").
`format(dataTable, columnIndex)`	Phương thức `format()` chuẩn để áp dụng định dạng cho cột được chỉ định.

Mã mẫu

var data = new google.visualization.DataTable();
data.addColumn('string', 'Department');
data.addColumn('number', 'Revenues');
data.addRows([
  ['Shoes', 10700],
  ['Sports', -15400],
  ['Toys', 12500],
  ['Electronics', -2100],
  ['Food', 22600],
  ['Art', 1100]
]);

var table = new google.visualization.Table(document.getElementById('colorformat_div'));

var formatter = new google.visualization.ColorFormat();
formatter.addRange(-20000, 0, 'white', 'orange');
formatter.addRange(20000, null, 'red', '#33ff33');
formatter.format(data, 1); // Apply formatter to second column

table.draw(data, {allowHtml: true, showRowNumber: true, width: '100%', height: '100%'});

DateFormat

Định dạng giá trị Date JavaScript theo nhiều cách, chẳng hạn như "ngày 1 tháng 1 năm 2016", "1/1/16" và "ngày 1 tháng 1 năm 2016".

Tùy chọn

DateFormat hỗ trợ các tuỳ chọn sau đây và được truyền vào hàm khởi tạo:

Phương thức Nội dung mô tả

Phương thức	Nội dung mô tả
`formatType`	Một tuỳ chọn định dạng nhanh cho ngày. Các giá trị chuỗi sau được hỗ trợ, định dạng lại ngày 28 tháng 2 năm 2016 như sau: "ngắn" – Định dạng ngắn: ví dụ: "28/2/16" "trung bình" – Định dạng trung bình: ví dụ: "Ngày 28 tháng 2 năm 2016" "long" – Định dạng dài, ví dụ: "Ngày 28 tháng 2 năm 2016" Bạn không thể chỉ định cả `formatType` và `pattern`.
`pattern`	Mẫu định dạng tuỳ chỉnh để áp dụng cho giá trị, tương tự như định dạng ngày và giờ ICU. Ví dụ: `var formatter3 = new google.visualization.DateFormat({pattern: "EEE, MMM d, ''yy"});` Bạn không thể chỉ định cả `formatType` và `pattern`. Bạn có thể đọc thêm thông tin chi tiết về các mẫu trong phần tiếp theo.
`timeZone`	Múi giờ mà theo đó giá trị ngày sẽ được hiển thị. Đây là một giá trị số, cho biết số giờ GMT + số múi giờ này (có thể là số âm). Theo mặc định, đối tượng Date (Ngày) được tạo theo múi giờ giả định của máy tính mà đối tượng được tạo; tuỳ chọn này dùng để hiển thị giá trị đó ở một múi giờ khác. Ví dụ: nếu bạn đã tạo một đối tượng Ngày có thời điểm 5 giờ chiều trên máy tính tại Greenwich, Anh và chỉ định múi giờ là -5 (`options['timeZone'] = -5` hoặc Giờ miền Đông Thái Bình Dương tại Hoa Kỳ), thì giá trị hiển thị sẽ là 12 giờ trưa.

formatType

Một tuỳ chọn định dạng nhanh cho ngày. Các giá trị chuỗi sau được hỗ trợ, định dạng lại ngày 28 tháng 2 năm 2016 như sau:

"ngắn" – Định dạng ngắn: ví dụ: "28/2/16"
"trung bình" – Định dạng trung bình: ví dụ: "Ngày 28 tháng 2 năm 2016"
"long" – Định dạng dài, ví dụ: "Ngày 28 tháng 2 năm 2016"

Bạn không thể chỉ định cả formatType và pattern.

pattern

Mẫu định dạng tuỳ chỉnh để áp dụng cho giá trị, tương tự như định dạng ngày và giờ ICU. Ví dụ: var formatter3 = new google.visualization.DateFormat({pattern: "EEE, MMM d, ''yy"});

Bạn không thể chỉ định cả formatType và pattern. Bạn có thể đọc thêm thông tin chi tiết về các mẫu trong phần tiếp theo.

timeZone Múi giờ mà theo đó giá trị ngày sẽ được hiển thị. Đây là một giá trị số, cho biết số giờ GMT + số múi giờ này (có thể là số âm). Theo mặc định, đối tượng Date (Ngày) được tạo theo múi giờ giả định của máy tính mà đối tượng được tạo; tuỳ chọn này dùng để hiển thị giá trị đó ở một múi giờ khác. Ví dụ: nếu bạn đã tạo một đối tượng Ngày có thời điểm 5 giờ chiều trên máy tính tại Greenwich, Anh và chỉ định múi giờ là -5 (options['timeZone'] = -5 hoặc Giờ miền Đông Thái Bình Dương tại Hoa Kỳ), thì giá trị hiển thị sẽ là 12 giờ trưa.

Phương thức

DateFormat hỗ trợ các phương thức sau:

Phương thức	Nội dung mô tả
`google.visualization.DateFormat(options)`	Hàm khởi tạo. Hãy xem phần các lựa chọn ở trên để biết thêm thông tin.
`format(dataTable, columnIndex)`	Phương thức `format()` chuẩn để áp dụng định dạng cho cột được chỉ định.
`formatValue(value)`	Trả về giá trị được định dạng của một giá trị cho sẵn. Phương thức này không yêu cầu `DataTable`.

Mã mẫu

function drawDateFormatTable() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Employee Name');
  data.addColumn('date', 'Start Date (Long)');
  data.addColumn('date', 'Start Date (Medium)');
  data.addColumn('date', 'Start Date (Short)');
  data.addRows([
    ['Mike', new Date(2008, 1, 28, 0, 31, 26),
             new Date(2008, 1, 28, 0, 31, 26),
             new Date(2008, 1, 28, 0, 31, 26)],
    ['Bob', new Date(2007, 5, 1, 0),
            new Date(2007, 5, 1, 0),
            new Date(2007, 5, 1, 0)],
    ['Alice', new Date(2006, 7, 16),
              new Date(2006, 7, 16),
              new Date(2006, 7, 16)]
  ]);

  // Create three formatters in three styles.
  var formatter_long = new google.visualization.DateFormat({formatType: 'long'});
  var formatter_medium = new google.visualization.DateFormat({formatType: 'medium'});
  var formatter_short = new google.visualization.DateFormat({formatType: 'short'});

  // Reformat our data.
  formatter_long.format(data, 1);
  formatter_medium.format(data,2);
  formatter_short.format(data, 3);

  // Draw our data
  var table = new google.visualization.Table(document.getElementById('dateformat_div'));
  table.draw(data, {showRowNumber: true, width: '100%', height: '100%'});
}

Tìm hiểu thêm về mẫu ngày

Sau đây là một số thông tin chi tiết khác về những mẫu được hỗ trợ:

Các mẫu này tương tự như định dạng ngày và giờ ICU, nhưng các mẫu sau chưa được hỗ trợ: A e D F g Y u w W. Để tránh xung đột với các mẫu, mọi văn bản cố định mà bạn muốn xuất hiện trong dữ liệu đầu ra đều phải được đặt trong dấu ngoặc đơn, ngoại trừ dấu nháy đơn thì phải được nhân đôi: ví dụ: "K 'o''clock.'".

Mẫu	Nội dung mô tả	Kết quả ví dụ
GG	Người chỉ định thời đại.	"AD"
yy hoặc yyyy	năm.	1996
M	Tháng trong năm. Đối với tháng 1: M tạo ra 1 MM tạo ra 1 MMM sản xuất tháng 1 MMMM sản xuất tháng 1	"Tháng 7" "07"
ngày	Ngày trong tháng. Giá trị 'd' thừa sẽ thêm số 0 ở đầu.	10
giờ	Giờ trong thang 12 giờ. Các giá trị 'h' thừa sẽ thêm số 0 ở đầu.	12
Số lần bị đánh trúng bóng	Giờ trong thang 24 giờ. Giá trị Hk bổ sung sẽ thêm các số 0 ở đầu.	0
m	Số phút trong giờ. Các giá trị 'M' thừa sẽ thêm số 0 ở đầu.	30
giây	Số giây trong phút. Giá trị 's' thừa sẽ thêm số 0 ở đầu.	55
S	Phân số thứ hai. Các giá trị 'S' thừa sẽ được thêm số 0 vào khoảng đệm bên phải.	978
E	Ngày trong tuần. Sau đây là kết quả cho ngày "thứ Ba": E tạo ra T EE hoặc EEE tạo thứ Ba hoặc thứ Ba EEEE sản xuất thứ Ba	"Thứ Ba" "Thứ Ba"
aa	Sáng/chiều	"CH" (CH)
k	Giờ trong ngày (1~24). Các giá trị "k" thừa sẽ thêm số 0 ở đầu.	24
nghìn	Giờ sáng/chiều (0~11). Các giá trị "k" thừa sẽ thêm số 0 ở đầu.	0
z	Múi giờ. Đối với múi giờ 5, hãy tạo "UTC+5"	"UTC+5"
Z	Múi giờ ở định dạng RFC 822. Đối với múi giờ -5: Z, ZZ, ZZZ sản xuất -0500 ZZZZ và nhiều sản phẩm khác "GMT -05:00"	"-0800" "GMT -05:00"
v	Múi giờ (chung).	"Etc/GMT-5"
'	Escape cho văn bản	'Ngày='
''	dấu nháy đơn	"yy

NumberFormat

Mô tả cách định dạng cột số. Các tuỳ chọn định dạng bao gồm việc chỉ định một ký hiệu tiền tố (chẳng hạn như ký hiệu đô la) hoặc dấu câu để sử dụng làm điểm đánh dấu hàng nghìn.

Tùy chọn

NumberFormat hỗ trợ các tuỳ chọn sau đây và được truyền vào hàm khởi tạo:

Phương thức	Nội dung mô tả
`decimalSymbol`	Ký tự sử dụng làm điểm đánh dấu thập phân. Giá trị mặc định là dấu chấm (.).
`fractionDigits`	Một số chỉ định số lượng chữ số cần hiển thị sau dấu thập phân. Giá trị mặc định là 2. Nếu bạn chỉ định nhiều chữ số hơn số chứa, thì giá trị sẽ hiện số 0 cho các giá trị nhỏ hơn. Giá trị bị cắt bớt sẽ được làm tròn (làm tròn 5 lên).
`groupingSymbol`	Một ký tự dùng để nhóm các chữ số ở bên trái của số thập phân thành các bộ ba. Mặc định là dấu phẩy (,).
`negativeColor`	Màu văn bản cho các giá trị âm. Không có giá trị mặc định. Giá trị có thể là giá trị màu HTML được chấp nhận, chẳng hạn như "đỏ" hoặc "#FF0000".
`negativeParens`	Giá trị boolean, trong đó giá trị true cho biết các giá trị âm phải được đặt trong dấu ngoặc đơn. Mặc định là đúng.
`pattern`	Chuỗi định dạng. Khi được cung cấp, tất cả các tuỳ chọn khác sẽ bị bỏ qua, ngoại trừ `negativeColor`. Chuỗi định dạng là một tập hợp con của bộ mẫu ICU . Ví dụ: `{pattern:'#,###%'}` sẽ dẫn đến giá trị đầu ra là "1.000%", "750%" và "50%" cho các giá trị 10, 7,5 và 0,5.
`prefix`	Tiền tố chuỗi cho giá trị, ví dụ: "$".
`suffix`	Hậu tố chuỗi cho giá trị, ví dụ: "%".

Phương thức

NumberFormat hỗ trợ các phương thức sau:

Phương thức	Nội dung mô tả
`google.visualization.NumberFormat(options)`	Hàm khởi tạo. Hãy xem phần các lựa chọn ở trên để biết thêm thông tin.
`format(dataTable, columnIndex)`	Phương thức `format()` chuẩn để áp dụng định dạng cho cột được chỉ định.
`formatValue(value)`	Trả về giá trị được định dạng của một giá trị cho sẵn. Phương thức này không yêu cầu `DataTable`.

Mã mẫu

var data = new google.visualization.DataTable();
data.addColumn('string', 'Department');
data.addColumn('number', 'Revenues');
data.addRows([
  ['Shoes', 10700],
  ['Sports', -15400],
  ['Toys', 12500],
  ['Electronics', -2100],
  ['Food', 22600],
  ['Art', 1100]
]);

var table = new google.visualization.Table(document.getElementById('numberformat_div'));

var formatter = new google.visualization.NumberFormat(
    {prefix: '$', negativeColor: 'red', negativeParens: true});
formatter.format(data, 1); // Apply formatter to second column

table.draw(data, {allowHtml: true, showRowNumber: true, width: '100%', height: '100%'});

PatternFormat

Cho phép bạn hợp nhất giá trị của các cột được chỉ định thành một cột duy nhất cùng với văn bản tuỳ ý. Ví dụ: nếu có một cột là tên và một cột cho họ, bạn có thể điền {last name}, {first name} vào cột thứ ba. Trình định dạng này không tuân theo các quy ước của hàm khởi tạo và phương thức format(). Hãy xem mục Phương thức dưới đây để biết hướng dẫn.

Phương thức

PatternFormat hỗ trợ các phương thức sau:

Phương thức Nội dung mô tả

Phương thức	Nội dung mô tả
`google.visualization.PatternFormat(pattern)`	Hàm khởi tạo. Không lấy đối tượng tuỳ chọn. Thay vào đó, nó sẽ lấy thông số chuỗi pattern. Đây là một chuỗi mô tả các giá trị cột cần đặt vào cột đích đến, cùng với mọi văn bản tuỳ ý. Nhúng phần giữ chỗ vào chuỗi để cho biết giá trị sẽ được nhúng trong một cột khác. Phần giữ chỗ là `{#}`, trong đó # là chỉ mục của cột nguồn sẽ sử dụng. Chỉ mục là một chỉ mục trong mảng srcColumnIndices từ phương thức `format()` bên dưới. Để bao gồm ký tự { hoặc }, hãy thoát ký tự đó như sau: \{ hoặc \}. Để bao gồm dấu \ bằng chữ, hãy thoát ký tự đó dưới dạng \\. Mã mẫu Ví dụ sau đây minh hoạ một hàm khởi tạo cho một mẫu tạo ra một phần tử neo, trong đó các phần tử đầu tiên và thứ hai được lấy từ phương thức `format()`: var formatter = new google.visualization.PatternFormat( '<a href="mailto:{1}">{0}</a>');
`format(dataTable, srcColumnIndices, opt_dstColumnIndex)`	Lệnh gọi định dạng chuẩn, với một vài tham số bổ sung: dataTable - DataTable hoạt động. srcColumnIndices – Một mảng gồm một hoặc nhiều chỉ mục cột (dựa trên 0) để lấy dưới dạng nguồn từ DataTable cơ bản. Lớp này sẽ được dùng làm nguồn dữ liệu cho tham số pattern trong hàm khởi tạo. Số cột không cần phải theo thứ tự được sắp xếp. opt_dstColumnIndex - [optional] Cột đích để đặt đầu ra của thao tác pattern. Nếu không được chỉ định, phần tử đầu tiên trong srcColumIndices sẽ được dùng làm đích đến. Xem các ví dụ về định dạng sau bảng.

google.visualization.PatternFormat(pattern)

Hàm khởi tạo. Không lấy đối tượng tuỳ chọn. Thay vào đó, nó sẽ lấy thông số chuỗi pattern. Đây là một chuỗi mô tả các giá trị cột cần đặt vào cột đích đến, cùng với mọi văn bản tuỳ ý. Nhúng phần giữ chỗ vào chuỗi để cho biết giá trị sẽ được nhúng trong một cột khác. Phần giữ chỗ là {#}, trong đó # là chỉ mục của cột nguồn sẽ sử dụng. Chỉ mục là một chỉ mục trong mảng srcColumnIndices từ phương thức format() bên dưới. Để bao gồm ký tự { hoặc }, hãy thoát ký tự đó như sau: \{ hoặc \}. Để bao gồm dấu \ bằng chữ, hãy thoát ký tự đó dưới dạng \\.

Mã mẫu

Ví dụ sau đây minh hoạ một hàm khởi tạo cho một mẫu tạo ra một phần tử neo, trong đó các phần tử đầu tiên và thứ hai được lấy từ phương thức format():

var formatter = new google.visualization.PatternFormat(
  '<a href="mailto:{1}">{0}</a>');


        format(dataTable, srcColumnIndices,
        opt_dstColumnIndex)

Lệnh gọi định dạng chuẩn, với một vài tham số bổ sung:

dataTable - DataTable hoạt động.
srcColumnIndices – Một mảng gồm một hoặc nhiều chỉ mục cột (dựa trên 0) để lấy dưới dạng nguồn từ DataTable cơ bản. Lớp này sẽ được dùng làm nguồn dữ liệu cho tham số pattern trong hàm khởi tạo. Số cột không cần phải theo thứ tự được sắp xếp.
opt_dstColumnIndex - [optional] Cột đích để đặt đầu ra của thao tác pattern. Nếu không được chỉ định, phần tử đầu tiên trong srcColumIndices sẽ được dùng làm đích đến.

Xem các ví dụ về định dạng sau bảng.

Dưới đây là một số dữ liệu đầu vào và đầu ra mẫu cho bảng 4 cột.

Row before formatting (4 columns, last is blank):
John  |  Paul  |  Jones  |  [empty]

var formatter = new google.visualization.PatternFormat("{0} {1} {2}");
formatter.format(data, [0,1,2], 3);
Output:
  John  |  Paul  |  Jones  |  John Paul Jones

var formatter = new google.visualization.PatternFormat("{1}, {0}");
formatter.format(data, [0,2], 3);
Output:
  John  |  Paul  |  Jones  |  Jones, John

Mã mẫu

Ví dụ sau đây minh hoạ cách kết hợp dữ liệu từ hai cột để tạo một địa chỉ email. Phương thức này sử dụng đối tượng DataView để ẩn các cột nguồn ban đầu:

var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('string', 'Email');
data.addRows([
  ['John Lennon', 'john@beatles.co.uk'],
  ['Paul McCartney', 'paul@beatles.co.uk'],
  ['George Harrison', 'george@beatles.co.uk'],
  ['Ringo Starr', 'ringo@beatles.co.uk']
]);

var table = new google.visualization.Table(document.getElementById('patternformat_div'));

var formatter = new google.visualization.PatternFormat(
    '<a href="mailto:{1}">{0}</a>');
// Apply formatter and set the formatted value of the first column.
formatter.format(data, [0, 1]);

var view = new google.visualization.DataView(data);
view.setColumns([0]); // Create a view with the first column only.

table.draw(view, {allowHtml: true, showRowNumber: true, width: '100%', height: '100%'});

GadgetHelper

Một lớp trợ giúp giúp đơn giản hoá việc viết Tiện ích sử dụng API Hình ảnh của Google.

Hàm dựng

google.visualization.GadgetHelper()

Phương thức

Phương thức	Giá trị trả về	Nội dung mô tả
`createQueryFromPrefs(prefs)`	google.visualization.Query	Tĩnh. Tạo một thực thể mới của `google.visualization.Query` và đặt thuộc tính của phiên bản đó theo các giá trị trong phần lựa chọn ưu tiên của tiện ích. Loại thông số `prefs` là _IG_Prefs Lựa chọn ưu tiên `_table_query_url` dùng để thiết lập URL nguồn dữ liệu truy vấn. Lựa chọn ưu tiên `_table_query_refresh_interval` dùng để thiết lập khoảng thời gian làm mới Truy vấn (tính bằng giây).
`validateResponse(response)`	Boolean	Tĩnh. Tham số `response` thuộc loại google.visualization.QueryResponse. Trả về `true` nếu phản hồi có chứa dữ liệu. Trả về `false` nếu thực thi truy vấn không thành công và phản hồi không chứa dữ liệu. Nếu xảy ra lỗi, phương thức này sẽ hiển thị thông báo lỗi.

Các lớp truy vấn

Các đối tượng sau dùng được để gửi truy vấn về dữ liệu đến một nguồn dữ liệu bên ngoài, chẳng hạn như Bảng tính Google.

Truy vấn – Gói yêu cầu dữ liệu gửi đi.
QueryResponse – Xử lý phản hồi từ nguồn dữ liệu.

Cụm từ tìm kiếm

Biểu thị một truy vấn được gửi đến một nguồn dữ liệu.

Hàm dựng

google.visualization.Query(dataSourceUrl, opt_options)

Tham số

dataSourceUrl

[Bắt buộc, URL String] để gửi truy vấn đến. Xem tài liệu về Biểu đồ và bảng tính dành cho Bảng tính Google.

opt_options

[Không bắt buộc, Đối tượng] Bản đồ các tuỳ chọn cho yêu cầu. Lưu ý: Nếu đang truy cập vào một nguồn dữ liệu bị hạn chế , bạn không nên sử dụng thông số này. Sau đây là các thuộc tính được hỗ trợ:

sendMethod – [Không bắt buộc, Chuỗi] Chỉ định phương thức cần sử dụng để gửi truy vấn. Chọn một trong các giá trị chuỗi sau:
- 'xhr' – Gửi truy vấn bằng cách sử dụng XmlHttpRequest.
- "scriptInjection" – Gửi truy vấn bằng tính năng chèn tập lệnh.
- 'makeRequest' – [Chỉ dành cho các tiện ích không còn dùng nữa] Gửi truy vấn bằng phương thức makeRequest() API. Nếu được chỉ định, bạn cũng nên chỉ định makeRequestParams.
- 'auto' – Sử dụng phương thức do tham số URL tqrt chỉ định từ URL nguồn dữ liệu. tqrt có thể có các giá trị sau: "xhr", "scriptInjection" hoặc "makeRequest". Nếu tqrt bị thiếu hoặc có giá trị không hợp lệ, thì giá trị mặc định sẽ là "xhr" cho các yêu cầu trên cùng một miền và "scriptInjection" cho các yêu cầu trên nhiều miền.
makeRequestParams – [Object] Bản đồ các tham số cho truy vấn makeRequest(). Chỉ dùng và bắt buộc nếu sendMethod là "makeRequest".

Phương thức

Phương thức	Giá trị trả về	Nội dung mô tả
`abort()`	Không có	Dừng gửi truy vấn tự động được bắt đầu bằng `setRefreshInterval()`.
`setRefreshInterval(seconds)`	Không có	Thiết lập truy vấn để tự động gọi phương thức `send` với mỗi thời lượng được chỉ định (số giây), bắt đầu từ lệnh gọi rõ ràng đầu tiên đến `send`. `seconds` là một số lớn hơn hoặc bằng 0. Nếu sử dụng phương thức này, bạn nên gọi trước khi gọi phương thức `send`. Huỷ phương thức này bằng cách gọi lại phương thức bằng 0 (giá trị mặc định) hoặc gọi `abort()`.
`setTimeout(seconds)`	Không có	Đặt số giây chờ nguồn dữ liệu phản hồi trước khi đưa ra lỗi hết thời gian chờ. `seconds` là một số lớn hơn 0. Thời gian chờ mặc định là 30 giây. Bạn nên gọi phương thức này (nếu được sử dụng) trước khi gọi phương thức `send`.
`setQuery(string)`	Không có	Đặt chuỗi truy vấn. Giá trị của tham số `string` phải là một truy vấn hợp lệ. Bạn nên gọi phương thức này (nếu được sử dụng) trước khi gọi phương thức `send`. Tìm hiểu thêm về Ngôn ngữ truy vấn.
`send(callback)`	Không có	Gửi truy vấn đến nguồn dữ liệu. `callback` phải là một hàm sẽ được gọi khi nguồn dữ liệu phản hồi. Hàm callback sẽ nhận được một tham số duy nhất thuộc loại google.visualization.QueryResponse.

QueryResponse

Biểu thị một phản hồi của một lượt thực thi truy vấn đã nhận được từ nguồn dữ liệu. Một thực thể của lớp này được truyền dưới dạng đối số cho hàm callback đã được đặt khi gọi Query.send.

Phương thức

Phương thức	Giá trị trả về	Nội dung mô tả
`getDataTable()`	DataTable	Trả về bảng dữ liệu do nguồn dữ liệu trả về. Trả về `null` nếu thực thi truy vấn không thành công và không có dữ liệu nào được trả về.
`getDetailedMessage()`	Chuỗi	Trả về thông báo lỗi chi tiết cho những truy vấn không thành công. Nếu thực thi truy vấn thành công, phương thức này sẽ trả về một chuỗi trống. Thông báo được trả về là một thông báo dành cho nhà phát triển và có thể chứa thông tin kỹ thuật, ví dụ: "Cột {salary} không tồn tại".
`getMessage()`	Chuỗi	Trả về một thông báo lỗi ngắn cho những truy vấn không thành công. Nếu thực thi truy vấn thành công, phương thức này sẽ trả về một chuỗi trống. Thông báo trả về là một thông báo ngắn dành cho người dùng cuối, ví dụ: "Truy vấn không hợp lệ" hoặc "Quyền truy cập bị từ chối".
`getReasons()`	Mảng chuỗi	Trả về một mảng gồm 0 phần tử khác. Mỗi mục là một chuỗi ngắn chứa mã lỗi hoặc mã cảnh báo được nêu ra trong khi thực thi truy vấn. Các mã có thể dùng: `access_denied` Người dùng không có quyền truy cập vào nguồn dữ liệu. `invalid_query` Truy vấn được chỉ định có lỗi cú pháp. `data_truncated` Một hoặc nhiều hàng dữ liệu khớp với lựa chọn cụm từ tìm kiếm không được trả về do giới hạn về kích thước đầu ra. (cảnh báo). `timeout` Truy vấn không phản hồi trong thời gian dự kiến.
`hasWarning()`	Boolean	Trả về `true` nếu quá trình thực thi truy vấn có bất kỳ thông báo cảnh báo nào.
`isError()`	Boolean	Trả về `true` nếu thực thi truy vấn không thành công và phản hồi không chứa bảng dữ liệu nào. Trả về <false> nếu thực thi truy vấn thành công và phản hồi có chứa bảng dữ liệu.

Hiển thị lỗi

API này cung cấp một số chức năng giúp bạn hiển thị thông báo lỗi tuỳ chỉnh cho người dùng. Để sử dụng các hàm này, hãy cung cấp một phần tử vùng chứa trên trang (thường là <div>), trong đó API sẽ vẽ một thông báo lỗi có định dạng. Vùng chứa này có thể là phần tử vùng chứa hình ảnh trực quan hoặc vùng chứa chỉ dành cho lỗi. Nếu bạn chỉ định phần tử chứa hình ảnh trực quan, thông báo lỗi sẽ xuất hiện ở phía trên hình ảnh trực quan. Sau đó, gọi hàm thích hợp bên dưới để hiển thị hoặc xoá thông báo lỗi.

Tất cả hàm đều là hàm tĩnh trong không gian tên google.visualization.errors.

Nhiều hình ảnh trực quan có thể gửi một sự kiện lỗi; hãy xem sự kiện lỗi bên dưới để tìm hiểu thêm về sự kiện đó.

Bạn có thể xem ví dụ về lỗi tuỳ chỉnh trong Ví dụ về Trình bao bọc truy vấn.

Hàm	Giá trị trả về	Nội dung mô tả
`addError(container, message, opt_detailedMessage, opt_options)`	Giá trị mã chuỗi xác định đối tượng lỗi được tạo. Đây là một giá trị duy nhất trên trang và có thể dùng để xoá lỗi hoặc tìm phần tử chứa lỗi.	Thêm một khối hiển thị lỗi vào phần tử trang được chỉ định, với văn bản và định dạng đã chỉ định. vùng chứa – Phần tử DOM vào để chèn thông báo lỗi. Nếu không tìm thấy vùng chứa, hàm sẽ báo lỗi JavaScript. tin nhắn – Thông báo dạng chuỗi cần hiển thị. opt_detailedMessage – Một chuỗi thông báo chi tiết không bắt buộc. Theo mặc định, đây là văn bản di chuột, nhưng bạn có thể thay đổi trong thuộc tính opt_options.showInToolTip được mô tả bên dưới. opt_options – Một đối tượng không bắt buộc có các thuộc tính đặt nhiều tuỳ chọn hiển thị cho thông báo. Các tuỳ chọn sau được hỗ trợ: showInTooltip – Một giá trị boolean, trong đó giá trị true chỉ hiển thị thông báo chi tiết dưới dạng văn bản chú thích và false hiển thị thông báo chi tiết trong phần nội dung vùng chứa sau thông báo ngắn. Giá trị mặc định là true. type – Chuỗi mô tả loại lỗi, xác định kiểu css nào sẽ được áp dụng cho thông báo này. Các giá trị được hỗ trợ là "error" và "warning". Giá trị mặc định là 'error'. style – Chuỗi kiểu cho thông báo lỗi. Kiểu này sẽ ghi đè mọi kiểu áp dụng cho loại cảnh báo (opt_options.type). Ví dụ: `'background-color: #33ff99; padding: 2px;'` Giá trị mặc định là một chuỗi trống. reXoá – Một giá trị boolean, trong đó true có nghĩa là người dùng có thể đóng thông báo bằng cách nhấp chuột. Giá trị mặc định là sai.
`addErrorFromQueryResponse(container, response)`	Giá trị mã chuỗi xác định đối tượng lỗi được tạo, hoặc rỗng nếu phản hồi không chỉ ra lỗi. Đây là một giá trị duy nhất trên trang và có thể dùng để xoá lỗi hoặc tìm phần tử chứa lỗi.	Truyền vùng chứa nội dung phản hồi truy vấn và thông báo lỗi đến phương thức này: nếu nội dung phản hồi truy vấn chỉ ra lỗi truy vấn, hãy hiển thị thông báo lỗi trong phần tử trang được chỉ định. Nếu phản hồi truy vấn là rỗng, thì phương thức này sẽ gửi ra lỗi JavaScript. Chuyển QueryResponse nhận được trong trình xử lý truy vấn đến thông báo này để hiển thị lỗi. Thao tác này cũng sẽ đặt kiểu màn hình phù hợp với loại (lỗi hoặc cảnh báo, tương tự như `addError(opt_options.type)`) vùng chứa – Phần tử DOM vào để chèn thông báo lỗi. Nếu không tìm thấy vùng chứa, hàm sẽ báo lỗi JavaScript. response – Đối tượng QueryResponse mà trình xử lý truy vấn của bạn nhận được để phản hồi một truy vấn. Nếu giá trị này là rỗng, phương thức này sẽ gửi ra lỗi JavaScript.
`removeError(id)`	Boolean: true nếu lỗi đã bị xoá; false nếu không có lỗi.	Xoá lỗi do mã nhận dạng chỉ định khỏi trang. id – Mã chuỗi của lỗi được tạo bằng `addError()` hoặc `addErrorFromQueryResponse()`.
`removeAll(container)`	Không có	Xoá tất cả các khối lỗi khỏi một vùng chứa đã chỉ định. Nếu vùng chứa được chỉ định không tồn tại, thì thao tác này sẽ báo lỗi. vùng chứa – Phần tử DOM chứa các chuỗi lỗi cần xoá. Nếu không tìm thấy vùng chứa, hàm sẽ gửi một lỗi JavaScript.
`getContainer(errorId)`	Xử lý một phần tử DOM chứa lỗi được chỉ định hoặc rỗng nếu không tìm thấy lỗi.	Truy xuất một ô điều khiển đến phần tử vùng chứa chứa lỗi do errorID chỉ định. errorId – Mã chuỗi của lỗi được tạo bằng `addError()` hoặc `addErrorFromQueryResponse()`.

Sự kiện

Hầu hết các hình ảnh trực quan đều kích hoạt các sự kiện để cho biết có điều gì đó đã xảy ra. Là người dùng biểu đồ, bạn thường muốn theo dõi các sự kiện này. Nếu tự mã hoá hình ảnh của riêng mình, bạn cũng nên tự kích hoạt các sự kiện như vậy.

Các phương thức sau cho phép nhà phát triển theo dõi sự kiện, xoá các trình xử lý sự kiện hiện có hoặc kích hoạt sự kiện từ bên trong một hình ảnh trực quan.

google.visualization.events.addListener() và google.visualization.events.addOneTimeListener() theo dõi các sự kiện.
google.visualization.events.removeListener() xoá một trình nghe hiện có
google.visualization.events.removeAllListeners() xoá tất cả trình nghe của một biểu đồ cụ thể
google.visualization.events.trigger() sẽ kích hoạt một sự kiện.

addListener()

Hãy gọi phương thức này để đăng ký nhận các sự kiện được kích hoạt bởi một hình ảnh trực quan được lưu trữ trên trang của bạn. Bạn nên ghi lại những đối số sự kiện (nếu có) sẽ được chuyển đến hàm xử lý.

google.visualization.events.addListener(source_visualization,
  event_name, handling_function)

source_visualization: Tên người dùng đối với thực thể của hình ảnh nguồn.
event_name: Tên chuỗi của sự kiện cần theo dõi. Một hình ảnh trực quan phải ghi lại các sự kiện mà nó gửi.
handling_function: Tên của hàm JavaScript cục bộ cần gọi khi source_Visualization kích hoạt sự kiện event_name. Hàm xử lý sẽ được truyền mọi đối số sự kiện dưới dạng tham số.

Trả về

Một trình xử lý trình nghe cho trình nghe mới. Sau này, bạn có thể sử dụng trình xử lý này để xoá trình nghe này nếu cần bằng cách gọi google.visualization.events.removeListener().

Ví dụ

Dưới đây là ví dụ về cách đăng ký nhận sự kiện lựa chọn

var table = new google.visualization.Table(document.getElementById('table_div'));
table.draw(data, options);

google.visualization.events.addListener(table, 'select', selectHandler);

function selectHandler() {
  alert('A table row was selected');
}

addOneTimeListener()

API này giống với addListener(), nhưng dành cho các sự kiện chỉ được nghe một lần. Các lần gửi sự kiện tiếp theo sẽ không gọi hàm xử lý.

Một ví dụ về trường hợp hữu ích: mỗi lần vẽ sẽ khiến một sự kiện ready được gửi. Nếu chỉ muốn ready đầu tiên thực thi mã, bạn sẽ cần addOneTimeListener thay vì addListener.

removeListener()

Hãy gọi phương thức này để huỷ đăng ký một trình nghe sự kiện hiện có.

google.visualization.events.removeListener(listener_handler)

listener_handler: Trình xử lý trình nghe cần xoá, do google.visualization.events.addListener() trả về.

removeAllListeners()

Gọi phương thức này để huỷ đăng ký tất cả trình nghe sự kiện của một phiên bản hình ảnh cụ thể.

google.visualization.events.removeAllListeners(source_visualization)

source_visualization: Xử lý của phiên bản hình ảnh nguồn mà bạn phải xoá tất cả trình nghe sự kiện.

trigger()

Được trình triển khai trực quan gọi. Gọi phương thức này từ hình ảnh trực quan của bạn để kích hoạt một sự kiện với tên và tập hợp giá trị tuỳ ý.

google.visualization.events.trigger(source_visualization, event_name,
  event_args)

source_visualization: Tên người dùng cho thực thể của hình ảnh nguồn. Nếu đang gọi hàm này từ trong một phương thức được xác định bằng hình ảnh gửi đi, bạn chỉ cần truyền từ khoá this.
event_name: Tên chuỗi để gọi sự kiện. Bạn có thể chọn bất kỳ giá trị chuỗi nào mà bạn muốn.
event_args: [không bắt buộc] Bản đồ các cặp tên/giá trị cần truyền đến phương thức nhận. Ví dụ: {message: "Xin chào!", điểm số: 10, tên: "Fred"}. Bạn có thể truyền giá trị rỗng nếu không cần sự kiện nào; trình thu nhận phải được chuẩn bị để chấp nhận giá trị rỗng cho thông số này.

Ví dụ

Dưới đây là một ví dụ về hình ảnh trực quan hoá gửi một phương thức có tên là "select" (chọn) khi phương thức nhấp của phương thức đó được gọi. Hàm này không trả về bất kỳ giá trị nào.

MyVisualization.prototype.onclick = function(rowIndex) {
  this.highlightRow(this.selectedRow, false); // Clear previous selection
  this.highlightRow(rowIndex, true); // Highlight new selection

  // Save the selected row index in case getSelection is called.
  this.selectedRow = rowIndex;

  // Trigger a select event.
  google.visualization.events.trigger(this, 'select', null);
}

Phương pháp và thuộc tính của hình ảnh trực quan chuẩn

Mỗi hình ảnh trực quan phải hiển thị tập hợp các phương thức và thuộc tính bắt buộc và không bắt buộc sau đây. Tuy nhiên, xin lưu ý rằng không có quy trình kiểm tra kiểu để thực thi các tiêu chuẩn này. Vì vậy, bạn nên đọc tài liệu về từng hình ảnh trực quan.

Hàm khởi tạo
draw()
getAction() [không bắt buộc]
getSelection() [không bắt buộc]
removeAction() [không bắt buộc]
setAction() [không bắt buộc]
setSelection() [không bắt buộc]

Lưu ý: Những phương thức này nằm trong không gian tên của hình ảnh trực quan, không phải trong không gian tên google.Visualization.

Hàm khởi tạo

Hàm khởi tạo phải có tên của lớp hình ảnh và trả về một thực thể của lớp đó.

visualization_class_name(dom_element)

dom_element: Con trỏ trỏ đến một phần tử DOM nơi hình ảnh cần được nhúng.

Ví dụ

var org = new google.visualization.OrgChart(document.getElementById('org_div'));

draw()

Vẽ hình ảnh trực quan trên trang. Hành động này có thể là tìm nạp một hình ảnh từ máy chủ hoặc tạo hình ảnh trên trang bằng mã hình ảnh được liên kết. Bạn nên gọi phương thức này mỗi khi dữ liệu hoặc tuỳ chọn thay đổi. Đối tượng phải được vẽ bên trong phần tử DOM được truyền vào hàm khởi tạo.

draw(data[, options])

dữ liệu: DataTable hoặc DataView lưu giữ dữ liệu cần sử dụng để vẽ biểu đồ. Không có phương pháp chuẩn để trích xuất DataTable từ biểu đồ.
tuỳ chọn: [Không bắt buộc] Liên kết các cặp tên/giá trị của các tuỳ chọn tuỳ chỉnh. Ví dụ như chiều cao và chiều rộng, màu nền và chú thích. Tài liệu về hình ảnh sẽ liệt kê các tuỳ chọn có sẵn và sẽ hỗ trợ các tuỳ chọn mặc định nếu bạn không chỉ định tham số này. Bạn có thể sử dụng cú pháp đối tượng JavaScript bằng chữ để truyền vào một ánh xạ tuỳ chọn: ví dụ: {x:100, y:200, title:'An Example'}

Ví dụ

chart.draw(myData, {width: 400, height: 240, is3D: true, title: 'My Daily Activities'});

getAction()

Bạn có thể tuỳ ý hiển thị thông tin này bằng những hình ảnh trực quan có phần chú thích và cho phép thao tác trong phần chú thích.

Trả về đối tượng hành động trong chú giải công cụ với actionID được yêu cầu.

Ví dụ:

// Returns the action object with the ID 'alertAction'.
chart.getAction('alertAction');

getSelection()

Phần tử này có thể xuất hiện (không bắt buộc) bằng những hình ảnh trực quan cho phép bạn truy cập vào dữ liệu hiện được chọn trong hình ảnh đồ hoạ.

selection_array getSelection()

Trả về

selection_array Một mảng gồm các đối tượng được chọn, mỗi đối tượng mô tả một phần tử dữ liệu trong bảng cơ bản dùng để tạo hình ảnh trực quan (DataView hoặc DataTable). Mỗi đối tượng có các thuộc tính row và/hoặc column, với chỉ mục của hàng và/hoặc cột của mục đã chọn trong DataTable cơ bản. Nếu thuộc tính row là rỗng, thì lựa chọn sẽ là một cột; nếu thuộc tính column là rỗng thì lựa chọn sẽ là một hàng; nếu cả hai đều không rỗng, thì đó là một mục dữ liệu cụ thể. Bạn có thể gọi phương thức DataTable.getValue() để lấy giá trị của mục đã chọn. Mảng đã truy xuất có thể được truyền vào setSelection().

Ví dụ

function myClickHandler(){
  var selection = myVis.getSelection();
  var message = '';

  for (var i = 0; i < selection.length; i++) {
    var item = selection[i];
    if (item.row != null && item.column != null) {
      message += '{row:' + item.row + ',column:' + item.column + '}';
    } else if (item.row != null) {
      message += '{row:' + item.row + '}';
    } else if (item.column != null) {
      message += '{column:' + item.column + '}';
    }
  }
  if (message == '') {
    message = 'nothing';
  }
  alert('You selected ' + message);
}

removeAction()

Bạn có thể tuỳ ý hiển thị thông tin này bằng những hình ảnh trực quan có phần chú thích và cho phép thao tác trong phần chú thích.

Xoá đối tượng hành động trong chú giải công cụ có actionID được yêu cầu khỏi biểu đồ của bạn.

Ví dụ:

// Removes an action from chart with the ID of 'alertAction'.
chart.removeAction('alertAction');

setAction()

Bạn có thể tuỳ ý hiển thị thông tin này bằng những hình ảnh trực quan có phần chú thích và cho phép thao tác trong phần chú thích. Tính năng này chỉ hoạt động với các biểu đồ chính (thanh, cột, đường, vùng, tán xạ, kết hợp, bong bóng, hình tròn, bánh vòng, hình nến, biểu đồ tần suất, vùng chia bậc).

Đặt một hành động trong chú giải công cụ cần thực thi khi người dùng nhấp vào văn bản hành động.

setAction(action object)

Phương thức setAction lấy một đối tượng làm tham số hành động. Đối tượng này phải chỉ định 3 thuộc tính: id – mã nhận dạng của hành động đang được đặt, text – văn bản sẽ xuất hiện trong phần chú thích cho hành động và action – hàm sẽ được chạy khi người dùng nhấp vào văn bản hành động.

Bạn phải đặt mọi thao tác trong chú thích công cụ trước khi gọi phương thức draw() của biểu đồ.

Ví dụ:

// Sets a tooltip action which will pop an alert box on the screen when triggered.
chart.setAction({
  id: 'alertAction',
  text: 'Trigger Alert',
  action: function() {
    alert('You have triggered an alert');
  }
});

Phương thức setAction cũng có thể xác định thêm hai thuộc tính: visible và enabled. Những thuộc tính này phải là các hàm trả về giá trị boolean cho biết liệu hành động trong chú giải công cụ có hiển thị và/hoặc được bật hay không.

Ví dụ:

// The visible/enabled functions can contain any logic to determine their state
// as long as they return boolean values.
chart.setAction({
  id: 'alertAction',
  text: 'Trigger Alert',
  action: function() {
    alert('You have triggered an alert');
  },
  visible: function() {
    return true;
  },
  enabled: function() {
    return true;
  }
});

setSelection()

Chọn một mục dữ liệu trong hình ảnh trực quan (ví dụ: một điểm trong biểu đồ vùng hoặc thanh trong biểu đồ thanh) nếu muốn. Khi phương thức này được gọi, hình ảnh trực quan sẽ cho biết lựa chọn mới là gì một cách trực quan. Việc triển khai setSelection() không nên kích hoạt sự kiện "chọn". Hình ảnh trực quan có thể bỏ qua một phần của vùng chọn. Ví dụ: một bảng chỉ có thể hiển thị những hàng được chọn có thể bỏ qua các phần tử ô hoặc cột trong quá trình triển khai setSelection(), hoặc có thể chọn toàn bộ hàng.

Mỗi lần phương thức này được gọi, tất cả các mục đã chọn sẽ được bỏ chọn và danh sách lựa chọn mới được truyền vào sẽ được áp dụng. Không có cách thức rõ ràng để bỏ chọn từng mục riêng lẻ; để bỏ chọn từng mục riêng lẻ, hãy gọi setSelection() với các mục cần giữ nguyên; để bỏ chọn tất cả phần tử, hãy gọi setSelection(), setSelection(null) hoặc setSelection([]).

setSelection(selection_array)

selection_array: Một mảng đối tượng, mỗi đối tượng có một thuộc tính hàng và/hoặc cột dạng số. row và column là số hàng hoặc cột dựa trên 0 của một mục trong bảng dữ liệu cần chọn. Để chọn toàn bộ cột, hãy đặt row thành rỗng; để chọn toàn bộ hàng, hãy đặt column thành rỗng. Ví dụ: setSelection([{row:0,column:1},{row:1, column:null}]) chọn ô tại vị trí (0,1) và toàn bộ hàng 1.

Các loại phương thức tĩnh

Phần này chứa nhiều phương thức hữu ích được hiển thị trong không gian tên google.visualization.

arrayToDataTable()

Phương thức này nhận một mảng hai chiều và chuyển đổi mảng đó thành một DataTable.

Loại dữ liệu cột được xác định tự động bởi dữ liệu được cung cấp. Bạn cũng có thể chỉ định các loại dữ liệu cột bằng ký hiệu giá trị cố định đối tượng ở hàng đầu tiên (hàng tiêu đề cột) của mảng (ví dụ: {label: 'Start Date', type: 'date'}). Bạn cũng có thể sử dụng Vai trò dữ liệu không bắt buộc, nhưng phải xác định rõ ràng các vai trò này bằng ký hiệu bằng chữ đối tượng. Ký hiệu bằng chữ của đối tượng cũng có thể được dùng cho bất kỳ ô nào, cho phép bạn xác định Đối tượng ô).

Cú pháp

google.visualization.arrayToDataTable(twoDArray, opt_firstRowIsData)

twoDArray: Một mảng hai chiều, trong đó mỗi hàng đại diện cho một hàng trong bảng dữ liệu. Nếu opt_firstRowIsData là false (mặc định), thì hàng đầu tiên sẽ được hiểu là nhãn tiêu đề. Loại dữ liệu của mỗi cột được diễn giải tự động từ dữ liệu đã cho. Nếu một ô không có giá trị, hãy chỉ định giá trị rỗng hoặc trống nếu thích hợp.
opt_firstRowIsData: Liệu hàng đầu tiên có xác định hàng tiêu đề hay không. Nếu đúng, tất cả các hàng được giả định là dữ liệu. Nếu giá trị này là false, thì hàng đầu tiên được giả định là hàng tiêu đề và các giá trị sẽ được chỉ định làm nhãn cột. Giá trị mặc định là false.

Trả về

Một DataTable mới.

Ví dụ

Mã sau đây minh hoạ 3 cách tạo cùng một đối tượng DataTable:

// Version 1: arrayToDataTable method
var data2 = google.visualization.arrayToDataTable([
  [{label: 'Country', type: 'string'},
   {label: 'Population', type: 'number'},
   {label: 'Area', type: 'number'},
   {type: 'string', role: 'annotation'}],
  ['CN', 1324, 9640821, 'Annotated'],
  ['IN', 1133, 3287263, 'Annotated'],
  ['US', 304, 9629091, 'Annotated'],
  ['ID', 232, 1904569, 'Annotated'],
  ['BR', 187, 8514877, 'Annotated']
]);

// Version 2: DataTable.addRows
var data3 = new google.visualization.DataTable();
data3.addColumn('string','Country');
data3.addColumn('number','Population');
data3.addColumn('number','Area');
data3.addRows([
  ['CN', 1324, 9640821],
  ['IN', 1133, 3287263],
  ['US', 304, 9629091],
  ['ID', 232, 1904569],
  ['BR', 187, 8514877]
]);

// Version 3: DataTable.setValue
var data = new google.visualization.DataTable();
data.addColumn('string','Country');
data.addColumn('number', 'Population');
data.addColumn('number', 'Area');
data.addRows(5);
data.setValue(0, 0, 'CN');
data.setValue(0, 1, 1324);
data.setValue(0, 2, 9640821);
data.setValue(1, 0, 'IN');
data.setValue(1, 1, 1133);
data.setValue(1, 2, 3287263);
data.setValue(2, 0, 'US');
data.setValue(2, 1, 304);
data.setValue(2, 2, 9629091);
data.setValue(3, 0, 'ID');
data.setValue(3, 1, 232);
data.setValue(3, 2, 1904569);
data.setValue(4, 0, 'BR');
data.setValue(4, 1, 187);
data.setValue(4, 2, 8514877);

drawChart()

Phương thức này tạo biểu đồ trong một lệnh gọi. Ưu điểm của phương thức này là cần ít mã hơn một chút. Bạn có thể chuyển đổi tuần tự và lưu hình ảnh trực quan dưới dạng chuỗi văn bản để sử dụng lại. Phương thức này không trả về một ô điều khiển cho biểu đồ đã tạo, vì vậy, bạn không thể chỉ định trình nghe phương thức để nắm bắt các sự kiện trong biểu đồ.

Cú pháp

google.visualization.drawChart(chart_JSON_or_object)

chart_JSON_or_object: Một chuỗi giá trị cố định JSON hoặc một đối tượng JavaScript, với các thuộc tính sau (phân biệt chữ hoa chữ thường):

Tài sản	Loại	Bắt buộc	Mặc định	Nội dung mô tả
chartType	Chuỗi	Bắt buộc	không có	Tên lớp của hình ảnh trực quan. Bạn có thể bỏ qua tên gói `google.visualization` cho các biểu đồ của Google. Nếu thư viện hình ảnh thích hợp chưa được tải, thì phương thức này sẽ tải thư viện cho bạn nếu đây là hình ảnh của Google; bạn phải tải hình ảnh trực quan của bên thứ ba một cách rõ ràng. Ví dụ: `Table`, `PieChart`, `example.com.CrazyChart`.
containerId	Chuỗi	Bắt buộc	không có	Mã của phần tử DOM trên trang của bạn sẽ lưu trữ hình ảnh trực quan.
tùy chọn	Đối tượng	Không bắt buộc	không có	Một đối tượng mô tả các lựa chọn cho hình ảnh trực quan. Bạn có thể sử dụng ký hiệu cố định JavaScript hoặc cung cấp tên người dùng cho đối tượng. Ví dụ: `"options": {"width": 400, "height": 240, "is3D": true, "title": "Company Performance"}`
dataTable	Đối tượng	Không bắt buộc	Không có	`DataTable` dùng để điền hình ảnh trực quan. Đây có thể là một chuỗi JSON cố định đại diện cho một DataTable (như mô tả ở trên), hoặc một tên người dùng cho đối tượng `google.visualization.DataTable` được điền sẵn, hoặc một mảng 2 chiều như mảng được `arrayToDataTable(opt_firstRowIsData=false)` chấp nhận. Bạn phải chỉ định thuộc tính này hoặc thuộc tính `dataSourceUrl`.
dataSourceUrl	Chuỗi	Không bắt buộc	Không có	Một truy vấn nguồn dữ liệu để điền dữ liệu biểu đồ (ví dụ: Bảng tính Google). Bạn phải chỉ định thuộc tính này hoặc thuộc tính `dataTable`.
query	Chuỗi	Không bắt buộc	Không có	Nếu chỉ định `dataSourceUrl`, bạn có thể tuỳ ý chỉ định một chuỗi truy vấn giống SQL bằng cách sử dụng Ngôn ngữ truy vấn trực quan hoá để lọc hoặc thao tác với dữ liệu.
refreshInterval	Số	Không bắt buộc	Không có	Tần suất (tính bằng giây) mà hình ảnh trực quan sẽ làm mới nguồn truy vấn. Chỉ sử dụng thuộc tính này khi chỉ định `dataSourceUrl`.
xem	Đối tượng HOẶC mảng	Không bắt buộc	Không có	Đặt một đối tượng khởi chạy `DataView`, đóng vai trò là bộ lọc trên dữ liệu cơ bản, như được xác định bằng tham số `dataTable` hoặc `dataSourceUrl`. Bạn có thể truyền vào một chuỗi hoặc đối tượng khởi tạo `DataView`, chẳng hạn như đối tượng do `dataview.toJSON()` trả về. Ví dụ: `"view": {"columns": [1, 2]}` Bạn cũng có thể truyền một mảng các đối tượng khởi tạo `DataView`. Trong trường hợp đó, `DataView` đầu tiên trong mảng sẽ được áp dụng cho dữ liệu cơ bản để tạo bảng dữ liệu mới và `DataView` thứ hai được áp dụng cho bảng dữ liệu từ việc áp dụng `DataView` đầu tiên, v.v.

Ví dụ

Tạo biểu đồ bảng dựa trên nguồn dữ liệu bảng tính và bao gồm truy vấn SELECT A,D WHERE D > 100 ORDER BY D

<script type="text/javascript">
  google.charts.load('current');  // Note: No need to specify chart packages.
  function drawVisualization() {
    google.visualization.drawChart({
      "containerId": "visualization_div",
      "dataSourceUrl": "https://spreadsheets.google.com/a/google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1",
      "query":"SELECT A,D WHERE D > 100 ORDER BY D",
      "refreshInterval": 5,
      "chartType": "Table",
      "options": {
        "alternatingRowStyle": true,
        "showRowNumber" : true
      }
   });
 }
google.charts.setOnLoadCallback(drawVisualization);
</script>

Ví dụ tiếp theo sẽ tạo cùng một bảng nhưng tạo một DataTable cục bộ:

<script type='text/javascript'>
  google.charts.load('current');
  function drawVisualization() {
    var dataTable = [
      ["Country", "Population Density"],
      ["Indonesia", 117],
      ["China", 137],
      ["Nigeria", 142],
      ["Pakistan", 198],
      ["India", 336],
      ["Japan", 339],
      ["Bangladesh", 1045]
    ];
    google.visualization.drawChart({
      "containerId": "visualization_div",
      "dataTable": dataTable,
      "refreshInterval": 5,
      "chartType": "Table",
      "options": {
        "alternatingRowStyle": true,
        "showRowNumber" : true,
      }
    });
  }
  google.charts.setOnLoadCallback(drawVisualization);
</script>

Ví dụ này chuyển một chuỗi JSON biểu diễn biểu đồ mà bạn có thể đã tải từ một tệp:

<script type="text/javascript">
  google.charts.load('current');
  var myStoredString = '{"containerId": "visualization_div",' +
    '"dataSourceUrl": "https://spreadsheets.google.com/a/google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1",' +
    '"query":"SELECT A,D WHERE D > 100 ORDER BY D",' +
    '"refreshInterval": 5,' +
    '"chartType": "Table",' +
    '"options": {' +
    '   "alternatingRowStyle": true,' +
    '   "showRowNumber" : true' +
    '}' +
  '}';
  function drawVisualization() {
    google.visualization.drawChart(myStoredString);
  }
  google.charts.setOnLoadCallback(drawVisualization);
</script>

drawToolbar()

Đây là hàm khởi tạo cho phần tử trên thanh công cụ có thể đính kèm vào nhiều hình ảnh trực quan. Thanh công cụ này cho phép người dùng xuất dữ liệu của hình ảnh trực quan sang nhiều định dạng hoặc cung cấp một phiên bản có thể nhúng của hình ảnh trực quan để sử dụng ở nhiều nơi. Hãy xem trang thanh công cụ để biết thêm thông tin và xem ví dụ về mã.