Hiển thị: Biểu đồ hình tròn (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 biểu đồ hình tròn được hiển thị dưới dạng hình ảnh bằng cách sử dụng API Google Biểu đồ.

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

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Task', 'Hours per Day'],
          ['Work',        11],
          ['Eat',         2],
          ['Commute',     2],
          ['Watch TV',    2],
          ['Sleep',       7]
        ]);

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

        chart.draw(data, {width: 430, height: 240, title: 'My Daily Activities'});
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 400px; height: 240px;"></div>
  </body>
</html>

Đang tải

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

  google.charts.load('current', {packages: ['imagepiechart']});

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

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

Định dạng dữ liệu

2 cột. Cột đầu tiên phải là một chuỗi và chứa nhãn lát cắt. Cột thứ hai phải là một số và chứa giá trị lát cắt.

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

Bạn có thể chỉ định các tuỳ chọn sau đây trong đối tượng options (tuỳ chọn) được truyền vào phương thức draw() của hình ảnh trực quan.

Tên Loại Mặc định Nội dung mô tả
backgroundColor string "#FFFFFF" (màu trắng) Màu nền cho biểu đồ ở Định dạng màu của API biểu đồ.
màu string Tự động Chỉ định một màu cơ bản để sử dụng cho tất cả các chuỗi; mỗi chuỗi sẽ là một độ chuyển màu của màu được chỉ định. Màu được chỉ định trong Định dạng màu của API Biểu đồ. Sẽ bỏ qua nếu colors được chỉ định.
màu Mảng<string> Tự động Sử dụng thuộc tính này để chỉ định màu cụ thể cho từng chuỗi dữ liệu. Màu được chỉ định trong định dạng màu của API Biểu đồ. Màu i được dùng cho cột dữ liệu i, gói quanh phần đầu nếu có nhiều cột dữ liệu hơn màu. Nếu chấp nhận được các biến thể của một màu duy nhất cho tất cả các chuỗi, hãy sử dụng tuỳ chọn color.
enableEvents boolean false Khiến các biểu đồ gửi các sự kiện do người dùng kích hoạt, chẳng hạn như nhấp chuột hoặc di chuột qua. Chỉ được hỗ trợ cho một số loại biểu đồ cụ thể. Hãy xem mục Sự kiện bên dưới.
độ cao number Chiều cao của vùng chứa Chiều cao của biểu đồ tính bằng pixel.
is3D boolean false Nếu bạn đặt chính sách này thành true, thì biểu đồ ba chiều sẽ hiển thị.
nhãn string "none"

Nhãn nào hiển thị cho từng lát cắt (nếu có). Chọn trong số các giá trị sau:

  • "none" – Không có nhãn.
  • 'value' – Sử dụng giá trị lát cắt làm nhãn.
  • 'name' - Sử dụng tên lát (tên cột).
chú thích string "phải" Vị trí của chú thích trên biểu đồ. Chọn một trong các giá trị sau: "top", "dưới cùng", "trái", "phải", "không có".
title string không có tiêu đề Văn bản để hiển thị phía trên biểu đồ.
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.

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 đồ.

Sự kiện

Bạn có thể đăng ký để nghe các sự kiện được mô tả trên trang Biểu đồ hình ảnh chung.

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 đồ.