Tổng quan
Biểu đồ chú thích là biểu đồ dạng đường theo chuỗi thời gian tương tác có hỗ trợ chú thích. Lưu ý rằng tiến trình có chú giải hiện sẽ tự động sử dụng Biểu đồ chú giải.
Cảnh báo nhầm lẫn: 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à khu vực, thanh, cột, kết hợp, đường và phân tán). Trong các biểu đồ đó, các chú giải được chỉ định trong một cột bảng dữ liệu riêng 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 văn bản chú thích đầy đủ. Ngược lại, Biểu đồ chú giải hiển thị các chú giải đầy đủ ở bên phải, như minh hoạ 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 đồ của mình. Mỗi hàng đại diện cho một vị trí X trên biểu đồ – tức là một thời gian cụ thể; mỗi dòng được mô tả bằng một tập hợp gồm từ 1 đến 3 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 được mô tả bằng một tập hợp gồm 1 đến 3 cột bổ sung như được mô tả ở đây:
- Y value – [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 thời điểm tương ứng tính từ cột đầu tiên. Nhãn cột xuất hiện trên biểu đồ dưới dạng tiêu đề của đường đó.
- Tiêu đề chú thích – [Không bắt buộc, Chuỗi] Nếu một cột chuỗi nằm sau cột giá trị và tuỳ chọn
displayAnnotationslà true, thì cột này chứa một tiêu đề ngắn mô tả điểm này. Ví dụ: nếu đườ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 nóng nhất được ghi nhận". - Văn bản chú thích – [Chuỗi không bắt buộc] Nếu có cột chuỗi thứ hai cho chuỗi văn bản này, thì giá trị của ô sẽ được dùng làm văn bản mô tả bổ sung cho điểm này. Bạn phải đặt lựa 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 về kích thước, nhưng xin lưu ý rằng các mục quá dài có thể làm tràn phần màn hình. 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 thời điểm này. Nhãn cột không được sử dụng trong biểu đồ. Ví dụ: nếu đây là ngày nóng nhất theo kỷ lục, bạn có thể nói những câu như "Ngày gần nhất tiếp theo nhiệt độ thấp hơn 10 độ!".
Các lựa chọn 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 chứa thẻ HTML sẽ hiển thị dưới dạng HTML. Loại: boolean
Mặc định: false
|
| allValuesSuffix |
Hậu tố cần thêm vào tất cả giá trị trong phần chú thích và nhãn đánh dấu trong các trục dọc. Loại: chuỗi
Mặc định: không có
|
| annotationsWidth |
Chiều rộng (tính bằng 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ố trong phạm vi từ 5 đến 80. Loại: số
Mặc định: 25
|
| màu |
Màu sẽ sử dụng cho nhãn và đường trong biểu đồ. 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ụ: "đỏ" hoặc "#00cc00". Loại: Mảng chuỗi
Mặc định: Màu mặc định
|
| dateFormat |
Định dạng dùng để hiển thị thông tin về ngày ở góc trên cùng bên phải. Định dạng của trường này được chỉ đị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 ngày giờ).
|
| displayAnnotations |
Nếu bạn đặt thành false, biểu đồ sẽ ẩn bảng chú giải, đồng thời các chú giải và calloutText sẽ không xuất hiện (bảng chú giải cũng sẽ không hiển thị nếu không có chú giải nào trong dữ liệu của bạn, bất kể tuỳ chọn này). Khi tuỳ chọn này được đặt thành true, sau mỗi cột số, bạn có thể thêm 2 cột chuỗi chú thích (không bắt buộc), 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
|
| displayAnnotationsFilter |
Nếu bạn đặt chính sách này thành true (đúng), biểu đồ sẽ hiển thị một chế độ kiểm soát bộ lọc để lọc chú thích. Hãy sử dụng tuỳ chọn này khi có nhiều chú thích. Loại: boolean
Mặc định: false
|
| displayDateBarSeparator |
Liệu có hiển thị dấu phân cách thanh nhỏ ( | ) giữa các giá trị chuỗi sự kiện và ngày trong phần chú thích hay không, khi true 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 và bo tròn của các giá trị ở đầu biểu đồ để tiết kiệm không gian hay không; giá trị false cho biết có thể hiển thị giá trị đó. Ví dụ: nếu đặt thành false, 56123,45 có thể hiển thị là 56,12k. Loại: boolean
Mặc định: false
|
| displayLegendDots |
Liệu có hiển thị dấu chấm bên cạnh giá trị trong văn bản chú thích hay không, trong đó 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, trong đó true 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 đồ) hay không, trong đó false nghĩa là không. Đường viền trong bộ chọn thu phóng là phiên bản theo tỷ lệ nhật ký của chuỗi đầu tiên trong biểu đồ, được điều chỉnh theo tỷ lệ cho vừa với chiều cao của bộ chọn thu phóng. Loại: boolean
Mặc định: true
|
| displayZoomButtons |
Liệu có hiển thị các nút thu phóng ("1d 5d 1m", v.v. hay không), trong đó giá trị false có nghĩa là không. Loại: boolean
Mặc định: true
|
| tô màu |
Một số từ 0 đến 100 (bao gồm cả giá trị này) chỉ định giá trị alpha của màu nền bên dưới mỗi dòng trong biểu đồ đường. 100 có nghĩa là độ mờ 100% và 0 có nghĩa là không lấp đầy. Màu nền giống với màu dòng phía trên. Loại: số
Mặc định: 0
|
| legendPosition |
Bạn cần đặt chú giải màu trên cùng một hàng với các nút thu phóng và ngày ('sameRow') hay đặt 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ì 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 chính tiếp theo trên điểm dữ liệu tối đa. Giá trị này sẽ được ưu tiên hơn giá trị 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ị nhỏ nhất 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 chính tiếp theo bên dưới điểm dữ liệu tối thiểu. Giá trị này sẽ được ưu tiên so với giá trị tối thiểu của trục Y do Điều này tương tự như Loại: số
Mặc định: tự động
|
| numberFormats |
Chỉ định các mẫu định dạng số dùng để định dạng các giá trị ở đầu biểu đồ. Các mẫu phải ở định dạng như chỉ định của lớp java DecimalFormat.
Nếu bạn chỉ định tuỳ chọn này, tuỳ chọn Loại: Chuỗi hoặc bản đồ các cặp number:String
Mặc định: tự động
|
| scaleColumns |
Chỉ định những giá trị sẽ hiển thị trên dấu kiểm trên trục Y trong biểu đồ. Tuỳ chọn mặc định là có một thang đo ở 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 chia tỷ lệ theo các giá trị chuỗi số khác nhau. Tuỳ chọn này 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 để sử dụng 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
|
| scaleFormat |
Đị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: "#"
|
| scaleType |
Đặt giá trị lớn nhất và nhỏ nhất hiển thị trên trục Y. Bạn có thể chọn trong các phương án sau:
Nếu bạn chỉ định các tuỳ chọn tối thiểu và/hoặc tối đa, các tuỳ chọn này sẽ được ưu tiên hơn các giá trị tối thiểu và tối đa được xác định theo loại tỷ lệ của bạn. Loại: chuỗi
Mặc định: "khắc phục"
|
| bàn |
Chứa các tuỳ 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 bằng chữ đối tượng:
var options: {
table: {
sortAscending: true,
sortColumn: 1
}
};
Loại: đối tượng
Mặc định: rỗng
|
| table.sortAscending |
Nếu bạn đặt thành Loại: boolean
Mặc định: false
|
| 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, trong đó 0 là mỏng nhất. Loại: số
Mặc định: 0
|
| zoomEndTime |
Đặt ngày/giờ kết thúc 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() |
Xoá biểu đồ và giải phóng tất cả các tài nguyên đã phân bổ của biểu đồ đó. Loại trả lại: không có
|
draw(data, options, state) |
Vẽ biểu đồ. Loại trả lại: không có
|
getContainer() |
Truy xuất xử lý đến phần tử vùng chứa chứa biểu đồ chú thích. Loại trả về: Xử lý một phần tử DOM
|
getSelection() |
Cách triển khai Loại dữ liệu trả về: Mảng gồm 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ề: Đối tượng có cá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 tham số có thể là một số hoặc một mảng số, trong đó 0 đề cập đến chuỗi dữ liệu đầu tiên, v.v. Loại trả lại: không có
|
setVisibleChartRange(start, end) |
Đặt phạm vi hiển thị (thu phóng) thành phạm vi được chỉ định. Chấp nhận 2 tham số thuộc loại Loại trả lại: không có
|
showDataColumns(columnIndexes) |
Cho thấy chuỗi dữ liệu được chỉ định trên biểu đồ, sau khi các chuỗi dữ liệu đó được ẩn bằng phương thức Loại trả lại: 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 mới của phạm vi sẽ được cung cấp 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 đồ này đã sẵn sàng cho các lệnh gọi phương thức bên ngoài. Nếu muốn tương tác với biểu đồ và gọi các phương thức sau khi vẽ, bạn nên thiết lập trình nghe cho sự kiện này trước khi gọi phương thức 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 đã được chọn, hãy gọi hàm
Thuộc tính: không có
|
Chính sách về dữ liệu
Tất cả mã và dữ liệu đều được xử lý và hiển thị trong trình duyệt. Không có dữ liệu nào được gửi đến bất kỳ máy chủ nào.