Dòng thời gian có chú thích

  1. Tổng quan
  2. Ví dụ
  3. Đang tải
  4. Định dạng dữ liệu
  5. Các lựa chọn về cấu hình
  6. Phương thức
  7. Sự kiện
  8. Chính sách dữ liệu
  9. Ghi chú

Tổng quan

Biểu đồ dạng đường theo thời gian tương tác có chú thích không bắt buộc.

Dòng thời gian có chú thích hiện 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 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. Vì vậy, ví dụ như <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 đồ. 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 date hoặc datetime và chỉ định giá trị X của điểm trên biểu đồ. Nếu cột này thuộc loại date (chứ không phải datetime) 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 displayAnnotations là đú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 displayAnnotations thành true để sử dụng cột này. Bạn có thể sử dụng thẻ HTML nếu đặt allowHtml thành true; 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 Loại Mặc định Mô tả
allowHtml boolean sai Nếu bạn đặt giá trị này thành true, thì mọi văn bản chú thích chứa các thẻ HTML sẽ hiển thị dưới dạng HTML.
cho phép vẽ lại boolean sai

Bật một kỹ thuật vẽ lại hiệu quả hơn cho lệnh gọi thứ hai và các lệnh gọi sau đó tới draw() trong hình ảnh trực quan này. Nó chỉ vẽ lại vùng biểu đồ. Để sử dụng tùy chọn này, bạn phải đáp ứng các yêu cầu sau:

  • allowRedraw phải là true
  • displayAnnotations phải false (nghĩa là bạn không thể hiển thị chú thích)
  • bạn phải chuyển vào các tuỳ chọn và giá trị giống nhau (ngoại trừ allowRedraw và displayAnnotations) như trong lệnh gọi đầu tiên tới draw().
allValuesSuffix chuỗi không có Một hậu tố sẽ được thêm vào tất cả giá trị trong thang và chú giải.
Chú thích chiều rộng number 25 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.
màu Mảng chuỗi Màu mặc định 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".
định dạng ngày chuỗi Giá trị "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 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.
chú thích hiển thị boolean sai Nếu bạn đặt giá trị này thành true (đúng), thì biểu đồ sẽ cho thấy chú thích ở đầu các giá trị đã chọn. 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 cho văn bản chú thích và một cho văn bản chú thích.
displayAnFilterFilter boolean sai Nếu bạn đặt giá trị này thành true (đúng), biểu đồ sẽ hiển thị một mốc 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.
displayDateBarSeparator boolean đúng Hiển thị dấu phân tách thanh nhỏ ( | ) giữa giá trị chuỗi và ngày trong chú giải, trong đó true có nghĩa là có.
displayExactValues boolean sai Liệu có hiển thị phiên bản rút gọn làm tròn của các giá trị ở đầ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.
displayLegendDots boolean đúng Liệu có hiển thị dấu chấm bên cạnh các giá trị trong văn bản chú giải hay không, trong đó true có nghĩa là có.
displayLegendValues boolean đúng Có hiển thị các giá trị được làm nổi bật trong chú giải hay không, khi giá trị 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 đồ), 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 gần nhất 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.
nút Zoom boolean đúng Liệu có hiển thị các đường liên kết thu phóng ("1d 5d 1m" v.v.) hay không, trong đó false có nghĩa là không.
tô number 0 Một số từ 0 đến 100 (bao gồm) chỉ định alpha của phần tô bên dưới mỗi dòng trong biểu đồ đường. 100 có nghĩa là lấp đầy 100%, 0 có nghĩa là không lấp đầy. Màu tô giống với màu phía trên nó.
Dot chuỗi "gần nhất"

Dấu chấm trên chuỗi để làm nổi bật và các giá trị tương ứng để hiển thị trong phần chú giải. Chọn một trong các giá trị sau:

  • 'gần nhất' - Giá trị gần nhất theo trục X với chuột.
  • 'cuối cùng' - Tập hợp giá trị tiếp theo ở bên trái chuột.
Thêm vị trí chú giải chuỗi "sameRow" Nên đặ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 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. Điều này sẽ được ưu tiên hơn mức tối đa của trục Y do scaleType xác định.
phút number tự động 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 chính 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 scaleType xác định.
numberFormats Chuỗi hoặc bản đồ các cặp số:Chuỗi tự động

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 VariablesFormat.

  • Nếu bạn không chỉ định thì mẫu định dạng mặc định sẽ được sử dụng.
  • Nếu bạn chỉ định một mẫu chuỗi, thì mẫu đó sẽ được dùng cho tất cả các giá trị.
  • Nếu bạn chỉ định một bản đồ, các khoá sẽ là chỉ mục của chuỗi (không dựa trên) và giá trị là các mẫu dùng để định dạng chuỗi được chỉ định.
    Bạn không bắt buộc phải thêm định dạng cho mọi chuỗi nội dung trên biểu đồ; mọi chuỗi không xác định sẽ sử dụng định dạng mặc định.

Nếu bạn chỉ định tùy chọn này, thì tùy chọn displayExactValues sẽ bị bỏ qua.
tỷ lệ cột Mảng số Tự động

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.

Tuỳ chọn này sử dụng một mảng từ 0 đến 3 số để chỉ định chỉ mục (dựa trên 0) của chuỗi và dùng làm giá trị tỷ lệ. Vị trí các giá trị này được hiển thị phụ thuộc vào số lượng giá trị bạn đưa vào mảng:

  • Nếu bạn chỉ định một mảng trống, biểu đồ sẽ không hiển thị các giá trị Y bên cạnh dấu kiểm.
  • Nếu bạn chỉ định một giá trị, thì tỷ lệ của chuỗi đã chỉ định sẽ chỉ hiển thị ở bên phải biểu đồ.
  • Nếu bạn chỉ định hai giá trị, thì thang điểm cho chuỗi thứ hai sẽ được thêm vào bên phải biểu đồ.
  • Nếu bạn chỉ định 3 giá trị, thì thang điểm của chuỗi thứ ba sẽ được thêm vào giữa biểu đồ.
  • Mọi giá trị sau giá trị thứ ba trong mảng sẽ bị bỏ qua.

Khi hiển thị nhiều tỷ lệ, bạn nên đặt tuỳ chọn scaleType thành "allCách" hoặc "allmaxd".

tỷ lệ chuỗi "Khắc phục"

Đặ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:

  • " Tham số tối đa - Trục Y sẽ trải dài từ giá trị tối thiểu đến giá trị tối đa của chuỗi. Nếu bạn có nhiều loạt phim, hãy sử dụng tính năng phóng to.
  • "Khắc phục" [mặc định] – Trục Y thay đổi tuỳ thuộc vào các giá trị dữ liệu:
    • Nếu tất cả giá trị đều lớn hơn 0, thì trục Y sẽ trải dài từ 0 đến giá trị dữ liệu tối đa.
    • Nếu tất cả các giá trị đều <=0, trục Y sẽ trải dài từ 0 đến giá trị dữ liệu tối thiểu.
    • Nếu cả giá trị dương và dương, trục Y sẽ nằm trong khoảng từ giá trị tối đa của chuỗi đến giá trị tối thiểu của chuỗi.

      Đối với nhiều bộ sách, hãy sử dụng lệnh "allFixed".
  • "all lũy to" – Tương tự như "Phóng to", nhưng dùng khi hiển thị nhiều tỷ lệ. Cả hai biểu đồ này đều được tăng tối đa trong cùng một tỷ lệ, tức là một biểu đồ sẽ bị trình bày sai trên trục Y. Tuy nhiên, việc di chuột qua từng chuỗi sẽ cho thấy giá trị thực của nó.
  • " tất cả" - giống như "đã khắc phục", nhưng được dùng khi hiển thị nhiều tỷ lệ. Chế độ cài đặt này điều chỉnh từng tỷ lệ theo chuỗi phù hợp với chế độ cài đặt đó (sử dụng cùng với scaleColumns).

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 đó 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ệ.
độ dày number 0 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.
CANNOT TRANSLATE chuỗi "window" (cửa sổ) Tham số Window Mode (wmode) (Chế độ cửa sổ) cho biểu đồ Flash. Có các giá trị sau: "opaque", "window" hoặc "transparency" (trong suốt).
Thu phóng thời gian kết thúc Ngày không có Đặt ngày kết thúc/thời gian 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ề Mô tả
draw(data, options) không có Vẽ biểu đồ. Bạn có thể tăng tốc thời gian phản hồi cho các lệnh gọi thứ hai và sau đó đến draw() bằng cách sử dụng thuộc tính allowRedraw.
getSelection() Dãy các phần tử lựa chọn Triển khai getSelection() chuẩn. Các phần tử đã chọn là phần tử ô. Mỗi lần người dùng chỉ có thể chọn một ô.
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, trong đó mỗi thuộc tính 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 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.
setVisibleChartRange(start, end) không có Đặ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 Date đại diện cho lần đầu và lần cuối của dải ô hiển thị mong muốn. Đặt start (giá trị) bắt đầu rỗng để bao gồm mọi thứ từ ngày sớm nhất đến ngày end (kết thúc); đặt giá trị end (giá trị rỗng) để bao gồm mọi thứ từ start (bắt đầu) đến ngày cuối cùng.
showDataColumns(columnIndexes) không có 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 hideDataColumns. 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.

Sự kiện

Tên 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 kích hoạt sau khi gọi phương thức setVisibleChartRange.
Lưu ý: Bạn không nên sử dụng thuộc tính sự kiện mà nên lấy các thuộc tính này bằng cách gọi phương thức getVisibleChartRange.
  • start: Ngày. Thời gian bắt đầu của phạm vi thu phóng.
  • end: Ngày. Thời gian kết thúc của phạm vi thu phóng.
sẵn sàng 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ẽ 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 sẽ kích hoạt sự kiện này. Không có

Lưu ý: Do có 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 trang trong trình duyệt của mình dưới dạng một tệp (ví dụ: "file://") thay vì từ máy chủ (ví dụ: "http://www").

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.

Lưu ý

Do các chế độ cài đặt bảo mật Flash, công cụ này (và tất cả hình ảnh trực quan dựa trên Flash) có thể không hoạt động chính xác 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ừ URL máy chủ web (ví dụ: http://www.myhost.com/myviz.html). Đây thường chỉ là vấn đề về việc kiểm thử. Bạn có thể khắc phục vấn đề này theo mô tả trên trang web của Macromedia.