Hình ảnh: Đường gấp khúc (Hình ảnh)

Quan trọng: Kể từ ngày 20 tháng 4 năm 2012, phần Biểu đồ hình ảnh của Công cụ biểu đồ của Google đã chính thức không còn được dùng nữa. Ứng dụng này sẽ tiếp tục hoạt động theo chính sách về việc ngừng cung cấp của chúng tôi.

  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 cấu hình
  6. Phương thức
  7. Sự kiện
  8. Chính sách về dữ liệu

Tổng quan

Một hoặc nhiều biểu đồ dạng đường gấp khúc được kết xuất cùng với hình ảnh bằng API Google Biểu đồ. Các hình ảnh được chứa trong một bảng HTML.

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:["imagesparkline"]});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {

        var data = google.visualization.arrayToDataTable([
         ['Revenue', 'Licenses'],
         [435, 132],
         [438, 131],
         [512, 137],
         [460, 142],
         [491, 140],
         [487, 139],
         [552, 147],
         [511, 146],
         [505, 151],
         [509, 149]
        ]);

        var chart = new google.visualization.ImageSparkLine(document.getElementById('chart_div'));

        chart.draw(data, {width: 120, height: 40, showAxisLines: false,  showValueLabels: false, labelPosition: 'left'});
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 120px; height: 40px;"></div>
  </body>
</html>

Đang tải

Tên gói google.charts.load là "imagesparkline". 

  google.charts.load("current", {packages: ["imagesparkline"]});

Tên lớp của hình ảnh trực quan là google.visualization.ImageSparkLine. 

  var visualization = new google.visualization.ImageSparkLine(container);

Định dạng dữ liệu

Số lượng cột bất kỳ. Tất cả các cột phải là số. Mỗi cột được hiển thị dưới dạng một đường gấp khúc (sparkline).

Các lựa chọn cấu hình

Tên Loại Mặc định Nội dung mô tả
màu string Chỉ định màu để sử dụng cho tất cả biểu đồ. Một chuỗi ở định dạng #rrggbb. Ví dụ: "#00cc00". Chỉ dùng nếu không chỉ định tuỳ chọn colors.
màu Mảng chuỗi Màu mặc định Màu sử dụng cho các cột dữ liệu. Một mảng chuỗi trong đó mỗi phần tử là một chuỗi ở định dạng #rrggbb. Ví dụ: "#00cc00". Màu i được sử dụng cho cột dữ liệu i. Nếu số màu nhỏ hơn số cột, thì lựa chọn màu sẽ bao quanh.
tô màu boolean false Nếu true, màu này sẽ tô màu vùng bên dưới đường kẻ.
độ cao number Chiều cao của vùng chứa Chiều cao của hình ảnh, tính bằng pixel.
labelPosition string không có Vị trí của các nhãn. Các giá trị được hỗ trợ là "none", "left", "right" ("phải").
tối đa Mảng số Giá trị dữ liệu tối đa của mỗi sparkline Giá trị cao nhất cho phạm vi giá trị dữ liệu của mỗi sparkline. Chỉ mục trong mảng phải khớp với chỉ mục cột trong DataTable. Nếu tất cả các giá trị đều rỗng, đây sẽ là giá trị lớn nhất trong chuỗi.
phút Mảng số Giá trị dữ liệu tối thiểu của mỗi biểu đồ Spark Giá trị thấp nhất cho phạm vi giá trị dữ liệu của mỗi sparkline. Chỉ mục trong mảng phải khớp với chỉ mục cột trong DataTable. Nếu tất cả các giá trị đều rỗng, đây sẽ là giá trị nhỏ nhất trong chuỗi.
showAxisLines boolean đúng Nếu đúng, các đường trục sẽ hiển thị. Nếu giá trị là false, thì giá trị này không phải là false, còn giá trị mặc định của cho showValueNhãn là false.
showValueLabels boolean true, trừ phi showAxisLines mang giá trị false. Nếu là true, các nhãn trục giá trị sẽ xuất hiện.
title Mảng chuỗi Không có tiêu đề nào được hiển thị Tiêu đề cần sử dụng cho mỗi sparkline.
chiều rộng number Chiều rộng vùng chứa Chiều rộng của biểu đồ, tính bằng pixel.
bố cục string "v" Bố cục dọc hoặc ngang: "v" cho chiều dọc, "h" cho chiều ngang.

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 đồ.
getSelection() Mảng gồm các phần tử lựa chọn Trả về chỉ mục của các biểu đồ đã chọn dưới dạng một mảng các đối tượng. Mỗi đối tượng có một thuộc tính cột chứa số cột của một biểu đồ dạng đường gấp khúc đã chọn. Có thể trả về nhiều cột đã chọn.
setSelection(selection) không có Chọn các biểu đồ sparkline được chỉ định và bỏ chọn mọi sparkline không được chỉ định. lựa chọn là một mảng các đối tượng, mỗi đối tượng có một thuộc tính column dạng số, là chỉ mục của biểu đồ sparkline được chọn. Hãy xem setSelection() để biết thêm thông tin.

Sự kiện

Tên Nội dung mô tả Thuộc tính
chọn Sự kiện chọn chuẩn. Không có

Chính sách về dữ liệu

Vui lòng tham khảo Chính sách ghi lại của API biểu đồ.