Hình ảnh: Sparkline (Hình ảnh)

Lưu ý quan trọng: Phần Biểu đồ hình ảnh của Công cụ biểu đồ Google đã không còn được dùng chính thức kể từ ngày 20 tháng 4 năm 2012. Quảng cáo sẽ tiếp tục hoạt động theo chính sách không dùng nữa 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 về cấu hình
  6. Phương thức
  7. Sự kiện
  8. Chính sách dữ liệu

Tổng quan

Một hoặc nhiều biểu đồ thu nhỏ được hiển thị với hình ảnh bằng API Google Biểu đồ. Hình ảnh được chứa trong 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 tia lửa nhỏ.

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

Tên Loại Mặc định Mô tả
màu chuỗi Chỉ định một màu để sử dụng cho tất cả các biểu đồ. Một chuỗi ở định dạng #rrggbb. Ví dụ: "#00cc00". Chỉ sử dụng nếu bạn không chỉ định tùy chọn colors.
màu Mảng chuỗi Màu mặc định Màu sắc cần 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ố lượng màu nhỏ hơn số lượng cột, thì việc lựa chọn màu sẽ bao quanh.
tô boolean sai Nếu giá trị là true, sẽ tô màu vùng dưới dòng.
độ 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 chuỗi không có Vị trí của các nhãn. Các giá trị được hỗ trợ là "none" (không có), "left" (trái), "right" (phải).
tối đa Mảng số Giá trị dữ liệu tối đa của mỗi biểu đồ thu nhỏ Giá trị cao nhất của dải ô giá trị dữ liệu của từng biểu đồ thu nhỏ. 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, thì đây sẽ là giá trị tối đa trong chuỗi.
phút Mảng số Giá trị dữ liệu tối thiểu của mỗi biểu đồ thu nhỏ Giá trị thấp nhất của dải ô giá trị dữ liệu của từng biểu đồ thu nhỏ. 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 là rỗng, thì đây sẽ là giá trị tối thiểu trong chuỗi.
showAxisLines boolean đúng Nếu là đúng, các đường trục sẽ hiển thị. Nếu giá trị là false thì các giá trị này không có giá trị mặc định và giá trị mặc định cho showValueLabels là false.
showValueLabel boolean true, ngoại trừ khi showAxisLines là false. Nếu là đúng, nhãn trục giá trị sẽ xuất hiện.
tiêu đề Mảng chuỗi Không có tiêu đề nào hiển thị Tiêu đề sử dụng cho mỗi Sparkline.
chiều rộng number Chiều rộng của vùng chứa Chiều rộng biểu đồ, tính bằng pixel.
layout chuỗi "v" Bố cục dọc hoặc ngang: "v" cho dọc, "h" cho ngang.

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 đồ.
getSelection() Dãy 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 Sparkline đã chọn. Có thể trả về nhiều cột đã chọn.
setSelection(selection) không có Chọn Sparkline được chỉ định và bỏ chọn bất kỳ Sparkline nào chưa đượ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 số, là chỉ mục của Sparkline đã chọn. xem setSelection() để biết thêm thông tin.

Sự kiện

Tên Mô tả Thuộc tính
chọn Sự kiện chọn chuẩn. Không

Chính sách dữ liệu

Vui lòng tham khảo Chính sách ghi nhật ký API biểu đồ.