Tài liệu tham khảo API Hình ảnh của Google

Trang này liệt kê các đối tượng mà API Hình ảnh của Google cung cấp, cũng như các phương thức tiêu chuẩn mà mọi hình ảnh trực quan đều hiển thị.

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

1. Lớp DataTable
2. Lớp DataView
3. Lớp ChartWrapper
4. Lớp ChartEditor
5. Phương pháp thao túng dữ liệu
   1. group()
   2. join()
6. Định dạng
   1. Định dạng mũi tên
   2. Định dạng thanh
   3. ColorFormat (Định dạng màu)
   4. Định dạng ngày
   5. NumberFormat (Số định dạng số)
   6. PatternFormat
7. Lớp tiện ích trợ giúp
8. Các lớp truy vấn
   1. Cụm từ tìm kiếm
   2. Phản hồi truy vấn
9. Lớp hiển thị lỗi
10. Sự kiện
    1. google.Visualization.events.addListener()
    2. google.Visualization.events.addOneTimeListener()
    3. google.Visualization.events.removeListener()
    4. google.Visualization.events.removeAllListeners()
    5. google.Visualization.events.trigger()
11. Thuộc tính và phương thức trực quan hoá tiêu chuẩn
    1. Hàm dựng
    2. draw()
    3. getAction()
    4. getSelection()
    5. removeAction()
    6. setAction()
    7. setSelection()
12. Các phương thức tĩnh
    1. mảngToDataTable()
    2. drawChart()
    3. drawToolbar()

Lưu ý về mảng

Một số trình duyệt không xử lý đúng cách dấu phẩy cuối trong mảng JavaScript, vì vậy, bạn không nên sử dụng chúng. Có thể sử dụng 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

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

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

Ngoài ra, bạn có thể chỉ định thuộc tính tuỳ chỉnh (cặp tên/giá trị) cho bất kỳ ô, hàng, cột 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 về bảng hỗ trợ một thuộc tính ô có tên là "style" (kiểu), cho phép bạn gán một chuỗi kiểu CSS cùng dòng cho ô hiển thị trong bảng. Hình ảnh phải mô tả trong tài liệu của mình bất kỳ thuộc tính tuỳ chỉnh nào mà hình ảnh hỗ trợ.

Xem thêm: QueryResponse.getDataTable

Hàm dựng

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 đối tượng JavaScript chứa dữ liệu dùng để khởi tạo bảng. Cấu trúc của đối tượng cố định JavaScript được mô tả tại đây. Nếu bạn không cung cấp thông số này, một bảng dữ liệu trống mới 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 có dây được sử dụng. Tính năng này chỉ được trình triển khai Nguồn dữ liệu của Công cụ biểu đồ sử dụng. Phiên bản hiện tại là 0.6.

Chi tiết

Đối tượng DataTable được dùng để lưu giữ dữ liệu được truyền vào một hình ảnh trực quan. DataTable là 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 chỉ số mô tả bao gồm loại dữ liệu tương ứng, một nhãn cho cột đó (có thể hiển thị bằng hình ảnh) và một mã có thể dùng để tham chiếu đến một cột cụ thể (thay vì sử dụng các chỉ mục cột). Đối tượng DataTable cũng hỗ trợ bản đồ các thuộc tính tuỳ ý được gán cho một giá trị cụ thể, một hàng, một cột hoặc toàn bộ DataTable. Hình ảnh trực quan có thể dùng những hình ảnh này để hỗ trợ các tính năng bổ sung; ví dụ: Hình ảnh trực quan về bảng sử dụng các thuộc tính tuỳ chỉnh để cho phép bạn chỉ định tên hoặc kiểu lớp 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 mà cột chỉ định. Các ô có thể chọn phiên bản "đã đị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ị bằ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 được định dạng để hiển thị, nhưng sẽ luôn sử dụng chính dữ liệu đó cho mọi sắp xếp hoặc tính toán mà nó thực hiện (chẳng hạn như xác định vị trí đặt biểu đồ trên biểu đồ). Một ví dụ có thể là gán các giá trị "thấp" "trung bình" và "cao" dưới dạng các 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ác cột bằng cách gọi phương thức addColumn(). Cũng có các phương thức xoá cho hàng và cột, nhưng thay vì xoá hàng hoặc cột, hãy cân nhắc tạo một DataView là 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 nó được chuyển vào phương thức draw() của hình ảnh, các thay đổi sẽ không thay đổi ngay biểu đồ. Bạn phải gọi lại draw() để phản ánh mọi thay đổi.

Lưu ý: Google Forms không thực hiện bất kỳ quá trình xác thực nào trên 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 một con số mà cột của bạn đang 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ị hợp lý, nhưng sẽ không gắn cờ các lỗi.

Ví dụ

Ví dụ sau minh hoạ cách tạo và điền DataTable bằng một chuỗi ký tự, có 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 trống mới, sau đó điền thủ công dữ liệu đó giống 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 có nên tạo DataTable trong JavaScript hoặc ký hiệu cố định đối tượng không?

Bạn có thể tạo một 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 phương thức addColumn()/addRows() được liệt kê bên dưới hoặc truyền vào một đối tượng cố định JavaScript đã điền để khởi tạo. Cả hai phương thức đều được mô tả dưới đây. Bạn nên dùng dịch vụ 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ã theo cách thủ công. Tốc độ này chậm hơn so với việc sử dụng ký hiệu cố định đối tượng (như mô tả tiếp theo), nhưng trong các bảng nhỏ hơn (chẳng hạn như 1.000 ô), có thể bạn sẽ không nhận thấy nhiều sự khác biệt.
• Việc khai báo trực tiếp đối tượng DataTable bằng cách sử dụng ký hiệu đối tượng đọc nhanh hơn đáng kể trong các bảng lớn. Tuy nhiên, đó có thể là một cú pháp phức tạp để thực hiện được; hãy sử dụng cú pháp này nếu bạn có thể tạo cú pháp cố định đối tượng trong mã, giúp giảm khả năng xảy ra lỗi.

 

Phương pháp

Phương thức	Giá trị trả về	Mô tả
addColumn(type, opt_label, opt_id) HOẶC addColumn(description_object)	Số	Thêm một cột mới vào bảng dữ liệu, rồi 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 cho các giá trị của cột. Loại này có thể là một trong các loại sau: 'string', 'number', 'boolean', 'date', 'datetime', và 'timeofday'. opt_label – [Không bắt buộc] Một chuỗi có nhãn của cột. Nhãn cột thường được hiển thị dưới dạng một phần của hình ảnh, 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 không có giá trị nào được chỉ định, hệ thống sẽ chỉ định một chuỗi trống. 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 không có giá trị nào được chỉ định, hệ thống sẽ gán 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 như 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] Một 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, rồi trả về chỉ mục của hàng mới. opt_cellArray [không bắt buộc] Đối tượng hàng, trong ký hiệu JavaScript, chỉ định dữ liệu cho hàng mới. Nếu không có thông số này, phương thức này sẽ chỉ thêm một hàng mới và trống vào cuối bảng. Thông số này là một mảng các giá trị ô: nếu bạn chỉ muốn chỉ định một giá trị cho một ô, chỉ cần cung cấp giá trị ô (ví dụ: 55 hoặc 'hello'); nếu bạn muốn chỉ định một giá trị và/hoặc các thuộc tính được định dạng cho ô, hãy sử dụng đối tượng ô (ví dụ: {v:55, f:'Fifty-five'}). 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ột mục mảng trống cho một ô 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 các hàng mới vào bảng dữ liệu và trả về chỉ mục của hàng đã 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ả bên dưới. numOrArray – Số hoặc mảng: Số – Một số chỉ định số hàng mới chưa được điền và cần thêm. Mảng – Một mảng các đối tượng hàng dùng để điền sẵn một tập hợp các hàng mới. Mỗi hàng là một đối tượng như được mô tả trong phần addRow(). Sử dụng null hoặc một mục mảng trống cho một ô 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()	Bảng dữ liệu	Trả về 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ừ thuộc tính ô, thuộc tính hàng, thuộc tính bảng và thuộc tính cột, là các bản sao nông; điều này có nghĩa là các thuộc tính gốc không được sao chép bằng tệp đối 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 chỉ định trong bảng cơ bản. Đối với các bảng dữ liệu mà truy vấn truy xuất, giá trị nhận dạng cột sẽ 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 nhất định do chỉ mục cột, mã nhận dạng hoặc nhãn chỉ định nếu có trong bảng này, nếu không thì trả về -1. Khi columnIdentifier là một chuỗi, trước tiên, chuỗi này dùng để tìm cột theo mã nhận dạng, 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 sẵn theo chỉ mục của cột trong bảng cơ bản. Nhãn cột thường xuất hiện trong hình ảnh. Ví dụ: nhãn cột có thể hiển thị dưới dạng tiêu đề cột trong bảng, hoặc dưới dạng nhãn chú giải trong biểu đồ hình tròn. Đối với các bảng dữ liệu mà truy vấn truy xuất, nhãn cột sẽ được đặt theo 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 như phương thức getNumberOfColumns() trả về. Đối với các bảng dữ liệu được truy xuất theo truy vấn, 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 về các 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 cách tham chiếu, vì vậy việc thay đổi 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 không có thuộc tính nào được đặt cho cột được chỉ định. Loại dữ liệu trả về có thể thay đổi, tuỳ thuộc vào tài sản. columnIndex phải là một số lớn hơn hoặc bằng 0 và nhỏ hơn số cột như phương thức getNumberOfColumns() trả về. name là tên thuộc tính dưới dạng chuỗi. Xem thêm: setColumnProperty setColumnProperties
getColumnRange(columnIndex)	Đối tượng	Trả về các giá trị tối thiểu và tối đa của các giá trị trong một cột được chỉ định. Đối tượng được 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 như 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 nhất định được chỉ định trong 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 như phương thức getNumberOfColumns() trả về. Loại cột được trả về có thể là một trong những 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 như phương thức getNumberOfColumns() trả về. Loại đối tượng được trả về giống với loại đối tượng được phương thức getValue trả về.
getFilteredRows(filters)	Mảng đối tượng	Trả về chỉ mục hàng cho những hàng khớp với tất cả bộ lọc đã cho. Các chỉ mục được trả về theo thứ tự tăng dần. Bạn có thể sử dụng kết quả của phương thức này làm dữ liệu đầu vào cho DataView.setRows() để thay đổi tập hợp các hàng được hiển thị trong hình ảnh trực quan. filters – Một mảng các đối tượng mô tả giá trị của ô có thể chấp nhận được. Phương thức chỉ mục sẽ được trả về nếu phương thức này khớp với tất cả bộ lọc đã cho. Mỗi bộ lọc là một đối tượng có một thuộc tính column dạng số. Thuộc tính này 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 yếu tố sau: Một thuộc tính value có giá trị phải được khớp chính xác với ô trong cột đã 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 đang được lọc: minValue – Một giá trị tối thiểu 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ị của ô 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 sẽ được kết hợp với giá trị hoặc bộ lọc phạm vi. Hàm được gọi với giá trị ô, các chỉ mục hàng và cột cũng như bảng dữ liệu. Giá trị trả về sẽ là false nếu hàng bị loại trừ 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 chứa theo thứ tự tăng dần, các chỉ mục của tất cả các hàng mà 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).
getFormattedValue(rowIndex, columnIndex)	Chuỗi	Trả về giá trị đã định dạng của ô tại các chỉ mục hàng và cột đã cho. 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 như phương thức getNumberOfColumns() trả về. Để biết thêm thông tin về các giá trị cột định dạng, vui lòng 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ố hàng trong bảng.
getProperties(rowIndex, columnIndex)	Đối tượng	Trả về bản đồ của tất cả thuộc tính cho ô được chỉ định. Lưu ý rằng đối tượng thuộc tính được trả về bằng cách tham chiếu, vì vậy việc thay đổi 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 được đặt cho ô được chỉ định. Loại dữ liệu trả về có thể thay đổi, tuỳ thuộc vào tài 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 như 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ả thuộc tính cho hàng được chỉ định. Lưu ý rằng đối tượng thuộc tính được trả về bằng cách tham chiếu, vì vậy việc thay đổi 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 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 được đặt cho hàng đã chỉ định. Loại dữ liệu trả về có thể thay đổi, tuỳ thuộc vào tài 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ề. 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 sắp xếp của bảng mà không cần 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 việc sắp xếp theo một số cách, tuỳ thuộc vào loại bạn chuyển vào tham số sortColumns: Một số chỉ định chỉ mục của cột để sắp xếp. Sắp xếp 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 duy nhất chứa số chỉ mục cột để 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, việc sắp xếp theo thứ tự 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ảng số của cột sẽ lập chỉ mục để sắp xếp. Số đầu tiên là cột chính để sắp xếp, cột 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ụ: sortColumns([3, 1, 6]) sẽ sắp xếp theo cột thứ nhất theo thứ tự tăng dần (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 các đối tượng, mỗi đối tượng có số chỉ mục cột để 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 đúng, 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, cột 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, thì 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 theo cột thứ 4 (theo thứ tự tăng dần), sau đó là cột 2 theo thứ tự giảm dần, 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. 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 do sortColumns chỉ định sắp xếp. Bạn có thể sử dụng kết quả đầu ra này làm dữ liệu đầu vào cho DataView.setRows() để nhanh chóng thay đổi tập hợp các hàng được hiển thị trong hình ảnh trực quan. Lưu ý rằng cách sắp xếp được đảm bảo ổn định: điều này có nghĩa là nếu bạn sắp xếp các giá trị bằng nhau của hai hàng, thì cách sắp xếp tương tự sẽ luôn trả về các hàng theo cùng một thứ tự. Xem thêm: sắp xếp Ví dụ: Để lặp lại trên 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 đồ 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 được đặt cho bảng. Loại dữ liệu trả về có thể thay đổi, tuỳ thuộc vào tài sản. 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. 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 như phương thức getNumberOfColumns() trả về. Loại giá trị được trả về phụ thuộc vào loại cột (xem nội dung getColumnType): Nếu loại cột là 'chuỗi' thì giá trị là một chuỗi. Nếu loại cột là "số", thì giá trị sẽ là một số. Nếu loại cột là 'boolean', thì giá trị sẽ là boolean. Nếu loại cột là "date" hoặc "date", thì giá trị sẽ là một đối tượng Date. Nếu loại cột là 'timeofday' thì giá trị là một mảng gồm bốn số: [hour, minutes, seconds, seconds]. Nếu giá trị ô là một giá trị rỗng, thì hàm này sẽ trả về null.
insertColumn(columnIndex, type [,label [,id]])	Không	Chèn một cột mới vào bảng dữ liệu tại chỉ mục cụ thể. Tất cả các cột hiện tại tại hoặc sau chỉ mục đượ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 về các giá trị của 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 được hiển thị dưới dạng một phần của 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 không có giá trị nào được chỉ định, hệ thống sẽ chỉ định một chuỗi trống. id phải là một chuỗi có giá trị nhận dạng riêng biệt cho cột. Nếu không có giá trị nào được chỉ định, hệ thống sẽ chỉ định một chuỗi trống. Xem thêm: addColumn
insertRows(rowIndex, numberOrArray)	Không	Chèn số hàng đã chỉ định tại chỉ mục hàng đã chỉ định. rowIndex là số chỉ mục để chèn(các) hàng mới. Các hàng sẽ được thêm vào, bắt đầu từ số chỉ mục được chỉ định. numberOrArray là một số hàng mới, trống cần thêm hoặc một mảng gồm một hoặc nhiều hàng được điền để thêm vào chỉ mục. Xem addRows() để biết cú pháp thêm một loạt các đối tượng hàng. Xem thêm: addRows
removeColumn(columnIndex)	Không	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: removeColumn
removeColumns(columnIndex, numberOfColumns)	Không	Xoá số cột được chỉ định bắt đầu từ cột tại chỉ mục đã chỉ định. numberOfColumns là số 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	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	Xoá số hàng được chỉ định bắt đầu khỏi hàng tại chỉ mục được chỉ định. numberOfRows là số hàng sẽ bị 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	Đặt giá trị, giá trị được định dạng và/hoặc thuộc tính 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 như phương thức getNumberOfColumns() trả về. value [Không bắt buộc] là giá trị được gán cho ô được chỉ định. Để ghi đè giá trị này, hãy đặt thông số này thành undefined; để xóa giá trị này, hãy đặt giá trị thành null. Loại giá trị phụ thuộc vào loại cột (xem nội dung 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à số. Nếu loại cột là 'boolean' thì giá trị phải là boolean. Nếu loại cột là "date" hoặc "date", thì giá trị phải là một đối tượng Date. Nếu loại cột là "timeofday", thì giá trị phải là một mảng gồm bốn 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 là một chuỗi. Để tránh ghi đè giá trị này, hãy đặt thông số này thành undefined. Để xoá giá trị này và để API áp dụng định dạng mặc định thành value, nếu cần thiết, 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 sử dụng bởi hình ảnh để hiển thị 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ị) với các thuộc tính bổ sung cho ô này. Để tránh ghi đè giá trị này, hãy đặt thông số này thành undefined; để xóa giá trị này, hãy đặt giá trị thành null. Một số hình ảnh 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 chúng; hãy xem tài liệu về hình ảnh để biết những thuộc tính nào được hỗ trợ. Xem thêm: setValue(), setFormattedValue(), setProperty(), setProperties().
setColumnLabel(columnIndex, label)	Không	Đặt nhãn của 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 như 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 được hiển thị dưới dạng một phần của 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 dưới dạng nhãn chú giải trong biểu đồ hình tròn. Xem thêm: getColumnLabel
setColumnProperty(columnIndex, name, value)	Không	Đặt một thuộc tính cột. Một số hình ảnh 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 chúng; xem tài liệu hình ảnh để biết những thuộc tính nào đượ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 như phương thức getNumberOfColumns() trả về. name là một chuỗi có tên thuộc tính. value là một giá trị thuộc loại bất kỳ để gán cho thuộc tính có tên trong cột đã chỉ định. Xem thêm:setColumnProperties getColumnProperty
setColumnProperties(columnIndex, properties)	Không	Đặt nhiều thuộc tính cột. Một số hình ảnh 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 chúng; xem tài liệu hình ảnh để biết những thuộc tính nào đượ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 như phương thức getNumberOfColumns() trả về. properties là một Object (bản đồ tên/giá trị) với các thuộc tính bổ sung cho cột này. Nếu bạn chỉ định null, thì tất cả các thuộc tính bổ sung của cột sẽ bị xoá. Xem thêm: setColumnProperty getColumnProperty
setFormattedValue(rowIndex, columnIndex, formattedValue)	Không	Đặt giá trị đã đị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 như phương thức getNumberOfColumns() trả về. formattedValue là một chuỗi có giá trị được định dạng để hiển thị. Để xóa 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ị cho thuộc tính formattedValue null; để đặt rõ ràng một giá trị đị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	Đặt một thuộc tính ô. Một số hình ảnh 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 chúng; xem tài liệu hình ảnh để biết những thuộc tính nào đượ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 như phương thức getNumberOfColumns() trả về. name là một chuỗi có tên thuộc tính. value là giá trị của bất kỳ loại nào để gán cho thuộc tính được đặt tên đã chỉ định của ô được chỉ định. Xem thêm: setCell setProperties getProperty
setProperties(rowIndex, columnIndex, properties)	Không	Đặt nhiều thuộc tính ô. Một số hình ảnh 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 chúng; xem tài liệu hình ảnh để biết những thuộc tính nào đượ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 như phương thức getNumberOfColumns() trả về. properties là một Object (bản đồ tên/giá trị) với các thuộc tính bổ sung cho ô này. Nếu bạn chỉ định null, thì 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	Đặt một thuộc tính hàng. Một số hình ảnh 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 chúng; xem tài liệu hình ảnh để biết những thuộc tính nào đượ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ề. name là một chuỗi có tên thuộc tính. value là giá trị thuộc loại bất kỳ để gán cho thuộc tính có tên trong hàng đã chỉ định. Xem thêm: setRowProperties getRowProperty
setRowProperties(rowIndex, properties)	Không	Đặt nhiều thuộc tính hàng. Một số hình ảnh 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 chúng; xem tài liệu hình ảnh để biết những thuộc tính nào đượ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ề. properties là một Object (bản đồ tên/giá trị) với các thuộc tính bổ sung cho hàng này. Nếu bạn chỉ định null, thì mọi thuộc tính bổ sung của hàng này sẽ bị xoá. Xem thêm: setRowProperty getRowProperty
setTableProperty(name, value)	Không	Đặt một 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 chế độ hiển thị hoặc hành vi của chúng; xem tài liệu trực quan để 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à một giá trị thuộc loại bất kỳ để gán cho thuộc tính được đặt tên đã chỉ định của bảng. Xem thêm: setTableProperties getTableProperty
setTableProperties(properties)	Không	Đặt 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 chế độ hiển thị hoặc hành vi của chúng; xem tài liệu trực quan để biết thuộc tính nào được hỗ trợ. properties là một Object (bản đồ tên/giá trị) với các thuộc tính bổ sung cho bảng. Nếu bạn chỉ định null, thì tất cả các thuộc tính bổ sung của bảng sẽ bị xóa. Xem thêm: setTableProperty getTableProperty
setValue(rowIndex, columnIndex, value)	Không	Đặt giá trị của một ô. Ngoài việc ghi đè bất kỳ giá trị ô hiện có nào, phương thức này cũng sẽ xóa mọi giá trị và thuộc tính được định dạng cho ô. 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 như phương thức getNumberOfColumns() trả về. Phương thức này không cho phép bạn đặt giá trị đã định dạng cho ô này; để làm 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ề 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à số. Nếu loại cột là 'boolean' thì giá trị phải là boolean. Nếu loại cột là "date" hoặc "date", thì giá trị phải là một đối tượng Date. Nếu loại cột là "timeofday", thì giá trị phải là một mảng gồm bốn số: [giờ, phút, giây, mili giây]. Đối với bất kỳ loại cột nào, bạn có thể đặt giá trị thành null. Xem thêm: setCell, setFormattedValue, setProperty, setProperties
sort(sortColumns)	Không	Sắp xếp các hàng theo các cột sắp xếp đã chỉ định. DataTable được sửa đổi bằng phương thức này. Hãy xem getSortedRows() để biết mô tả về chi tiết sắp xếp. Phương thức này không trả về dữ liệu đã sắp xếp. Xem thêm: getArrangeedRows Ví dụ: Để sắp xếp theo cột thứ ba, sau đó theo cột thứ hai, hãy sử dụng: data.sort([{column: 2}, {column: 1}]);
toJSON()	Chuỗi	Trả về biểu diễn JSON của DataTable có thể được truyền vào hàm DataTable hàm dựng. 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 thông số data của Hàm khởi tạo JavaScript của hàm khởi tạo

Bạn có thể khởi chạy DataTable bằng cách chuyển đối tượng cố định chuỗi JavaScript vào thông số data. Chúng ta sẽ gọi đối tượng này là đối tượng data. Bạn có thể lập trình đối tượng này theo cách thủ công, theo mô tả dưới đây hoặc bạn có thể sử dụng thư viện Python 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. 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ả 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!'}
}

Bây giờ, hãy mô tả cú pháp:

Đối tượng dữ liệu bao gồm hai 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ác giá trị tuỳ ý.

Lưu ý: Tất cả tên thuộc tính và hằng số chuỗi xuất hiện đều có phân biệt chữ hoa chữ thường. Ngoài ra, các thuộc tính được mô tả là lấy 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 kiểu 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

Thuộc tính 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 trong cột. Hỗ trợ các giá trị chuỗi sau (ví dụ: thuộc tính v: mô tả 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 JavaScript (tháng dựa trên 0), với thời gian bị cắt ngắn. Giá trị mẫu: v:new Date(2008, 0, 15)
  • "ngày giờ" - Đối tượng Ngày của JavaScript bao gồm thời gian. Giá trị mẫu: v:new Date(2008, 0, 15, 14, 30, 45)
  • "timeofday" – Mảng gồm ba số và một số thứ tư tuỳ chọn, đại diện cho giờ (0 cho biết nửa đêm), phút, giây và mili giây tuỳ chọn. 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. Hãy sử dụng các ký tự chữ và số cơ bản để trang lưu trữ không yêu cầu các ký tự thoát quen thuộ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ị số, cột 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 Visual không sử dụng giá trị này (ứng dụng đọc giá trị được định dạng của ô). Nếu DataTable đến từ một nguồn dữ liệu để phản hồi một truy vấn có mệnh đề định dạng, 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 về mẫu được đề xuất là ICU LinearFormat và SimpleDateFormat .
• p [Không bắt buộc] Một đố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 đó; 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'}]

rows Thuộc tính

Thuộc tính rows chứa 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ỳ ý để chỉ định cho toàn bộ hàng. Nếu có hình ảnh về thuộc tính cấp hàng, thì hình ảnh trực quan sẽ mô tả các hình ảnh đó; nếu không, thuộc tính này sẽ bị bỏ qua.

Đối tượng di động

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

• v [Không bắt buộc] Giá trị ô. 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 phải rỗng, mặc dù thuộc tính này vẫn có thể có 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ị này 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 "1 tháng 1 năm 2008" hoặc một số chuỗi như vậy cho thuộc tính này. Giá trị này không được kiểm tra với giá trị v. Hình ảnh trực quan này sẽ không 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, một phiên bản chuỗi của v sẽ được tạo tự động 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 hoặc đặt bằng setFormattedValue() hay setCell(), hoặc truy xuất bằng getFormattedValue().
• p [Không bắt buộc] Một đố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ợ mọi thuộc tính cấp ô, 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ư nội dung mô tả cột trong cols. Để chỉ định một ô rỗng, bạn có thể chỉ định null, để trống cho một ô trong một mảng hoặc bỏ qua các thành phần mảng ở cuối. 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}].

Sau đây là đối tượng bảng mẫu có 3 cột, được điền 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'}
        ]}
  ]
}

Thuộc tính p

Thuộc tính p cấp bảng là một bản đồ của 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 dữ liệu, thì hình ảnh sẽ mô tả các thuộc tính đó; nếu không, thuộc tính này sẽ được dùng để sử dụng cho ứ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 tập hợp nhỏ các cột và/hoặc hàng. Ngoài ra, bạn cũng có thể sắp xếp lại thứ tự các cột/hàng và nhân bản các cột/hàng.

Thành phần hiển thị là một cửa sổ trực tiếp trên DataTable cơ bản, không phải ảnh chụp nhanh dữ liệu tĩnh. 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ả ở đây:

• Việc thêm hoặc xoá các cột khỏi bảng cơ bản sẽ không được thành phần hiển thị phản ánh và có thể gây ra hành vi không mong muốn trong thành phần hiển thị; bạn sẽ phải tạo DataView mới từ DataTable để chọ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 khi thay đổi này có tập hợp hàng mới được hiển thị). Xin lưu ý rằng nếu chế độ xem 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 xóa 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 tại là an toàn và các thay đổi sẽ được áp dụng ngay lập tức cho 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 để hiển thị các giá trị ô mới).

Bạn cũng có thể tạo DataView từ một DataView khác. Lưu ý rằng bất cứ khi nào một bảng hoặc chế độ xem cơ bản được đề cập, thì chính nó sẽ đề cập đến cấp độ ngay bên dưới cấp này. Nói cách khác, đây là đố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à các cột có giá trị được tính toán nhanh bằng cách sử dụng một hàm 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à thể hiện quý theo lịch trong một ngày từ một cột khác. Hãy xem setColumns() để biết thêm thông tin.

Khi bạn sửa đổi một DataView bằng cách ẩn hoặc hiển thị 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 đó.

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ạ bên dưới:

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ó hai cách để tạo một phiên bản DataView mới:

Hàm dựng 1

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

data

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

Xem thêm:

setColumn(), hideColumn(), setRows(), hideRows().

 

Hàm dựng 2

Hàm khởi tạo này tạo một DataView mới bằng cách gán DataView tuần tự cho DataTable. Công cụ này giúp bạn tạo lại DataView mà bạn đã chuyển đổi tuần tự bằng cách sử dụ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 ban đầu, bạn sẽ nhận được các kết quả không thể đoán trước.

viewAsJson

Chuỗi JSON được DataView.toJSON() trả về. Đây là phần mô tả về các hàng sẽ hiển thị hoặc ẩn khỏi Bảng dữ liệu dữ liệu.

Phương pháp

Phương thức	Giá trị trả về	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.	Tương tự như các phương thức DataTable tương đương, ngoại trừ việc chỉ mục hàng/cột đề cập đến chỉ mục trong thành phần hiển thị và không phải trong bảng/chế độ xem cơ bản.
getTableColumnIndex(viewColumnIndex)	Số	Trả về chỉ mục trong bảng cơ bản (hoặc thành phần hiển thị) của một cột nhất định do chỉ mục của cột đó chỉ định trong thành phần hiển thị 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 như được phương thức getNumberOfColumns() trả về. Trả về -1 nếu đây là cột được tạo. Ví dụ: Nếu trước đó setColumns([3, 1, 4]) đã được gọi, thì getTableColumnIndex(2) sẽ trả về 4.
getTableRowIndex(viewRowIndex)	Số	Trả về chỉ mục trong bảng cơ bản (hoặc thành phần hiển thị) của một hàng nhất định do chỉ mục của hàng đó chỉ định trong thành phần 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 trước đó setRows([3, 1, 4]) đã được gọi, 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 tới một cột nhất định do chỉ mục của cột đó chỉ định trong bảng cơ bản (hoặc thành phần hiển thị). Nếu có nhiều chỉ mục như vậy, hãy trả về chỉ mục đầu tiên (chỉ mục nhỏ nhất). Nếu không có chỉ mục như vậy (cột đã chỉ định không có trong chế độ xem), 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 mà phương thức getNumberOfColumns() của bảng/chế độ xem cơ bản trả về. Ví dụ: Nếu trước đó setColumns([3, 1, 4]) đã được gọi, thì getViewColumnIndex(4) sẽ trả về 2.
getViewColumns()	Mảng số	Trả về các cột trong chế độ xem này theo thứ tự. Nghĩa là nếu gọi setColumns bằng một mảng và sau đó gọi getViewColumns(), bạn sẽ nhận được một mảng giống nhau.
getViewRowIndex(tableRowIndex)	Số	Trả về chỉ mục trong thành phần hiển thị này, liên kết tới một hàng nhất định do chỉ mục của hàng đó chỉ định trong bảng cơ bản (hoặc thành phần hiển thị). Nếu có nhiều chỉ mục như vậy, hãy trả về chỉ mục đầu tiên (chỉ mục nhỏ nhất). Nếu không có chỉ mục như vậy (hàng đã 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 trước đó setRows([3, 1, 4]) đã được gọi, 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 số mảng và sau đó 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 dãy 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ơ bản. Các số trong columnIndexes không nhất thiết phải theo thứ tự (nghĩa là [3,4,1] cũng được). Các cột còn lại giữ nguyên thứ tự chỉ mục khi bạn lặp lại. 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 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ác cột, hãy gọi setColumns(). Ví dụ: Nếu bạn có một bảng có 10 cột, và bạn gọi setColumns([2,7,1,7,9]), rồi đến hideColumns([7,9]), thì các cột trong thành phần hiển thị sẽ là [2,1].
hideRows(min, max)	Không	Ẩn tất 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	Ẩn các hàng được chỉ định khỏi chế độ xem hiện tại. rowIndexes là một dãy số đại diện cho chỉ mục của các hàng cần ẩn. Các chỉ mục này là số chỉ mục trong bảng/chế độ xem cơ bản. Các số trong rowIndexes không nhất thiết phải theo thứ tự (nghĩa là [3,4,1] cũng được). Các hàng còn lại giữ nguyên thứ tự chỉ mục. 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 chỉ mục không tồn tại trong bảng/chế độ xem cơ bản sẽ báo lỗi. Để hiện các hàng, hãy gọi setRows(). Ví dụ: Nếu bạn có một bảng có 10 hàng và gọi setRows([2,7,1,7,9]), sau đó đến hideRows([7,9]), thì các hàng trong chế độ xem sẽ hiển thị [2,1].
setColumns(columnIndexes)	Không	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 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, thì chế độ mặc định sẽ là hiển thị tất cả các cột. Mảng này cũng có thể chứa nhiều giá trị trùng lặp để hiển thị 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 gồm 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 để đưa vào chế độ xem. Dữ liệu được chuyển qua dữ liệu chưa sửa đổi. Nếu bạn cần xác định rõ ràng vai trò hoặc các thuộc tính cột bổ sung, hãy chỉ định một đối tượng bằng thuộc tính sourceColumn. Đối tượng chỉ định một cột đã tính toán. Một cột đã tính toán sẽ tạo một giá trị ngay lập tức 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 [function] – 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 này sẽ trả về một giá trị duy nhất của 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 để chỉ định cho cột được tạo này. Nếu bạn không 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 để gán cho cột được tạo này. sourceColumn – [Không bắt buộc, số] Cột nguồn dùng làm giá trị; nếu bạn chỉ định thì 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 bạn không chỉ định, cột cột chế độ xem sẽ không có thuộc tính. 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 có, hệ thống sẽ không nhập vai trò hiện có. 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	Đặt các hàng trong thành phần hiển thị 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 cả hai chỉ mục này). Dưới đây là cú pháp thuận tiện cho setRows(rowIndexes) bên dưới. Ví dụ: setRows(5, 10) tương đương với setRows([5, 6, 7, 8, 9, 10]).
setRows(rowIndexes)	Không	Thiết lập các hàng hiển thị trong chế độ xem này, dựa trên số chỉ mục từ bảng/chế độ xem cơ bản. rowIndexes phải là một dãy số chỉ định để xác định hàng nào sẽ hiển thị trong thành phần hiển thị. Mảng này chỉ định thứ tự hiển thị các hàng và hàng có thể được sao chép. Xin lưu ý rằng chỉ các hàng được chỉ định trong rowIndexes sẽ xuất hiện; phương thức này sẽ xoá tất cả các hàng khác khỏi chế độ xem. Mảng này cũng có thể chứa các hàng trùng lặp, thực hiện việc sao chép hiệu quả hàng đã 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 với thành phần hiển thị 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ụ: Để tạo chế độ xem có hàng ba và không có bảng/chế độ xem cơ bản: view.setRows([3, 0])
toDataTable()	Bảng dữ liệu	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()	chuỗi	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ế; 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 tĩnh DataView.fromJSON() hàm dựng để tạo lại thành phần hiển thị này. Dữ liệu này sẽ không bao gồm các cột đã tạo.

Lớp ChartWrapper

Lớp ChartWrapper được dùng để bao bọc biểu đồ và xử lý tất cả các truy vấn tải, vẽ và Dữ liệu nguồn cho biểu đồ của bạn. Lớp này hiển thị 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 đơn giản hoá việc đọc từ một nguồn dữ liệu, vì bạn không phải tạo một trình xử lý gọi lại truy vấn. Bạn cũng có thể sử dụng biểu đồ để lưu biểu đồ dễ dàng sử dụng lại.

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

Tuy nhiên, ChartWrapper hiện chỉ áp dụng một số sự kiện do các biểu đồ tạo ra: chọn, sẵn sàng và lỗi. Các sự kiện khác không được truyền qua phiên bản ChartWrapper; để nhận các sự kiện khác, bạn phải gọi hàm getChart() và đăng ký trực tiếp các sự kiện trên bảng điều khiển của 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 một phiên bản chuỗi tuần tự của đối tượng đó. Định dạng của đối tượng này được hiển thị trong tài liệu drawChart(). Nếu không được chỉ định, bạn phải đặt tất cả thuộc tính thích hợp bằng các phương thức set... mà đối tượng này hiển thị.

Phương pháp

ChartWrapper hiện các phương thức bổ sung sau:

Phương thức	Loại dữ liệu trả về	Mô tả
draw(opt_container_ref)	Không	Vẽ biểu đồ. Bạn phải gọi phương thức này sau khi bất kỳ thay đổi nào bạn thực hiện cho biểu đồ hoặc dữ liệu để hiển thị các thay đổi. opt_container_ref [Không bắt buộc] – Tham chiếu đến một 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 do containerId chỉ định.
toJSON()	Chuỗi	Trả về phiên bản chuỗi của biểu diễn JSON của biểu đồ.
clone()	ChartWrapper	Trả về 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, hãy trả về URL cho nguồn dữ liệu này. Nếu không, trả về giá trị rỗng.
getDataTable()	google.Visualization.DataTable	Nếu biểu đồ này lấy dữ liệu từ DataTable được xác định cục bộ, sẽ trả về một lượt tham chiếu đến DataTable của biểu đồ. Nếu nhận được dữ liệu từ một nguồn dữ liệu, biểu đồ này sẽ trả về giá trị null. Bất kỳ thay đổi nào mà bạn thực hiện cho đối tượng được trả về sẽ được phản ánh trong biểu đồ vào lần tiếp theo bạn gọi ChartWrapper.draw().
getChartType()	Chuỗi	Tên lớp của biểu đồ được bao bọc. Nếu đây là biểu đồ của Google, tên này sẽ không đủ điều kiện cho google.visualization. Ví dụ: nếu đây là biểu đồ Treemap, biểu đồ sẽ trả về "Treemap" 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 biểu đồ	Trả về tham chiếu đến biểu đồ do ChartWrapper tạo ra, ví dụ: google.visualization.BarChart hoặc google.visualization.ColumnChart . Hàm này sẽ trả về giá trị rỗng cho đến khi bạn gọi draw() trên đối tượng ChartWrapper, và sẽ 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ã phần tử vùng chứa DOM của biểu đồ.
getQuery()	Chuỗi	Chuỗi truy vấn cho biểu đồ này, nếu có, truy vấn và 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. Zero cho biết không làm mới.
getOption(key, opt_default_val)	Mọi loại	Trả về giá trị tùy chọn biểu đồ được chỉ định khoá – Tên của tuỳ chọn truy xuất. Có thể là 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ị đã chỉ định 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 trình khởi chạy DataView, ở cùng định dạng với dataview.toJSON() hoặc một loạt các đối tượng như vậy.
setDataSourceUrl(url)	Không	Đặt URL của một nguồn dữ liệu để dùng cho biểu đồ này. Nếu bạn cũng đặt 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	Đặt DataTable cho biểu đồ. Truyền một trong những giá trị sau: rỗng; một đối tượng DataTable; biểu thị JSON của DataTable; hoặc một mảng theo cú pháp của arrayToDataTable().
setChartType(type)	Không	Đặt loại biểu đồ. Truyền tên lớp của biểu đồ được bao bọc. Nếu đây là biểu đồ của Google, thì bạn không nên sử dụng biểu đồ google.visualization để đánh giá điều kiện này. Ví dụ: đối với biểu đồ hình tròn, hãy chuyển vào "PieChart".
setChartName(name)	Không	Đặt tên tuỳ ý cho biểu đồ. Biểu đồ này không xuất hiện ở bất cứ đâu trên biểu đồ, trừ phi biểu đồ tuỳ chỉnh được thiết kế để sử dụng một cách rõ ràng.
setContainerId(id)	Không	Đặt mã của phần tử DOM chứa biểu đồ.
setQuery(query_string)	Không	Đặ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	Đặ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 một URL nguồn dữ liệu nếu chỉ định giá trị này. Zero cho biết không làm mới.
setOption(key, value)	Không	Đặt một giá trị tuỳ chọn biểu đồ, trong đó khoá là tên tuỳ chọn và giá trị là giá trị. Để bỏ thiết lập một tuỳ chọn, hãy truyền giá trị rỗng vào giá trị này. Xin lưu ý rằng khoá có thể là tên đủ điều kiện, chẳng hạn như 'vAxis.title'.
setOptions(options_obj)	Không	Đặt một đối tượng tùy chọn hoàn chỉnh cho biểu đồ.
setView(view_spec)	Không	Đặt một đối tượng trình khởi chạy DataView, đóng vai trò là bộ lọc đối với dữ liệu cơ bản. Trình bao bọc biểu đồ phải có dữ liệu cơ bản từ DataTable hoặc nguồn dữ liệu để áp dụng chế độ xem này. Bạn có thể truyền một chuỗi hoặc đối tượng khởi tạo DataView, tương tự như đối tượng do dataview.toJSON() trả về. Bạn cũng có thể truyền một mảng đố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 một 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.

Sự kiện

Đối tượng ChartWrapper sẽ gửi các sự kiện sau. 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	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 đồ đã 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 này sau khi sự kiện được kích hoạt.	Không
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 một chú giải được chọn, cột tương ứng trong bảng dữ liệu sẽ được chọn. Để tìm hiểu những mục bạn đã chọn, hãy gọi ChartWrapper.getChart(). getSelection(). Lưu ý rằng thao tác 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

Ví dụ:

Hai đoạn mã sau sẽ tạo ra một biểu đồ dạng đường tương đương. Ví dụ đầu tiên sử dụng ký hiệu 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>

Biểu đồ này 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 được dùng để mở hộp thoại trong trang cho phép người dùng nhanh chóng tuỳ chỉnh hình ảnh trực quan.

Cách sử dụng ChartEditor:

1. Tải gói charteditor. Trong google.charts.load(), tải gói 'Charteditor'. Bạn không cần tải gói cho loại biểu đồ mà bạn hiển thị 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.
2. Tạo một đối tượng ChartWrapper xác định biểu đồ để người dùng tùy chỉnh. Biểu đồ này sẽ hiển thị trong hộp thoại và người dùng 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í thay đổi dữ liệu nguồn.
3. Tạo một thực thể mới của ChartEditor và đăng ký nghe 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 nên gọi ChartEditor.getChartWrapper() để truy xuất biểu đồ do người dùng sửa đổi.
4. Gọi ChartEditor.openDialog(), truyền vào 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. Bản sao ChartEditor này có sẵn miễn là trong phạm vi; bản sao này không tự động bị huỷ sau khi người dùng đóng hộp thoại.
5. Để cập nhật biểu đồ trong mã, hãy gọi setChartWrapper().

Phương pháp

Phương thức	Giá trị trả về	Mô tả
openDialog(chartWrapper, opt_options)	null	Mở trình chỉnh sửa biểu đồ dưới dạng hộp thoại nhúng trên trang. Hàm này trả về ngay; hộp thoại sẽ không đó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 chuyển lại vào đối tượng ChartWrapper. ChartWrapper – Đối tượng ChartWrapper xác định biểu đồ ban đầu để 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, bất kỳ thay đổi nào sau đó mà bạn thực hiện đối với xử lý 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 tuỳ chọn bất kỳ cho trình chỉnh sửa biểu đồ. Xem bảng tuỳ chọn bên dưới.
getChartWrapper()	ChartWrapper	Trả về ChartWrapper đại diện cho biểu đồ, với các sửa đổi của người dùng.
setChartWrapper(chartWrapper)	null	Hãy sử dụng phương pháp 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 sẽ hiển thị. 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 tùy chọn sau:

Tên	Loại	Mặc định	Mô tả
dataSourceInput	Ô điều khiển phần tử hoặc "urlbox"	null	Dùng tuỳ chọn 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ể có 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 một hộp văn bản có thể chỉnh sửa. Người dùng có thể sửa đổi mục 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 tùy chỉnh để sử dụng nhằm chọn một nguồn dữ liệu. Truyền ô điều khiển vào phần tử HTML, phần tử được tạo trong mã hoặc được sao chép từ trang. Phần tử này sẽ hiển thị trên hộp thoại. Cách 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 nhiều 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à sử dụng trình xử lý đó để thay đổi nguồn dữ liệu của biểu đồ; ví dụ: 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 đồ gửi những sự kiện sau:

Tên	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 "Hủy" trên hộp thoại.	không có

Ví dụ:

Mã mẫu sau đây sẽ mở ra một hộp thoại của trình chỉnh sửa biểu đồ có 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 chứa 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 cho thấy các phương thức sau:

Phương thức	Mô tả
google.visualization.data.group	Thực hiện hành động nhóm SQL bằng cách trả về bảng được nhóm theo giá trị trong 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 đối tượng DataTable đã điền sẵn và thực hiện thao tác Groups BY SQL, trả về một bảng có các hàng được nhóm theo các giá trị cột được chỉ định. 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 mỗi 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, cùng với 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 phím (ví dụ: tổng hoặc tổng của tất cả các giá trị trong cột được chỉ định).

Vùng chứa tên google.visualization.data bao gồm một số giá trị tổng hợp hữu ích (ví dụ: tổng và số lượng), nhưng bạn có thể xác định giá trị của riêng mình (ví dụ: standardDeviation hoặc giâyhigh). Chúng tôi cung cấp hướng dẫn về cách tự xác định trang web tổng hợp sau phần mô tả phương thức.

Cú pháp

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

bảng_dữ_liệu

Đầu vào DataTable. Bạn sẽ không thể sửa đổi thông tin này bằng cách gọi group().

khoá

Một mảng gồm số và/hoặc đối tượng chỉ định các cột cần nhóm theo. 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ố, đây sẽ là chỉ mục cột của đầu vào DataTable để nhóm. Nếu một đối tượng có thể bao gồm 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.
• biến bổ trợ – 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ột để hỗ trợ việc phân nhóm: ví dụ: bằng cách gọi một hàm hasQuarter tính toán một quý từ cột ngày, để API có thể nhóm các hàng theo quý. Giá trị đã tính toán sẽ hiển thị trong các cột chính trong bảng được trả về. Hàm này có thể được khai báo nội tuyến bên trong đối tượng hoặc có thể là 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 sửa đổi đơn giản. Sau đây là hướng dẫn về cách tạo hàm riêng của bạn 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 hàm trong thuộc tính type được mô tả ở phần tiếp theo.
• loại – Loại được hàm biến bổ trợ 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 để chỉ định 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 ngoài cột chính để đưa vào bảng kết quả. Vì tất cả các hàng trong nhóm hàng đều được nén thành một hàng đầu ra, nên bạn phải xác định giá trị cần 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 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 tất 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 mà thuộc tính type của đối tượng chỉ định. 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 loại dữ liệu mà phương thức này chấp nhận và chỉ gọi phương thức đó 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 Hàm tổng hợp đã cung cấp bên dưới để biết danh sách hoặc cách 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 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 được trả về.

Giá trị trả về

DataTable có 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

Hàm sửa đổi được cung cấp

API này cung cấp các hàm bổ trợ sau mà bạn có thể truyền vào các khoá. Thông số modifier để tùy chỉnh hành vi nhóm.

Chức năng	Loại mảng đầu vào	Loại dữ liệu trả về	Mô tả
google.visualization.data.month	Ngày	number	Khi chọn ngày, giá trị này sẽ trả về giá trị tháng không dựa trên giá trị (0, 1, 2, v.v.).

Hàm tổng hợp đã cung cấp

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

Chức năng	Loại mảng đầu vào	Loại dữ liệu trả về	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ố 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	số, chuỗi, ngày, rỗng	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ừ vựng; đối với các giá trị Ngày, đó là ngày mới 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	số, chuỗi, ngày, rỗng	Giá trị tối thiểu 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ừ vựng; đối với các giá trị Ngà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 sửa đổi

Bạn có thể tạo hàm sửa đổi để thực hiện một biến đổi khóa đơn giản 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 thao tác trên giá trị đó (ví dụ: thêm 1 vào giá trị) và trả về giá trị đó. Loại đầu vào và trả về không cần cùng loại, nhưng phương thức gọi phải biết loại đầ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 giá trị cột trong một nhóm hàng và trả về một số duy nhất: ví dụ: 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 đã cung cấp. Hàm này trả về số lượng hàng 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 kết hợp 2 bảng dữ liệu (đối tượng DataTable hoặc DataView) vào một bảng kết quả duy nhất, tương tự như câu lệnh SQL JOIN. Bạn 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 bao gồm các hàng theo phương thức liên kết mà bạn chỉ định: chỉ những hàng mà cả hai khoá khớp; tất cả các hàng từ một bảng; hoặc tất cả các hàng từ cả hai bảng, cho dù các khoá có khớp hay không. Bảng kết quả chỉ bao gồm các cột chính và mọi cột bổ sung mà bạn chỉ định. Lưu ý rằng dt2 không được có khoá trùng lặp, nhưng dt1 có thể. Thuật ngữ "khoá" có nghĩa là sự kết hợp của tất cả các giá trị cột chính, không phải giá trị cột khoá cụ thể; vì vậy, nếu một hàng có giá trị ô A | B | C và các 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 đã điền sẵn để tham gia bằng dt2.

dt2

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

joinMethod

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

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

khoá

Một mảng các cột chính để so sánh từ cả hai bảng. Mỗi cặp là một mảng hai phần tử, đầu tiên là khóa trong dt1, thứ hai là khóa 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, hãy xem getColumnIndex.
Các cột phải thuộc cùng một loại trong cả hai bảng. Tất cả các khoá đã chỉ định phải khớp theo quy tắc mà joinMethod đưa ra để chứa một hàng từ bảng. Các cột chính luôn có trong bảng đầu ra. Chỉ có dt1 là bảng bên trái có thể chứa 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 chính, không phải giá trị cột riêng lẻ. Ví dụ: nếu các cột chính của bạn là A và B, thì bảng sau sẽ chỉ có các giá trị khóa duy nhất (và do đó có thể được sử dụng dưới dạng dt2):

A	B
Jen	Đỏ
Jen	Xanh dương
Fred	Đỏ

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

Cột 1t

Một mảng các cột từ dt1 để đưa vào bảng đầu ra, ngoài các cột khoá 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, hãy xem phần getColumnIndex.

Cột 2t

Một mảng các cột từ dt2 để đưa vào bảng đầu ra, ngoài các cột khoá 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, hãy xem phần getColumnIndex.

Giá trị trả về

DataTable có các cột chính, dt1Column 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", thì tất cả các ô chính sẽ được điền sẵn. Đối với các phương thức liên kết khác, nếu không tìm thấy khoá trùng 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

Bộ định dạng

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

• Bộ định dạng chỉ sửa đổi các giá trị được định dạng, không phả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 là "1000".
• Các bộ đị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 mỗi cột mà bạn muốn thay đổi.
• Nếu bạn cũng sử dụng các bộ định dạng do người dùng xác định, thì một số bộ định dạng của Google Visual sẽ ghi đè tất cả các bộ định dạng do người dùng xác định.

Định dạng thực tế được á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, hãy xem phần tải biểu đồ bằng một ngôn ngữ cụ thể.

Quan trọng: Bạn chỉ có thể sử dụng bộ định dạng với một DataTable; các định dạng này không dùng được với DataView (đố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:

1. Lấy đối tượng DataTable được điền sẵn.
2. Đối với mỗi cột mà 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à một đố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 về trình định dạng để biết những thuộc tính đượ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 cố định dạng đối tượng chỉ định các tùy chọn.)
   2. Tạo trình định dạng, truyền đối tượng tuỳ chọn vào.
   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 cần định dạng lại. Xin 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 trình định dạng thứ hai sẽ chỉ ghi đè tác động của trình định dạng đầ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ợ tùy chọn allowHtml thì bạn nên đặt thành đúng.

Dưới đây là ví dụ về cách thay đổi các giá trị ngày được định dạng của 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 bộ định dạng đều hiển thị hai phương thức sau:

Phương thức	Mô tả
google.visualization.formatter_name(options)	Hàm khởi tạo, trong đó formatter_name là tên của trình định dạng specfic. options – Đối tượng JavaScript chung chỉ định các tùy chọn cho trình định dạng đó. Đối tượng này là một đối tượng chung chứa các cặp thuộc tính/giá trị 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ể để tìm hiểu những tuỳ chọn được hỗ trợ. Dưới đây là hai ví dụ về cách gọi hàm khởi tạo cho đối tượng DateFormat, được truyền vào hai 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. dữ liệu – Một 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 dựa trên 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.

 

API Hình ảnh của Google cung cấp các định dạng sau:

Tên trình định dạng	Mô tả
Định dạng mũi tên	Thêm mũi tên lên hoặc xuống, cho biết giá trị ô nằm trên hay dưới giá trị được chỉ định.
Định dạng thanh	Thêm một thanh màu, hướng và màu của màu đó cho biết giá trị ô đang cao hơn hay thấp hơn một giá trị đã chỉ định.
ColorFormat (Định dạng màu)	Tô màu một ô theo giá trị có nằm trong dải ô đã chỉ định hay không.
Định dạng ngày	Định dạng giá trị Date hoặc DateTime theo một số cách khác nhau, bao gồm "ngày 1 tháng 1 năm 2009", "1/1/09" và "ngày 1 tháng 1 năm 2009".
NumberFormat (Số định dạng số)	Đị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 tùy ý.

Định dạng mũi tên

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 một giá trị cơ sở được chỉ định. Nếu bằng với giá trị cơ sở, sẽ không có mũi tên nào hiển thị.

Tùy chọn

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

Lựa chọn	Mô tả
base	Số cho biết giá trị cơ sở, dùng để so sánh với giá trị của ô. Nếu giá trị ô cao hơn, ô sẽ bao gồm mũi tên lên màu xanh lục; nếu giá trị ô thấp hơn, ô sẽ bao gồm mũi tên xuống màu đỏ; nếu giống nhau, không có mũi tên.

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});

Định dạng thanh

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 một giá trị cơ sở đã chỉ định.

Tùy chọn

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

Lựa chọn	Ví dụ: Mô tả
base	Số là giá trị cơ sở để so sánh giá trị của ô. Nếu giá trị ô cao hơn, giá trị này sẽ được vẽ ở bên phải của đế; 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	Một chuỗi cho biết phần giá trị âm của thanh. Các giá trị có thể là "màu đỏ", "màu xanh lục" và "màu xanh dương"; giá trị mặc định là "màu đỏ".
colorPositive	Một chuỗi cho biết màu của phần giá trị dương trong thanh. Các giá trị có thể là "màu đỏ", "màu xanh lục" và "màu xanh dương". Mặc định là 'blue'.
drawZeroLine	Boolean cho biết có vẽ đường cơ sở tối 1 pixel hay không khi có giá trị âm. Đường thẳng tối ở đó giúp nâng cao khả năng quét trực quan của các thanh. Giá trị mặc định là 'false'.
max	Giá trị số tối đa cho phạm vi thanh. Giá trị mặc định là giá trị cao nhất trong bảng.
min	Giá trị số tối thiểu cho phạm vi thanh. Giá trị mặc định là giá trị thấp nhất trong bảng.
showValue	Nếu là true, sẽ hiển thị các 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%'});

Định dạng màu

Chỉ định màu cho nền trước hoặc nền của ô số, tùy 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ì trong tham số này không dùng 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 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 được chấp nhận nào, chẳng hạn như "đen", "#000000" hoặc "#000".

Phương pháp

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

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

Định dạng ngày

Định dạng giá trị Date của JavaScript theo nhiều cách, bao gồm "ngày 1 tháng 1 năm 2016", "ngày 1 tháng 1 năm 2016" và "ngày 1 tháng 1 năm 2016".

Tùy chọn

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

Lựa chọn	Mô tả
formatType	Tùy chọn định dạng nhanh cho ngày. Các giá trị chuỗi sau đây được hỗ trợ, định dạng lại ngày 28 tháng 2 năm 2016 như sau: 'short' - Định dạng ngắn: ví dụ: "28/2/16" 'medium' - Đị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 sẽ áp dụng cho giá trị, tương tự như định dạng ngày và giờ của 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ề mẫu trong phần tiếp theo.
timeZone	Múi giờ hiển thị giá trị ngày. Đây là một giá trị số, cho biết GMT + số múi giờ này (có thể là số âm). Theo mặc định, đối tượng ngày được tạo theo múi giờ giả định của máy tính tạo múi giờ; tùy chọn này được 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 Date là 5 giờ chiều trên một máy tính ở 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 ở Hoa Kỳ), thì giá trị hiển thị sẽ là 12 trưa.

Phương pháp

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

Phương thức	Mô tả
google.visualization.DateFormat(options)	Hàm khởi tạo. Hãy xem phần tuỳ 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 đã chỉ định.
formatValue(value)	Trả về giá trị đã định dạng của một giá trị cho trước. 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ề các mẫu được hỗ trợ:

Các mẫu 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 mẫu, bất kỳ văn bản nào bằng chữ bạn muốn xuất hiện trong kết quả phải được đặt trong cặp dấu ngoặc đơn, ngoại trừ dấu nháy đơn mà bạn nên dùng dấu ngoặc kép: ví dụ: "K 'o''clock.'".

Mẫu	Mô tả	Kết quả điểm dữ liệu
GG (GG)	Người chỉ định thời đại.	"QC"
yy hoặc yyyy	.	1996
T2	Tháng trong năm. Đối với tháng 1: M tạo ra 1 MM tạo ra 01 MMM sản xuất vào tháng 1 MMMM sản xuất tháng 1	"Tháng 7" "07"
ngày	Ngày trong tháng. Các giá trị "d" bổ sung sẽ thêm các số 0 ở đầu.	10
giờ	Giờ trong thang 12 giờ. Các giá trị "h" bổ sung sẽ được thêm các số 0 ở đầu.	12
H	Giờ trong thang điểm 24 giờ. Các giá trị Hk bổ sung sẽ được thêm vào số 0 ở đầu.	0
phút	Số phút trong giờ. Các giá trị "M" bổ sung sẽ được thêm các số 0 ở đầu.	30
s	Số giây trong phút. Giá trị bổ sung sẽ thêm các số 0 ở đầu.	55
CN	Phân số giây. Các giá trị "S" thừa sẽ được thêm vào bên phải bằng số 0.	978
E	Ngày trong tuần. Kết quả đầu ra cho "Thứ Ba" sau đây: E tạo ra T EE hoặc EEE sản xuất thứ ba hoặc thứ ba EEEE sản xuất vào thứ Ba	"Thứ Ba" "Thứ Ba"
a	Sáng/chiều	"PM"
k	Giờ trong ngày (1~24). Các giá trị "k" bổ sung sẽ thêm các số 0 ở đầu.	24
nghìn	Giờ sáng/chiều (0~11). Các giá trị "k" bổ sung sẽ thêm các số 0 ở đầu.	0
z	Múi giờ. Đối với múi giờ 5, tạo ra "UTC+5"	"giờ 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à các sản phẩm khác tạo ra "GMT -05:00"	"-0800" "GMT -05:00"
v	Múi giờ (chung).	"Etc/GMT-5"
'	ký tự thoát cho văn bản	"Date='"
''.	dấu nháy đơn	'yy'

Định dạng số

Mô tả cách định dạng các cột dạng số. Các tùy chọn định dạng bao gồm chỉ định 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 dấu đánh dấu hàng nghìn.

Tùy chọn

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

Lựa chọn	Mô tả
decimalSymbol	Một ký tự để sử dụng làm dấu thập phân. Tùy chọn mặc định là dấu chấm (.).
fractionDigits	Một số chỉ định số chữ số hiển thị sau số 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ì số này sẽ hiển thị số 0 cho các giá trị nhỏ hơn. Giá trị bị cắt ngắn sẽ được làm tròn (5 được làm tròn).
groupingSymbol	Một ký tự dùng để nhóm các chữ số ở bên trái 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 giá trị âm. Không có giá trị mặc định. Giá trị có thể là bất kỳ giá trị màu HTML nào được chấp nhận, chẳng hạn như "màu đỏ" hoặc "#FF0000".
negativeParens	Boolean, trong đó true cho biết rằng 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 nhóm mẫu ICU . Ví dụ: {pattern:'#,###%'} sẽ trả về 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 pháp

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

Phương thức	Mô tả
google.visualization.NumberFormat(options)	Hàm khởi tạo. Hãy xem phần tuỳ 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ị đã định dạng của một giá trị cho trước. 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%'});

Mẫu định dạng

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

Phương pháp

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

Phương thức	Mô tả
google.visualization.PatternFormat(pattern)	Hàm khởi tạo. Không nhận đối tượng tùy chọn. Thay vào đó, nó sẽ nhận một tham số pattern (mẫu) chuỗi. Đây là một chuỗi mô tả các giá trị cột cần đặt vào cột đích, cùng với mọi văn bản tuỳ ý. Nhúng phần giữ chỗ trong chuỗi của bạn để cho biết một giá trị từ một cột khác được nhúng. 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 một ký tự { ký tự { }, hãy thoát ký tự đó như sau: \{ hoặc tồn tại. Để bao gồm một ký hiệu \ literal, hãy thoát ký tự đó bằng \\. Mã mẫu Ví dụ sau đây minh họa hàm khởi tạo cho một mẫu tạo phần tử liên kết, trong đó phần tử đầu tiên và phần tử 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 – Bảng dữ liệu để vận hành. 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 làm nguồn từ DataTable cơ bản. Tham số 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 phải theo thứ tự được sắp xếp. opt_dstColumnIndex - [không bắt buộc] Cột điểm đến để đặt kết quả của thao tác mẫu. 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 vài ví dụ về dữ liệu đầu vào và kết quả cho một bảng có 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 họa cách kết hợp dữ liệu từ hai cột để tạo đị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', '[e-mail]'],
  ['Paul McCartney', '[e-mail]'],
  ['George Harrison', '[e-mail]'],
  ['Ringo Starr', '[e-mail]']
]);

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%'});

Trình trợ giúp tiện ích

Một lớp trợ 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 pháp

Phương thức	Giá trị trả về	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 các thuộc tính của thực thể đó theo các giá trị trong phần tuỳ chọn tiện ích. Loại tham số prefs là _IG_Prefs Lựa chọn ưu tiên _table_query_url dùng để đặt URL nguồn dữ liệu truy vấn. Tùy chọn _table_query_refresh_interval dùng để đặt 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 quá trình 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 đây dùng để gửi truy vấn 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 đi.
• QueryResponse – Xử lý phản hồi từ nguồn dữ liệu.

Cụm từ tìm kiếm

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

Hàm dựng

google.visualization.Query(dataSourceUrl, opt_options)

Thông số

dataSourceUrl

[Bắt buộc, Chuỗi] URL để gửi cụm từ tìm kiếm đến. Xem Tài liệu về biểu đồ và bảng tính cho Google Bảng tính.

opt_options

[Đối tượng không bắt buộc] Bản đồ của các tùy 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 tham 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 XmlHttpRequest.
  • 'scriptInjection' - Gửi truy vấn bằng cách sử dụng tính năng chèn tập lệnh.
  • 'makeRequest' – [Chỉ dành cho các tiện ích đã ngừng hoạt động] Gửi truy vấn bằng phương thức API Tiện ích makeRequest(). Nếu được chỉ định, bạn cũng nên chỉ định makeRequestParams.
  • 'auto' – Sử dụng phương thức được xác định bởi tham số URL tqrt 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ệ, giá trị mặc định sẽ là "xhr" cho yêu cầu cùng miền và "scriptInjection" cho các yêu cầu trên nhiều miền.
• makeRequestParams – [Đối tượng] Bản đồ tham số cho truy vấn makeRequest(). Chỉ được sử dụng và bắt buộc nếu sendMethod là 'makeRequest'.

Phương pháp

Phương thức	Giá trị trả về	Mô tả
abort()	Không	Dừng truy vấn tự động gửi đã bắt đầu bằng setRefreshInterval().
setRefreshInterval(seconds)	Không	Đặt truy vấn để tự động gọi phương thức send cho 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 tới 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 phương thức này 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 này bằng số 0 (mặc định) hoặc gọi phương thức abort().
setTimeout(seconds)	Không	Đặt số giây để chờ nguồn dữ liệu phản hồi trước khi báo 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. Nếu được sử dụng, bạn nên gọi phương thức này trước khi gọi phương thức send.
setQuery(string)	Không	Đặt chuỗi truy vấn. Giá trị của thông số string phải là một truy vấn hợp lệ. Nếu được sử dụng, bạn phải gọi phương thức này 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	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 thông số thuộc loại google.Visualization.QueryResponse.

Phản hồi truy vấn

Biểu thị phản hồi thực thi truy vấn khi 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ố đến hàm callback được thiết lập khi Query.send được gọi.

Phương pháp

Phương thức	Giá trị trả về	Mô tả
getDataTable()	Bảng dữ liệu	Trả về bảng dữ liệu do nguồn dữ liệu trả về. Trả về null nếu quá trình 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 đối với các truy vấn không thành công. Nếu quá trình 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à thông báo dành cho nhà phát triển và có thể chứa thông tin kỹ thuật, chẳng hạn như "Cột {salary} không tồn tại".
getMessage()	Chuỗi	Trả về thông báo lỗi ngắn đối với các truy vấn không thành công. Nếu thực thi thành công truy vấn, 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 ngắn chỉ dành cho người dùng cuối, chẳng hạn như "Truy vấn không hợp lệ" hoặc "Bị từ chối truy cập".
getReasons()	Mảng chuỗi	Trả về một mảng gồm 0 mục nhập khác. Mỗi mục nhập là một chuỗi ngắn có lỗi hoặc mã cảnh báo được đưa ra trong khi thực thi truy vấn. Mã có thể sử 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 truy vấn sẽ không được trả về do giới hạn 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ó thông báo cảnh báo.
isError()	Boolean	Trả về true nếu quá trình 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 lượt thực thi truy vấn thành công và phản hồi chứa một bảng dữ liệu.

Lỗi hiển thị

API này cung cấp một số hàm để giúp bạn hiển thị thông báo lỗi tuỳ chỉnh cho người dùng. Để sử dụng những 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 hoặc chỉ là một vùng chứa lỗi. Nếu bạn chỉ định hình ảnh chứa phần tử chứa, thông báo lỗi sẽ xuất hiện phía trên hình ảnh. 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ề điều đó.

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

Chức năng	Giá trị trả về	Mô tả
addError(container, message, opt_detailedMessage, opt_options)	Giá trị của mã nhận dạng chuỗi xác định đối tượng lỗi được tạo. Đây là giá trị duy nhất trên trang và có thể dùng để xoá lỗi hoặc tìm phần tử bị lỗi.	Thêm một khối hiển thị lỗi vào phần tử trang đã chỉ định, với văn bản và định dạng được chỉ định. vùng chứa – Phần tử DOM mà bạn chèn thông báo lỗi vào. Nếu không tìm thấy vùng chứa, hàm sẽ gửi lỗi JavaScript. thông báo – Một thông báo dạng chuỗi cần hiển thị. opt_DetailsMessage – 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 thuộc tính này 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 thiết lập nhiều tuỳ chọn hiển thị cho thông báo. Có những tuỳ chọn sau: showInTooltip – Một giá trị boolean chỉ hiển thị thông báo chi tiết dưới dạng văn bản trong chú giải công cụ và giá trị false cho thấy thông báo chi tiết trong nội dung vùng chứa sau thông báo ngắn. Giá trị mặc định là true. type – Một chuỗi mô tả loại lỗi, giúp 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à "cảnh báo". Giá trị mặc định là 'lỗi'. style - Chuỗi kiểu cho thông báo lỗi. Kiểu này sẽ ghi đè mọi kiểu được á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. ređốiable – 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ã nhận dạng chuỗi xác định đối tượng lỗi được tạo hoặc giá trị rỗng nếu phản hồi không cho biết lỗi. Đây là giá trị duy nhất trên trang và có thể dùng để xóa lỗi hoặc tìm phần tử bị lỗi.	Chuyển phản hồi truy vấn và vùng chứa thông báo lỗi đến phương thức này: nếu phản hồi truy vấn cho biết lỗi truy vấn, sẽ hiển thị một 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, phương thức này sẽ báo lỗi JavaScript. Truyền QueryResponse đã nhận được trong trình xử lý truy vấn vào thông báo này để hiển thị lỗi. Nó 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 mà bạn chèn thông báo lỗi vào. Nếu không tìm thấy vùng chứa, hàm sẽ gửi lỗi JavaScript. phản hồi – Đối tượng QueryResponse mà trình xử lý truy vấn của bạn nhận được để phản hồi truy vấn. Nếu giá trị này là rỗng, phương thức này sẽ báo lỗi JavaScript.
removeError(id)	Boolean: true nếu lỗi đã bị xoá; false nếu không bị xoá.	Xoá lỗi do mã 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	Xóa tất cả các khối lỗi khỏi một vùng chứa được chỉ định. Nếu vùng chứa được chỉ định không tồn tại, việc này sẽ tạo ra 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 lỗi JavaScript.
getContainer(errorId)	Xử lý thành phần DOM có lỗi được chỉ định hoặc rỗng nếu không tìm thấy.	Truy xuất xử lý cho phần tử vùng chứa có 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 sự kiện kích hoạt đều cho biết điều gì đó đã xảy ra. Là người dùng biểu đồ, bạn thường muốn theo dõi những sự kiện này. Nếu tự mã hoá hình ảnh, bạn cũng có thể muốn kích hoạt các sự kiện đó.

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

• google.Visualization.events.addListener() và google.Visualization.events.addOneTimeListener() sẽ nghe các sự kiện.
• google.Visualization.events.removeListener() sẽ xóa trình nghe hiện có
• google.Visualization.events.removeAllListeners() xóa tất cả người 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 đượ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 truyền vào hàm xử lý.

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

nguồn_hình_ảnh_nguồn

Xử lý thực thể hình ảnh nguồn.

event_name

Tên chuỗi của sự kiện cần nghe. Hình ảnh trực quan phải ghi lại những sự kiện mà hình ảnh đó gửi.

handling_function

Tên của hàm JavaScript cục bộ để 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 thông số.

Trả về

Một trình xử lý trình nghe cho trình nghe mới. Bạn có thể sử dụng trình xử lý để xóa trình nghe này sau khi cần thiết 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()

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

Ví dụ về trường hợp hữu ích: mọi bản vẽ sẽ tạo ra một sự kiện ready. Nếu chỉ muốn ready đầu tiên thực thi mã của mình, bạn nên addOneTimeListener thay vì addListener.

removeListener()

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

google.visualization.events.removeListener(listener_handler)

listener_handler

Trình xử lý xử lý để xoá, như được trả về bởi google.Visualization.events.addListener().

removeAllListeners()

Gọi phương thức này để hủy đă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)

nguồn_hình_ảnh_nguồn

Xử lý thực thể hình ảnh nguồn mà tất cả trình nghe sự kiện sẽ bị xoá.

trigger()

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

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

nguồn_hình_ảnh_nguồn

Xử lý thực thể 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, bạn chỉ cần chuyển từ khoá this vào.

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: "Chào bạn!", điểm: 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; người nhận phải chuẩn bị sẵn sàng để chấp nhận giá trị rỗng cho thông số này.

Ví dụ

Sau đây là một ví dụ về hình ảnh trực quan hoá một phương thức có tên là "select" (chọn) khi phương thức onclick đượ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 thức và thuộc tính hình ảnh 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. Tuy nhiên, xin lưu ý rằng không có quy trình kiểm tra loại nào để thực thi các tiêu chuẩn này, vì vậy, bạn nên đọc tài liệu cho từng hình ảnh.

• Hàm dựng
• 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 ý: Các 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 không gian tên dạng google.Visualization.

Hàm dựng

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

visualization_class_name(dom_element)

dom_element

Con trỏ tới một phần tử DOM mà bạn nên nhúng hình ảnh trực quan.

Ví dụ

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

draw()

Vẽ hình ảnh trên trang. Trên thực tế, tính năng này có thể tìm nạp một hình ảnh trên máy chủ hoặc tạo hình ảnh đồ hoạ trên trang bằng mã hình ảnh 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 dựng.

draw(data[, options])

dữ liệu

Một DataTable hoặc DataView đang giữ dữ liệu cần dùng để vẽ biểu đồ. Không có phương thức chuẩn nào để trích xuất DataTable từ biểu đồ.

tùy chọn

[Không bắt buộc] Bản đồ 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 trực quan hoá sẽ liệt kê các tuỳ chọn mà bạn có thể sử dụng và nên 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 để truyền vào bản đồ tùy 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()

Điều này được hiển thị (không bắt buộc) bằng các hình ảnh trực quan có chú giải công cụ và cho phép các hành động trong chú giải công cụ.

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

Ví dụ:

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

getSelection()

Việc này được hiển thị (không bắt buộc) bằng hình ảnh cho phép bạn truy cập vào dữ liệu đang chọn trong hình ảnh.

selection_array getSelection()

Trả về

selection_array Một mảng các đối tượng đã 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 có giá trị rỗng thì lựa chọn đó sẽ là một cột; còn nếu thuộc tính column có giá trị 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() để nhận giá trị của mục đã chọn. Mảng được 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()

Điều này được hiển thị (không bắt buộc) bằng các hình ảnh trực quan có chú giải công cụ và cho phép các hành động trong chú giải công cụ.

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

Ví dụ:

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

setAction()

Điều này được hiển thị (không bắt buộc) bằng các hình ảnh trực quan có chú giải công cụ và cho phép các hành động trong chú giải công cụ. Tính năng này chỉ hoạt động với các biểu đồ cốt lõi (thanh, cột, đường, khu vực, tán xạ, kết hợp, bong bóng, bánh, bánh rán, nến, biểu đồ, khu vực bậc thang).

Đặt hành động trong chú giải công cụ sẽ được 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 cho thao tác được đặt, text – văn bản sẽ xuất hiện trong chú giải công cụ cho thao tác và action – hàm sẽ chạy khi người dùng nhấp vào văn bản thao tác.

Bạn phải thiết lập tất cả hành động trong chú giải 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 hai thuộc tính bổ sung: visible và enabled. Các thuộc tính này phải là các hàm trả về các giá trị boolean cho biết liệu thao tác chú giải công cụ có hiển thị và/hoặ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()

Bạn có thể chọn một mục dữ liệu trong hình ảnh (ví dụ: một điểm trong biểu đồ vùng hoặc một thanh trong biểu đồ thanh). Khi phương thức này được gọi, hình ảnh trực quan phải cho biết lựa chọn mới là gì. Việc triển khai setSelection() không được kích hoạt sự kiện "select" (chọn). Hình ảnh trực quan có thể bỏ qua một phần của lựa chọn. Ví dụ: một bảng chỉ có thể hiển thị các hàng đã 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 khi phương thức này được gọi, tất 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 rõ ràng nào để bỏ chọn từng mục; để bỏ chọn từng mục riêng lẻ, hãy gọi setSelection() để giữ nguyên các mục đã chọn; để bỏ chọn tất cả các phần tử, hãy gọi setSelection(), setSelection(null) hoặc setSelection([]).

setSelection(selection_array)

mảng_lựa_chọn

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

mảngToDataTable()

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

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

Cú pháp

google.visualization.arrayToDataTable(twoDArray, opt_firstRowIsData)

haiDArray

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), hàng đầu tiên sẽ được hiểu là nhãn tiêu đề. Các loại dữ liệu của từng cột được tự động diễn giải từ dữ liệu đã cho. Nếu một ô không có giá trị, hãy chỉ định một giá trị rỗng hoặc trống cho phù 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 đều được giả định là dữ liệu. Nếu giá trị là false, thì hàng đầu tiên được giả định là một hàng tiêu đề và các giá trị được chỉ định là nhãn cột. Mặc định là sai.

Trả về

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 sẽ tạo biểu đồ trong một lệnh gọi. Ưu điểm của việc sử dụng phương thức này là yêu cầu ít mã hơn một chút và bạn có thể chuyển đổi tuần tự và lưu các hình ảnh 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 để phát hiện các sự kiện biểu đồ.

Cú pháp

google.visualization.drawChart(chart_JSON_or_object)

biểu_thức_JSON_hoặc_đối_tác

Chuỗi ký tự JSON hoặc đối tượng JavaScript, với các thuộc tính sau (phân biệt chữ hoa chữ thường):

Thuộc tính	Loại	Bắt buộc	Mặc định	Mô tả
typeType	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, phương thức này sẽ tải thư viện cho bạn nếu đây là hình ảnh trực quan 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.
Mã vùng chứa	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 chọn	Đối tượng	Không bắt buộc	không có	Đối tượng mô tả các tuỳ 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	DataTable dùng để điền sẵn hình ảnh trực quan. Giá trị này có thể là chuỗi đại diện JSON theo định nghĩa của một DataTable, như mô tả ở trên hoặc một ô điều khiển đối tượng google.visualization.DataTable được điền hoặc một mảng 2 chiều như đượ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.
Url nguồn dữ liệu	Chuỗi	Không bắt buộc	Không	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	Nếu chỉ định dataSourceUrl, bạn có thể tuỳ ý chỉ định một chuỗi truy vấn giống như SQL bằng cách sử dụng Ngôn ngữ truy vấn hình ảnh để lọc hoặc thao tác dữ liệu.
Khoảng thời gian làm mới	Số	Không bắt buộc	Không	Tần suất, bằng giây, hình ảnh sẽ làm mới nguồn truy vấn của hình ảnh. 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	Đặt một đối tượng khởi tạo DataView, đóng vai trò như một bộ lọc đối với dữ liệu cơ bản, được xác định bằng tham số dataTable hoặc dataSourceUrl. Bạn có thể truyền một chuỗi hoặc đối tượng khởi tạo DataView, như đối tượng trả về bởi dataview.toJSON(). Ví dụ: "view": {"columns": [1, 2]} Bạn cũng có thể truyền một mảng đố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 một bảng dữ liệu mới, còn DataView thứ hai được áp dụng cho bảng dữ liệu do á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à chứa cụm từ tìm kiếm SELECT A,D HERE 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 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 truyền vào một chuỗi đại diện chuỗi JSON của 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ử 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 hình ảnh thành các định dạng khác nhau hoặc để cung cấp phiên bản có thể nhúng của hình ảnh để sử dụng ở nhiều nơi. Hãy xem trang thanh công cụ để biết thêm thông tin và ví dụ về mã.