Tổng quan
Biểu đồ dạng đường theo chuỗi thời gian tương tác có các chú thích không bắt buộc.
Thay vào đó, dòng thời gian được chú thích sẽ tự động sử dụng Biểu đồ chú thích.
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':['annotatedtimeline']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'Sold Pencils');
data.addColumn('string', 'title1');
data.addColumn('string', 'text1');
data.addColumn('number', 'Sold Pens');
data.addColumn('string', 'title2');
data.addColumn('string', 'text2');
data.addRows([
[new Date(2008, 1 ,1), 30000, undefined, undefined, 40645, undefined, undefined],
[new Date(2008, 1 ,2), 14045, undefined, undefined, 20374, undefined, undefined],
[new Date(2008, 1 ,3), 55022, undefined, undefined, 50766, undefined, undefined],
[new Date(2008, 1 ,4), 75284, undefined, undefined, 14334, 'Out of Stock','Ran out of stock on pens at 4pm'],
[new Date(2008, 1 ,5), 41476, 'Bought Pens','Bought 200k pens', 66467, undefined, undefined],
[new Date(2008, 1 ,6), 33322, undefined, undefined, 39463, undefined, undefined]
]);
var chart = new google.visualization.AnnotatedTimeLine(document.getElementById('chart_div'));
chart.draw(data, {displayAnnotations: true});
}
</script>
</head>
<body>
// Note how you must specify the size of the container element explicitly!
<div id='chart_div' style='width: 700px; height: 240px;'></div>
</body>
</html>
Lưu ý quan trọng: Để sử dụng hình ảnh trực quan này, bạn phải chỉ định chiều cao và chiều rộng của phần tử vùng chứa một cách rõ ràng trên trang của mình. Ví dụ: <div id="chart_div"
style="width:400; height:250"></div>.
Đang tải
Tên gói google.charts.load là "annotatedtimeline"
google.charts.load("current", {packages: ['annotatedtimeline']});
Tên lớp của hình ảnh trực quan là google.visualization.AnnotatedTimeLine
var visualization = new google.visualization.AnnotatedTimeLine(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 | Loại | Mặc định | Nội dung mô tả |
|---|---|---|---|
| allowHtml | boolean | false | 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. |
| allowRedraw | boolean | false | Bật kỹ thuật vẽ lại hiệu quả hơn cho các lệnh gọi thứ hai và sau đó đến
|
| allValuesSuffix | string | không có | Một hậu tố sẽ được thêm vào tất cả các giá trị trong thang đo và chú giải. |
| annotationsWidth | number | 25 | 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. |
| màu | Mảng chuỗi | Màu mặc định | 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". |
| dateFormat | string | "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ờ). | Đị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. |
| displayAnnotations | boolean | false | Nếu bạn đặt chính sách này thành true, thì biểu đồ sẽ hiển thị chú thích ở đầu các giá trị đã chọn. 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. |
| displayAnnotationsFilter | boolean | false | Nếu bạn đặt chính sách này thành true, thì biểu đồ sẽ hiển thị một vùng lọc để lọc các chú thích. Sử dụng lựa chọn này khi có nhiều chú thích. |
| displayDateBarSeparator | boolean | đúng | 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ó. |
| displayExactValues | boolean | false | 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 sẽ cho biết có thể hiển thị. Ví dụ: nếu đặt thành false, 56123,45 có thể hiển thị là 56,12k. |
| displayLegendDots | boolean | đúng | Xác định xem có hiện 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ó. |
| displayLegendValues | boolean | đúng | 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ó. |
| displayRangeSelector | boolean | đúng | 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 đó giá trị false nghĩa là không. Đường viền trong bộ chọn thu phóng là phiên bản tỷ lệ nhật ký của chuỗi cuối 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. |
| displayZoomButtons | boolean | đúng | Liệu có hiển thị đường liên kết thu phóng ("1d 5d 1m", v.v. hay không), trong đó giá trị false có nghĩa là không. |
| tô màu | number | 0 | 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àu lấp đầy 100%, 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. |
| highlightDot | string | "gần nhất" | Dấu chấm nào trên chuỗi cần làm nổi bật và các giá trị tương ứng hiển thị trong phần chú thích. Chọn một trong các giá trị sau:
|
| legendPosition | string | "sameRow" | 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"). |
| tối đa | number | tự động | 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 phía trên điểm dữ liệu tối đa. Giá trị này sẽ được ưu tiên so với giá trị tối đa của trục Y do scaleType xác định. |
| phút | number | tự động | 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 scaleType xác định. |
| numberFormats | Chuỗi hoặc bản đồ của các cặp number:String | tự động | 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 có định dạng theo chỉ định của lớp java DecimalFormat.
Nếu bạn chỉ định tuỳ chọn này, tuỳ chọn |
| scaleColumns | Mảng số | Tự động | 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 bộ sách; nhưng bạn có thể điều chỉnh các cạnh của biểu đồ theo tỷ lệ theo các giá trị khác nhau của các dãy số. 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 để 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 |
| scaleType | string | "khắc phục" | Đặ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, thì 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. |
| độ dày | number | 0 | Một số từ 0 đến 10 (bao gồm) chỉ định độ dày của đường, trong đó 0 là mỏng nhất. |
| wmode | string | "window" | Thông số Window Mode (wmode) (Chế độ cửa sổ (wmode)) cho biểu đồ Flash. Các giá trị hiện có là: 'opaque', 'window' hoặc 'transparency'. |
| zoomEndTime | Ngày | không có | Đặt ngày/giờ kết thúc của phạm vi thu phóng đã chọn. |
| zoomStartTime | Ngày | không có | Đặt ngày/giờ bắt đầu của phạm vi thu phóng đã chọn. |
Phương thức
| Phương thức | Loại dữ liệu trả về | Nội dung mô tả |
|---|---|---|
draw(data, options) |
không có | Vẽ biểu đồ. Bạn có thể tăng thời gian phản hồi cho các lệnh gọi thứ hai trở đi tới draw() bằng cách sử dụng thuộc tính allowRedraw. |
getSelection() |
Mảng gồm các phần tử lựa chọn | Cách triển khai getSelection() chuẩn. Phần tử đã chọn là các phần tử ô. Người dùng chỉ có thể chọn một ô mỗi lần. |
getVisibleChartRange() |
Một đối tượng có các thuộc tính start và end |
Trả về một đối tượng có các thuộc tính start và end, mỗi đối tượng là một đối tượng Date, đại diện cho lựa chọn thời gian hiện tại. |
hideDataColumns(columnIndexes) |
không có | Ẩ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 biểu thị chuỗi dữ liệu đầu tiên, v.v. |
setVisibleChartRange(start, end) |
không có | Đặ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 Date đại diện cho thời điểm đầu tiên và thời điểm sau cùng của phạm vi hiển thị đã chọn mong muốn. Đặt start thành rỗng để bao gồm mọi thứ từ ngày sớm nhất đến end; đặt end thành rỗng để bao gồm mọi thông tin từ start (bắt đầu) đến ngày cuối cùng (end). |
showDataColumns(columnIndexes) |
không có | 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 hideDataColumns.
Chấp nhận một tham số có thể là một số hoặc một mảng số, trong đó 0 biểu thị chuỗi dữ liệu đầu tiên, v.v. |
Sự kiện
| Tên | Nội dung mô tả | Thuộc tính |
|---|---|---|
| thay đổi phạm vi | Đã thay đổi phạm vi thu phóng. Được kích hoạt sau khi người dùng sửa đổi phạm vi thời gian hiển thị, nhưng không được kích hoạt sau khi gọi phương thức setVisibleChartRange.Lưu ý: Bạn không nên sử dụng các thuộc tính sự kiện, mà nên lấy các thuộc tính đó bằng cách gọi phương thức getVisibleChartRange. |
|
| sẵn sàng | 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ẽ biểu đồ, 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 có |
| chọn | Khi người dùng nhấp vào một cờ chú thích (điểm đánh dấu), ô tương ứng trong bảng dữ liệu sẽ được chọn. Sau đó, hình ảnh trực quan sẽ kích hoạt sự kiện này. | Không có |
Lưu ý: Do một số giới hạn nhất định, các sự kiện có thể không được gửi nếu bạn đang truy cập vào trang trong trình duyệt dưới dạng tệp (ví dụ: "file://") thay vì từ máy chủ (ví dụ: "http://www").
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.
Lưu ý
Do các chế độ cài đặt bảo mật Flash, phương thức này (và tất cả các hình ảnh dựa trên Flash) có thể không hoạt động bình thường khi được truy cập từ một vị trí tệp trong trình duyệt (ví dụ: file:///c:/webhost/myhost/myviz.html) thay vì từ một URL máy chủ web (ví dụ: http://www.myhost.com/myviz.html). Đây thường chỉ là vấn đề kiểm thử. Bạn có thể khắc phục sự cố này như mô tả trên trang web Macromedia.