Tổng quan
Biểu đồ chú giải là các biểu đồ dạng chuỗi thời gian tương tác hỗ trợ chú giải. Lưu ý rằng tiến trình được chú thích hiện sẽ tự động sử dụng Biểu đồ chú thích.
Cảnh báo gây bối rối: Hiện tại, Biểu đồ chú thích của Google khác với chú thích mà các biểu đồ khác của Google (hiện là vùng, thanh, cột, tổ hợp, dòng và tán xạ) hỗ trợ. Trong các biểu đồ đó, các chú thích được chỉ định trong một cột dữ liệu riêng biệt và hiển thị dưới dạng các đoạn văn bản ngắn mà người dùng có thể di chuột qua để xem toàn bộ văn bản chú thích đó. Ngược lại, Biểu đồ chú thích hiển thị các chú thích đầy đủ ở bên phải, như thể hiện dưới đây.
Ví dụ:
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type='text/javascript'>
google.charts.load('current', {'packages':['annotationchart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'Kepler-22b mission');
data.addColumn('string', 'Kepler title');
data.addColumn('string', 'Kepler text');
data.addColumn('number', 'Gliese 163 mission');
data.addColumn('string', 'Gliese title');
data.addColumn('string', 'Gliese text');
data.addRows([
[new Date(2314, 2, 15), 12400, undefined, undefined,
10645, undefined, undefined],
[new Date(2314, 2, 16), 24045, 'Lalibertines', 'First encounter',
12374, undefined, undefined],
[new Date(2314, 2, 17), 35022, 'Lalibertines', 'They are very tall',
15766, 'Gallantors', 'First Encounter'],
[new Date(2314, 2, 18), 12284, 'Lalibertines', 'Attack on our crew!',
34334, 'Gallantors', 'Statement of shared principles'],
[new Date(2314, 2, 19), 8476, 'Lalibertines', 'Heavy casualties',
66467, 'Gallantors', 'Mysteries revealed'],
[new Date(2314, 2, 20), 0, 'Lalibertines', 'All crew lost',
79463, 'Gallantors', 'Omniscience achieved']
]);
var chart = new google.visualization.AnnotationChart(document.getElementById('chart_div'));
var options = {
displayAnnotations: true
};
chart.draw(data, options);
}
</script>
</head>
<body>
<div id='chart_div' style='width: 900px; height: 600px;'></div>
</body>
</html>
Đang tải
Tên gói google.charts.load là "annotationchart".
google.charts.load("current", {packages: ['annotationchart']});
Tên lớp của hình ảnh trực quan là google.visualization.AnnotationChart.
var visualization = new google.visualization.AnnotationChart(container);
Định dạng dữ liệu
Bạn có thể hiển thị một hoặc nhiều đường trên biểu đồ. Mỗi hàng đại diện cho một vị trí X trên biểu đồ, tức là một thời điểm cụ thể; mỗi dòng được mô tả bằng một tập hợp từ một đến ba cột.
- Cột đầu tiên thuộc loại
datehoặcdatetimevà chỉ định giá trị X của điểm trên biểu đồ. Nếu cột này thuộc loạidate(chứ không phảidatetime) thì độ phân giải thời gian nhỏ nhất trên trục X sẽ là một ngày. - Sau đó, mỗi dòng dữ liệu sẽ được mô tả bằng một tập hợp gồm một đến ba cột bổ sung như mô tả ở đây:
- Giá trị Y – [Bắt buộc, Số] Cột đầu tiên trong mỗi tập hợp mô tả giá trị của dòng tại cột tương ứng tại cột đầu tiên. Nhãn của cột hiển thị trên biểu đồ dưới dạng tiêu đề của dòng đó.
- Tiêu đề chú thích – [Không bắt buộc, Chuỗi] Nếu một cột chuỗi tuân theo cột giá trị và tuỳ chọn
displayAnnotationslà đúng, thì cột này sẽ giữ một tiêu đề ngắn mô tả điểm này. Ví dụ: nếu dòng này thể hiện nhiệt độ ở Brazil và điểm này là một con số rất cao, thì tiêu đề có thể là "Ngày kỷ lục nhất trong lịch sử". - Văn bản chú thích – [Chuỗi không bắt buộc] Nếu tồn tại cột chuỗi thứ hai cho chuỗi này, thì giá trị ô sẽ được dùng làm văn bản mô tả bổ sung cho điểm này. Bạn phải đặt tùy chọn
displayAnnotationsthành true để sử dụng cột này. Bạn có thể sử dụng thẻ HTML nếu đặtallowHtmlthànhtrue; về cơ bản không có giới hạn kích thước, nhưng hãy lưu ý rằng các mục quá dài có thể làm tràn phần hiển thị. Bạn không bắt buộc phải có cột này ngay cả khi bạn có cột tiêu đề chú thích cho điểm này. Biểu đồ không sử dụng nhãn cột. Ví dụ: nếu đây là ngày nóng nhất điểm kỷ lục, bạn có thể nói những câu như "Ngày gần nhất tiếp theo là mát hơn 10 độ!".
Các lựa chọn về cấu hình
| Tên | |
|---|---|
| allowHtml |
Nếu bạn đặt chính sách này thành true, thì mọi văn bản chú thích bao gồm các thẻ HTML sẽ được hiển thị dưới dạng HTML. Loại: Boolean
Mặc định: sai
|
| allValuesSuffix |
Một hậu tố sẽ được thêm vào tất cả các giá trị trong chú giải và nhãn đánh dấu trên các trục dọc. Loại: chuỗi
Mặc định: không có
|
| Chú thích chiều rộng |
Chiều rộng (tính theo phần trăm) của vùng chú thích trong toàn bộ vùng biểu đồ. Phải là một số thuộc phạm vi từ 5 đến 80. Loại: số
Mặc định: 25
|
| màu |
Màu sắc sử dụng cho đường biểu đồ và nhãn. Một mảng chuỗi. Mỗi phần tử là một chuỗi ở định dạng màu HTML hợp lệ. Ví dụ: "màu đỏ" hoặc "#00cc00". Loại: Mảng chuỗi
Mặc định: Màu mặc định
|
| định dạng ngày |
Định dạng dùng để hiển thị thông tin ngày ở góc trên cùng bên phải. Định dạng của trường này được xác định bởi lớp java SimpleDateFormat. Loại: chuỗi
Mặc định:
"MMMM dd, yyyy" hoặc "HH:mm MMMM dd, yyyy" tuỳ thuộc vào loại cột đầu tiên
(ngày hoặc giờ).
|
| chú thích hiển thị |
Nếu bạn đặt thành false, biểu đồ sẽ ẩn bảng chú thích và các chú thích cũng như chú thích văn bản sẽ không hiển thị (bảng chú thích cũng sẽ không hiển thị nếu không có chú thích nào trong dữ liệu, bất kể lựa chọn này). Khi bạn đặt tuỳ chọn này thành true, sau mỗi cột số, có thể thêm hai cột chuỗi chú thích tuỳ chọn, một cột cho tiêu đề chú thích và một cột cho văn bản chú thích. Loại: Boolean
Mặc định: true
|
| displayAnFilterFilter |
Nếu bạn đặt chính sách này thành true, biểu đồ sẽ hiển thị một tùy chọn kiểm soát bộ lọc để lọc chú thích. Hãy sử dụng tùy chọn này khi có nhiều chú thích. Loại: Boolean
Mặc định: sai
|
| displayDateBarSeparator |
Hiển thị dòng phân cách thanh nhỏ ( | ) giữa giá trị chuỗi và ngày trong chú giải hay không, điều này có nghĩa là có. Loại: Boolean
Mặc định: true
|
| displayExactValues |
Liệu có hiển thị phiên bản rút gọn làm tròn của các giá trị trên đầu biểu đồ hay không để tiết kiệm không gian; false cho biết rằng giá trị đó có thể. Ví dụ: nếu được đặt thành false thì 56123.45 có thể hiển thị là 56,12k. Loại: Boolean
Mặc định: sai
|
| displayLegendDots |
Hiển thị dấu chấm bên cạnh giá trị trong văn bản chú giải, trong khi true có nghĩa là có. Loại: Boolean
Mặc định: true
|
| displayLegendValues |
Liệu có hiển thị các giá trị được đánh dấu trong chú giải hay không, điều này có nghĩa là có. Loại: Boolean
Mặc định: true
|
| displayRangeSelector |
Liệu có hiển thị vùng chọn phạm vi thu phóng (khu vực ở cuối biểu đồ), trong đó false có nghĩa là không. Bố cục trong bộ chọn thu phóng là phiên bản tỷ lệ nhật ký của chuỗi đầu tiên trong biểu đồ, được điều chỉnh theo tỷ lệ để vừa với chiều cao của bộ chọn thu phóng. Loại: Boolean
Mặc định: true
|
| nút Zoom |
Liệu có hiển thị các nút thu phóng ("1d 5d 1m" v.v.), trong đó false có nghĩa là không. Loại: Boolean
Mặc định: true
|
| tô |
Một số từ 0 đến 100 (bao gồm) chỉ định alpha của phần điền vào bên dưới mỗi dòng trong biểu đồ đường. 100 có nghĩa là 100% mờ và 0 có nghĩa là không điền. Màu tô giống với màu phía trên đường kẻ. Loại: số
Mặc định: 0
|
| Thêm vị trí chú giải |
Đặt chú giải có màu trên cùng một hàng với các nút thu phóng và ngày ('sameRow") hay trên một hàng mới ("'newRow'). Loại: chuỗi
Mặc định: "sameRow"
|
| tối đa |
Giá trị lớn nhất để hiển thị trên trục Y. Nếu điểm dữ liệu tối đa vượt quá giá trị này, thì
tùy chọn cài đặt này sẽ bị bỏ qua và biểu đồ sẽ được điều chỉnh để hiển thị dấu kiểm chính tiếp theo
phía trên điểm dữ liệu tối đa. Điều này sẽ được ưu tiên hơn mức tối đa của trục Y do Điều này tương tự như Loại: số
Mặc định: tự động
|
| phút |
Giá trị tối thiểu để hiển thị trên trục Y. Nếu điểm dữ liệu tối thiểu nhỏ hơn giá trị này, thì
chế độ cài đặt này sẽ bị bỏ qua và biểu đồ sẽ được điều chỉnh để hiển thị dấu kiểm lớn tiếp theo
bên dưới điểm dữ liệu tối thiểu. Điều này sẽ được ưu tiên hơn mức tối thiểu trên trục Y do Điều này tương tự như Loại: số
Mặc định: tự động
|
| numberFormats |
Chỉ định mẫu định dạng số sẽ dùng để định dạng các giá trị ở đầu biểu đồ. Các mẫu phải ở định dạng như được chỉ định bởi lớp java javaFormat.
Nếu bạn chỉ định tùy chọn này, thì tùy chọn Loại: Chuỗi hoặc bản đồ các cặp số:Chuỗi
Mặc định: tự động
|
| tỷ lệ cột |
Chỉ định các giá trị sẽ hiển thị trên dấu kiểm trục Y trong biểu đồ. Giá trị mặc định là có một tỷ lệ duy nhất ở phía bên phải, áp dụng cho cả hai chuỗi; nhưng bạn có thể có các cạnh khác nhau của biểu đồ được điều chỉnh tỷ lệ theo các giá trị chuỗi khác nhau. Tùy chọn này sẽ lấy một mảng từ 0 đến 3 số để chỉ định chỉ mục (dựa trên 0) của chuỗi này làm giá trị tỷ lệ. Vị trí hiển thị các giá trị này phụ thuộc vào số lượng giá trị bạn đưa vào mảng:
Khi hiển thị nhiều tỷ lệ, bạn nên đặt tuỳ chọn Loại: Mảng số
Mặc định: Tự động
|
| tỷ lệ |
Định dạng số được sử dụng cho nhãn đánh dấu trục. Giá trị mặc định của Loại: chuỗi
Mặc định: "#"
|
| tỷ lệ |
Đặt các giá trị tối đa và tối thiểu được hiển thị trên trục Y. Bạn có các tuỳ chọn sau:
Nếu bạn chỉ định các tùy chọn tối thiểu và/hoặc tối đa, các tùy chọn này sẽ được ưu tiên hơn giá trị tối thiểu và tối đa được xác định theo loại tỷ lệ. Loại: chuỗi
Mặc định: "đã khắc phục"
|
| bảng |
Chứa các tùy chọn liên quan đến bảng chú thích. Để chỉ định các thuộc tính của đối tượng này, bạn có thể sử dụng ký hiệu cố định đối tượng:
var options: {
table: {
sortAscending: true,
sortColumn: 1
}
};
Loại: đối tượng
Mặc định: rỗng
|
| Table.sortAsccing |
Nếu bạn đặt chính sách này thành Loại: Boolean
Mặc định: sai
|
| Table.sortColumn |
Chỉ mục cột của bảng chú thích mà chú thích sẽ được sắp xếp. Chỉ mục phải là 0 đối với cột nhãn chú thích hoặc 1 đối với cột văn bản chú thích. Loại: số
Mặc định: 0
|
| độ dày |
Một số từ 0 đến 10 (bao gồm) chỉ định độ dày của đường kẻ, trong đó 0 là độ mỏng nhất. Loại: số
Mặc định: 0
|
| Thu phóng thời gian kết thúc |
Đặt ngày kết thúc/thời gian của phạm vi thu phóng đã chọn. Loại: Ngày
Mặc định: không có
|
| ZoomStartTime |
Đặt ngày/giờ bắt đầu của phạm vi thu phóng đã chọn. Loại: Ngày
Mặc định: không có
|
Phương thức
| Phương thức | |
|---|---|
clearChart() |
Xóa biểu đồ và giải phóng tất cả tài nguyên được phân bổ của biểu đồ. Loại dữ liệu trả về: không có
|
draw(data, options, state) |
Vẽ biểu đồ. Loại dữ liệu trả về: không có
|
getContainer() |
Truy xuất xử lý cho phần tử vùng chứa chứa biểu đồ chú thích. Loại dữ liệu trả về: Xử lý một phần tử DOM
|
getSelection() |
Triển khai Loại dữ liệu trả về: Một mảng các phần tử lựa chọn
|
getVisibleChartRange() |
Trả về một đối tượng có các thuộc tính
Loại dữ liệu trả về:
Một đối tượng có thuộc tính
start và end
|
hideDataColumns(columnIndexes) |
Ẩn chuỗi dữ liệu được chỉ định khỏi biểu đồ. Chấp nhận một thông số có thể là một số hoặc một mảng số, trong đó 0 tham chiếu đến chuỗi dữ liệu đầu tiên, v.v. Loại dữ liệu trả về: không có
|
setVisibleChartRange(start, end) |
Đặt dải ô hiển thị (thu phóng) thành dải ô đã chỉ định. Chấp nhận hai tham số thuộc loại Loại dữ liệu trả về: không có
|
showDataColumns(columnIndexes) |
Hiển thị chuỗi dữ liệu đã chỉ định từ biểu đồ, sau khi dữ liệu bị ẩn bằng phương thức Loại dữ liệu trả về: không có
|
Sự kiện
| Tên | |
|---|---|
rangechange |
Được kích hoạt khi người dùng thay đổi thanh trượt phạm vi. Các điểm cuối phạm vi mới sẽ có sẵn dưới dạng
google.visualization.events.addListener(chart, 'rangechange', rangechange_handler);
function rangechange_handler(e) {
console.log('You changed the range to ', e['start'], ' and ', e['end']);
}
Thuộc tính: bắt đầu, kết thúc
|
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 bạn gọi phương thức Thuộc tính: không có
|
select |
Được kích hoạt khi người dùng nhấp vào một thực thể hình ảnh. Để tìm hiểu những mục bạn đã chọn, hãy gọi
Thuộc tính: không có
|
Chính sách dữ liệu
Toàn bộ mã và dữ liệu đều được xử lý và kết xuất trong trình duyệt. Dữ liệu không được gửi đến bất kỳ máy chủ nào.