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.
Tổng quan
Biểu đồ hình tròn được hiển thị dưới dạng hình ảnh bằ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
Hai 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 về cấu hình
Bạn có thể chỉ định các tuỳ chọn sau đây trong đối tượng options được chuyển vào phương thức draw() của hình ảnh trực quan.
| Tên | Loại | Mặc định | Mô tả |
|---|---|---|---|
| màu nền | chuỗi | "#FFFFFF" (màu trắng) | Màu nền của biểu đồ ở định dạng màu API Biểu đồ. |
| màu | chuỗi | Tự động | Chỉ định màu cơ bản để sử dụng cho tất cả các bộ sách; mỗi bộ sách sẽ là một cấp độ thấp hơn của màu được chỉ định. Màu được chỉ định ở định dạng màu của API biểu đồ.
Bỏ qua nếu bạn chỉ định colors. |
| màu | Mảng<chuỗi> | Tự động | Sử dụng tính năng 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, xuống đế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ả bộ sách, hãy sử dụng tuỳ chọn color. |
| bật sự kiện | boolean | sai | Làm cho 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 các loại biểu đồ cụ thể. Xem 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. |
| 3D | boolean | sai | Nếu bạn đặt giá trị này thành true, thì hệ thống sẽ hiển thị một biểu đồ ba chiều. |
| nhãn | chuỗi | "không có" | Nhãn nào (nếu có) sẽ xuất hiện cho từng phần. Chọn từ các giá trị sau:
|
| chú giải | chuỗi | "phải" | Vị trí chú giải trên biểu đồ. Chọn một trong những giá trị sau: "top" (trên cùng), "bottom" (dưới), "left" (trái), "right" (phải), "none" (không có). |
| tiêu đề | chuỗi | không có tiêu đề | Văn bản sẽ hiển thị phía trên biểu đồ. |
| 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. |
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 đồ. |
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 dữ liệu
Vui lòng tham khảo Chính sách ghi nhật ký API biểu đồ.