Trang này mô tả khái niệm và cách sử dụng vai trò trong bảng dữ liệu biểu đồ.
Vai trò là gì?
Các đối tượng Google DataTable và DataView hiện hỗ trợ vai trò cột được chỉ định rõ ràng. Vai trò trong cột mô tả mục đích của dữ liệu trong cột đó: chẳng hạn như một cột có thể chứa dữ liệu mô tả văn bản trong chú giải công cụ, chú thích điểm dữ liệu hoặc các chỉ báo về độ không chắc chắn. Hầu hết các vai trò trong cột đều áp dụng cho cột "dữ liệu" phía trước, cho dù cột đó nằm ngay trước hay trước cột đầu tiên trong một nhóm cột vai trò liên tiếp. Ví dụ: bạn có thể có hai cột sau cột "data", một cột cho "tooltip" (chú giải công cụ) và một cột cho "annotation" (chú thích). Nhưng sau cột 'domain', chúng tôi thường cũng cho phép các vai trò trong cột 'annotationText' và 'annotationText'.
Lưu ý: Nếu bạn muốn kiểm soát nội dung của phần chú thích xuất hiện khi người dùng di chuột qua một biểu đồ, hãy xem phần Chú thích công cụ.
Ban đầu, chỉ có hai vai trò cho một cột: "domain" (miền) chỉ định các giá trị trục chính; và "data" (dữ liệu) chỉ định chiều cao của thanh, chiều rộng của lát cắt biểu đồ hình tròn, v.v. Các vai trò này được chỉ định ngầm, dựa trên thứ tự và loại cột trong bảng. Tuy nhiên, nhờ khả năng chỉ định rõ ràng vai trò của cột, giờ đây, bạn có thể thêm những cột không bắt buộc để cung cấp những tính năng mới, thú vị cho biểu đồ, chẳng hạn như nhãn chú thích tuỳ ý, văn bản di chuột và thanh không chắc chắn.
Nếu bạn không chỉ định rõ ràng vai trò của một cột, thì vai trò của cột đó sẽ được suy luận theo thứ tự của cột trong bảng, theo thông số kỹ thuật về định dạng dữ liệu của biểu đồ. Trang này sẽ cho bạn biết những vai trò mà bạn có thể chỉ định rõ ràng và cách chỉ định những vai trò đó.
Sau đây là dữ liệu so sánh những việc bạn có thể làm với biểu đồ dạng đường chỉ sử dụng vai trò mặc định (theo dự đoán) so với những vai trò khác được chỉ định rõ ràng.
Định dạng bảng dữ liệu biểu đồ dạng đường:
| Cột 0 | Cột 1 | ... | Cột N | |
|---|---|---|---|---|
| Mục đích | Giá trị dòng 1 | ... | Giá trị dòng N | |
| Loại dữ liệu | number | ... | number | |
| Role | tên miền | data | ... | data |
| Các vai trò không bắt buộc trong cột được hỗ trợ |
|
|
... |
|
| Biểu đồ không có vai trò cột rõ ràng | Biểu đồ có các vai trò dạng cột rõ ràng |
|---|---|
|
|
|
Biểu đồ này không áp dụng các vai trò một cách rõ ràng, nên chỉ có thể sử dụng bố cục cột miền và dữ liệu cơ bản như ở trên. Bảng dữ liệu: var data = new google.visualization.DataTable();
data.addColumn('string', 'Month'); // Implicit domain label col.
data.addColumn('number', 'Sales'); // Implicit series 1 data col.
data.addRows([
['April',1000],
['May', 1170],
['June', 660],
['July', 1030]
]); |
Biểu đồ này chỉ định vai trò một cách rõ ràng, nên bạn có thể thêm các cột không bắt buộc. Biểu đồ này có các cột không bắt buộc dành cho vai trò chú thích, calloutText, khoảng thời gian và về độ chắc chắn.
Bảng dữ liệu: var data = new google.visualization.DataTable();
data.addColumn('string', 'Month'); // Implicit domain label col.
data.addColumn('number', 'Sales'); // Implicit series 1 data col.
data.addColumn({type:'number', role:'interval'}); // interval role col.
data.addColumn({type:'number', role:'interval'}); // interval role col.
data.addColumn({type:'string', role:'annotation'}); // annotation role col.
data.addColumn({type:'string', role:'annotationText'}); // annotationText col.
data.addColumn({type:'boolean',role:'certainty'}); // certainty col.
data.addRows([
['April',1000, 900, 1100, 'A','Stolen data', true],
['May', 1170, 1000, 1200, 'B','Coffee spill', true],
['June', 660, 550, 800, 'C','Wumpus attack', true],
['July', 1030, null, null, null, null, false]
]); |
Những vai trò nào có sẵn?
Bảng sau đây liệt kê tất cả vai trò được Google Biểu đồ hỗ trợ. Một số loại biểu đồ không hỗ trợ một số vai trò. Tài liệu của mỗi biểu đồ sẽ mô tả vai trò có sẵn và vị trí của các vai trò đó. Vai trò sẽ khác nhau tuỳ theo loại biểu đồ.
| Role | Nội dung mô tả | Ví dụ: |
|---|---|---|
| chú giải | Văn bản cần hiển thị trên biểu đồ gần điểm dữ liệu được liên kết. Văn bản sẽ xuất hiện mà không cần bất kỳ sự tương tác nào của người dùng. Bạn có thể gán chú giải và văn bản chú thích cho cả điểm dữ liệu và danh mục (nhãn trục). Có 2 kiểu chú thích: điểm (mặc định) dùng để vẽ văn bản chú thích gần điểm được chỉ định và đường kẻ dùng để vẽ văn bản chú thích trên một đường chia đôi vùng biểu đồ. Bạn có thể chỉ định kiểu đường kẻ bằng cách đặt tuỳ chọn biểu đồ sau: Loại dữ liệu: chuỗi Mặc định: Chuỗi trống |
Dữ liệu: nhãn: 'Năm', 'Bán hàng', rỗng, rỗng, 'Chi phí', rỗng, rỗng
role: miền, dữ liệu, chú thích, chú thích, dữ liệu, chú thích, chú thích, null, null, null, null
"A" và "B" trong biểu đồ này là chú thích. Hãy di chuột qua chú thích để xem văn bản chú thích. Xin lưu ý rằng bạn phải di chuột qua chú giải, chứ không phải điểm dữ liệu sẽ áp dụng chú giải, để hiển thị giá trị matchingText. Chấp nhận giá trị rỗng cho cả ô chú giải và thẻ chú thích. Tuy nhiên, nếu có giá trị thẻ chú giải, bạn phải có giá trị chú giải liên kết. |
| annotationText | Văn bản mở rộng sẽ xuất hiện khi người dùng di chuột qua chú thích được liên kết. Bạn có thể gán chú giải và văn bản chú thích cho cả điểm dữ liệu và danh mục (nhãn trục). Nếu có cột calloutText, bạn cũng phải có cột chú thích. Ngược lại, văn bản chú thích sẽ xuất hiện khi người dùng di chuột qua điểm dữ liệu được liên kết trên biểu đồ. Loại dữ liệu: chuỗi Mặc định: Chuỗi trống |
|
| độ chắc chắn | Cho biết liệu một điểm dữ liệu có chắc chắn hay không. Cách hiển thị biểu đồ này phụ thuộc vào loại biểu đồ, ví dụ: biểu đồ có thể được biểu thị bằng các đường nét đứt hoặc màu nền có sọc. Đối với biểu đồ dạng đường và biểu đồ vùng, phân đoạn giữa hai điểm dữ liệu là chắc chắn khi và chỉ khi cả hai điểm dữ liệu đều chắc chắn. Loại dữ liệu: boolean, trong đó true là chắc chắn, false là không chắc chắn. Mặc định: true |
|
| điểm nhấn | Làm nổi bật các điểm dữ liệu được chỉ định trong biểu đồ. Được hiển thị dưới dạng đường dày và/hoặc điểm lớn. Đối với biểu đồ dạng đường và biểu đồ vùng, phân đoạn giữa hai điểm dữ liệu được nhấn mạnh khi và chỉ khi cả hai điểm dữ liệu được nhấn mạnh. Loại dữ liệu: boolean Mặc định: false |
Dữ liệu: label: 'Year', 'Sales', null, 'Expenses', null
role: domain, data, emphasis, data, emphasis
'2004', 1000, true, 400, false
'2005', 1170, true, 460, true
'2006', 660, false, 1120, true
'2007', 1030, false, 540, true
Trong biểu đồ này, chuỗi "Lượt bán hàng" có một phân đoạn được nhấn mạnh, được chỉ định bởi cột 3, hàng 1 và hàng 2. Loạt "Chi phí" có hai phân đoạn được nhấn mạnh, được chỉ định bởi cột thứ năm, hàng hai, ba và bốn. Hãy lưu ý rằng mức độ nhấn mạnh đòi hỏi cả hai điểm giới hạn đều phải được nhấn mạnh. |
| khoảng thời gian | Cho biết phạm vi dữ liệu tiềm năng cho một điểm cụ thể. Khoảng thời gian thường được hiển thị dưới dạng chỉ báo phạm vi kiểu thanh I. Cột khoảng thời gian là các cột số. Hãy thêm các cột khoảng thời gian theo cặp để đánh dấu giá trị thấp và cao của thanh. Bạn phải thêm giá trị khoảng thời gian theo thứ tự tăng dần, từ trái sang phải. Loại dữ liệu: number Mặc định: Không có khoảng thời gian |
Dữ liệu: label: 'Day', 'Stock value', null, null
role: domain, data, interval, interval
'Mon', 38, 20, 45
'Tue', 55, 31, 66
'Wed', 77, 50, 80
'Thurs', 66, 50, 77
Trong biểu đồ này, các giá trị khoảng thời gian xác định thanh I xung quanh các điểm. Các giá trị tăng từ trái sang phải. Khoảng thời gian cao nhất và thấp nhất xung quanh một điểm đánh dấu phần trên cùng và dưới cùng của thanh. Lưu ý: để biết toàn bộ thông tin chi tiết về các khoảng thời gian, hãy xem phần Khoảng thời gian. |
| phạm vi | Cho biết một điểm nằm trong phạm vi hay nằm ngoài phạm vi. Nếu một điểm nằm ngoài phạm vi, điểm đó sẽ không được nhấn mạnh về mặt hình ảnh. Đối với biểu đồ dạng đường và biểu đồ vùng, phân đoạn giữa hai điểm dữ liệu thuộc phạm vi nếu điểm cuối một thuộc phạm vi. Loại dữ liệu: boolean, trong đó true có nghĩa là thuộc phạm vi. Mặc định: true |
Dữ liệu: label: 'Year', 'Sales', null, 'Expenses', null
role: domain, data, scope, data, scope
'2004', 1000, false, 400, true
'2005', 1170, false, 460, false
'2006', 660, true, 1120, false
'2007', 1030, true, 540, false
Cột phạm vi đầu tiên áp dụng cho cột dữ liệu "Doanh số bán hàng" ở bên trái. Đoạn đầu tiên hiển thị ngoài phạm vi vì cả hai điểm ranh giới đều nằm ngoài phạm vi. Cột phạm vi thứ hai áp dụng cho cột dữ liệu "Chi phí" ở bên trái. Đoạn đầu tiên được đánh dấu là trong phạm vi vì một trong các điểm ranh giới của nó nằm trong phạm vi; phần còn lại của đường nằm ngoài phạm vi vì tất cả các điểm khác được đánh dấu là nằm ngoài phạm vi. |
| kiểu |
Tạo kiểu cho một số thuộc tính nhất định của các khía cạnh khác nhau của dữ liệu. Các giá trị đó là:
Loại dữ liệu: string, trong đó có thể áp dụng nhiều kiểu bằng cú pháp Mặc định: rỗng |
Dữ liệu:
label: 'Character', 'Popularity', 'Style',
role: domain, data, style,
'Hulk', 50, 'color: green',
'Captain America', 75, 'color: #0000cf;' +
'stroke-color: #cf001d',
'Wolverine', 90, 'opacity: 0.5;' +
'stroke-width: 5;' +
'stroke-color: #01a0ff;' +
'fill-color: #fff600',
'Iron Man', 60, 'color: #db9500;' +
'stroke-width: 10;' +
'stroke-color: #a30300',
'Spider Man', 100, 'bar {' +
'fill-color: #c8001d;' +
'stroke-width: 3;' +
'stroke-color: #1800c8}'
Trong biểu đồ này, mỗi thanh được tạo kiểu độc lập với các thanh khác khi sử dụng vai trò cột Lưu ý: bạn có thể xem thêm thông tin chi tiết ở phần khác về cách tuỳ chỉnh kiểu của điểm, dòng và thanh. Ngoài ra, hãy xem các lựa chọn cho từng loại biểu đồ, trong đó bạn có thể chỉ định kiểu cho các loại thực thể khác, chẳng hạn như vùng, văn bản và hộp. |
| chú giải công cụ |
Văn bản sẽ xuất hiện khi người dùng di chuột qua điểm dữ liệu được liên kết với hàng này. Lưu ý: tính năng này không được hỗ trợ bởi hình ảnh trực quan Biểu đồ bong bóng. Không thể tuỳ chỉnh nội dung của chú giải công cụ HTML của Biểu đồ bong bóng. Loại dữ liệu: chuỗi Mặc định: Giá trị điểm dữ liệu |
Dữ liệu: label: 'Year', 'Sales', null, 'Expenses', null
role: domain, data, tooltip, data, tooltip
'2004', 1000, '1M$ sales, 400, '$0.4M expenses
in 2004' in 2004'
'2005', 1170, '1.17M$ sales, 460, '$0.46M expenses
in 2005' in 2005'
'2006', 660, '.66$ sales, 1120, '$1.12M expenses
in 2006' in 2006'
'2007', 1030, '1.03M$ sales, 540, '$0.54M expenses
in 2007' in 2007'
Di chuột qua các điểm dữ liệu để hiển thị văn bản chú thích. Dữ liệu chú thích được gán cho tất cả các điểm trong cả hai dòng, trong cột 3 và 5. Lưu ý: để biết thêm thông tin chi tiết về cách tuỳ chỉnh chú thích, hãy xem bài viết Mẹo về công cụ. |
| miền | Bạn không cần chỉ định vai trò này một cách rõ ràng trừ phi thiết kế một biểu đồ nhiều miền (minh hoạ ở đây). Định dạng cơ bản của bảng dữ liệu giúp công cụ biểu đồ suy luận cột nào là cột miền. Tuy nhiên, bạn nên lưu ý đến cột nào là cột miền để biết được những cột nào khác có thể sửa đổi cột đó. Các cột miền chỉ định nhãn dọc theo trục chính của biểu đồ. Đôi khi, bạn có thể dùng nhiều cột miền để hỗ trợ nhiều thang đo trong cùng một biểu đồ. Loại dữ liệu: Thường là chuỗi, nhưng đôi khi đánh số hoặc ngày tháng |
Dữ liệu:
label: '2009, '2009, '2009, '2008, '2008 '2008
Quarter', Sales', Expenses', Quarter', Sales', Expenses'
role: domain, data, data, domain, data, data
'Q1/09', 1000, 400, 'Q1/08', 800, 300
'Q2/09', 1170, 460, 'Q2/08', 750, 400
'Q3/09', 660, 1120, 'Q3/08', 700, 540
'Q4/09', 1030, 540, 'Q4/08', 820, 620
Ví dụ này minh hoạ một biểu đồ nhiều miền. Hai cột dữ liệu đầu tiên sửa đổi miền đầu tiên ("Quý 2009") và hai cột dữ liệu cuối cùng sửa đổi miền thứ hai ("Quý 2008"). Cả hai miền đều được phủ trên cùng một tỷ lệ trục. |
| dữ liệu | Bạn không cần chỉ định rõ ràng vai trò này. Định dạng cơ bản của bảng dữ liệu cho phép công cụ biểu đồ suy luận cột nào là cột miền. Tuy nhiên, bạn nên lưu ý đến cột nào là cột dữ liệu để biết được những cột nào khác có thể sửa đổi cột đó. Cột vai trò dữ liệu chỉ định dữ liệu chuỗi dữ liệu cần hiển thị trong biểu đồ. Đối với hầu hết các biểu đồ, một cột = một chuỗi, nhưng điều này có thể thay đổi theo loại biểu đồ (ví dụ: biểu đồ tán xạ yêu cầu hai cột dữ liệu cho chuỗi đầu tiên và một cột bổ sung cho mỗi chuỗi bổ sung; biểu đồ hình nến yêu cầu bốn cột dữ liệu cho mỗi chuỗi). Loại dữ liệu: number |
Hệ phân cấp vai trò và liên kết
Sơ đồ dưới đây cho biết cột vai trò nào có thể áp dụng cho cột vai trò nào khác. Tất cả các cột, ngoại trừ cột miền đều áp dụng cho vùng lân cận gần nhất bên trái mà bạn có thể áp dụng cột đó.
Ví dụ: một cột scope áp dụng cho cột data gần nhất ở bên trái; cột annotationText sẽ áp dụng cho cột annotationText gần nhất ở bên trái; một annotation (chú giải) sẽ áp dụng cho data hoặc domain (chú giải) gần nhất ở bên trái.
Chỉ định vai trò
Các vai trò được chỉ định dưới dạng thuộc tính của cột trong đối tượng DataTable. Có một số cách để tạo cột vai trò, nhưng sau đây là những cách phổ biến nhất:
Hai kỹ thuật đầu tiên vẽ biểu đồ sau:
Phương thức DataTable.addColumn
Ví dụ sau đây sẽ tạo một biểu đồ thanh có điểm đánh dấu khoảng thời gian trên 3 thanh. Các điểm đánh dấu khoảng thời gian được cột thứ ba và thứ tư chỉ định bằng cách sử dụng phương thức DataTable.addColumn().
var data = new google.visualization.DataTable();
data.addColumn('string', 'Month'); // Implicit domain column.
data.addColumn('number', 'Sales'); // Implicit data column.
data.addColumn({type:'number', role:'interval'});
data.addColumn({type:'number', role:'interval'});
data.addColumn('number', 'Expenses');
data.addRows([
['April',1000, 900, 1100, 400],
['May', 1170, 1000, 1200, 460],
['June', 660, 550, 800, 1120],
['July', 1030, , , 540]
]);
var chart = new google.visualization.BarChart(
document.getElementById('visualization'));
chart.draw(data,
{width: 800, height: 600, title: 'Company Performance'});
Ký hiệu cố định JavaScript
Trong giá trị cố định JSON, bạn phải chỉ định thuộc tính p của cột có giá trị "role":"role-type".
Ví dụ sau minh hoạ cách chỉ định vai trò bằng ký hiệu cố định JavaScript. Bạn chỉ có thể làm việc này tại thời điểm tạo bảng.
{"cols":[
{"id":"","label":"Month","pattern":"","type":"string"},
{"id":"","label":"Sales","pattern":"","type":"number"},
{"id":"","label":"","pattern":"","type":"number","p":{"role":"interval"}},
{"id":"","label":"","pattern":"","type":"number","p":{"role":"interval"}},
{"id":"","label":"Expenses","pattern":"","type":"number"}],
"rows":[
{"c":[
{"v":"April","f":null},
{"v":1000,"f":null},
{"v":900,"f":null},
{"v":1100,"f":null},
{"v":400,"f":null}]},
{"c":[
{"v":"May","f":null},
{"v":1170,"f":null},
{"v":1000,"f":null},
{"v":1200,"f":null},
{"v":460,"f":null}]},
{"c":[{"v":"June","f":null},
{"v":660,"f":null},
{"v":550,"f":null},
{"v":800,"f":null},
{"v":1120,"f":null}]},
{"c":[
{"v":"July","f":null},
{"v":1030,"f":null},
{"v":null,"f":null},
{"v":null,"f":null},
{"v":540,"f":null}]}],
"p":null
}
Phương thức DataView.setColumns
Khi tạo chế độ xem, bạn có thể chỉ định rõ vai trò của cột. Điều này rất hữu ích khi tạo một cột mới được tính toán. Xem DataView.setColumns() để biết thêm thông tin.