Trang này được dịch bởi Cloud Translation API.

Hiển thị: Biểu đồ hình tròn (Phiên bản cũ)

Không được tán thành

Hình ảnh trực quan này đã được thay thế bằng một phiên bản mới. Vui lòng sử dụng phiên bản đó. Để dễ dàng di chuyển, vui lòng tham khảo trang ghi chú phát hành.

Tổng quan
Ví dụ
Đang tải
Định dạng dữ liệu
Các lựa chọn cấu hình
Phương thức
Sự kiện
Chính sách về dữ liệu

Tổng quan

Biểu đồ hình tròn được hiển thị trong trình duyệt bằng cách sử dụng SVG hoặc VML. Hiện mẹo khi nhấp vào lát. Tạo ảnh động cho các lát cắt khi nhấp vào các mục chú giải.

Bởi: Google

Ví dụ

Tự viết mã trên Công cụ trực quan hoá

<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["piechart"]});
      google.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.PieChart(document.getElementById('chart_div'));
        chart.draw(data, {width: 400, height: 240, is3D: true, title: 'My Daily Activities'});
      }
    </script>
  </head>

  <body>
    <div id="chart_div"></div>
  </body>
</html>

Đang tải

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

  google.load("visualization", "1", {packages: ["piechart"]});

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

  var visualization = new google.visualization.PieChart(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

Tên	Loại	Mặc định	Nội dung mô tả
backgroundColor	chuỗi hoặc Đối tượng	màu mặc định	Màu nền cho vùng chính của biểu đồ. Một trong các cách sau: Một chuỗi có màu mà HTML hỗ trợ, ví dụ: "đỏ" hoặc "#00cc00", hoặc Phần mô tả về đối tượng n có các thuộc tính sau: `stroke` – Một chuỗi màu HTML mô tả màu đường viền của biểu đồ. `fill` – Một chuỗi màu HTML mô tả màu nền của biểu đồ. `strokeSize` – Một số mô tả độ dày của đường viền biểu đồ, tính bằng pixel. Đối với trường không có đường viền, bạn có thể đặt giá trị này thành 0. Ví dụ: `{backgroundColor: {stroke:'black', fill:'#eee', strokeSize: 1}`.
borderColor	chuỗi hoặc Đối tượng	màu mặc định	Đường viền xung quanh các phần tử biểu đồ. Các giá trị có thể là các giá trị của tuỳ chọn cấu hình backgroundColor.
màu	Mảng chuỗi hoặc đối tượng	Màu mặc định	Một mảng màu, trong đó mỗi phần tử chỉ định màu của một chuỗi. Bạn nên chỉ định một phần tử mảng cho mỗi chuỗi. Nếu `is3D=false`, đây là một mảng màu HTML. Ví dụ: colors:['#00FF00','Orange'] Nếu `is3D=true`, đây là một mảng gồm màu HTML hoặc đối tượng thuộc loại này: `{color:face_color, darker:shade_color}`, trong đó `color` là màu mặt của phần tử và `darker` là màu bóng. Tuy nhiên, nếu bạn chỉ định màu HTML cho đối tượng 3D, thì khuôn mặt và bóng sẽ phải cùng màu và hiệu ứng 3D sẽ bị giảm. Ví dụ: `{is3D:true, colors:[{color:'#FF0000', darker:'#680000'}, {color:'cyan', darker:'deepskyblue'}]}`
enableTooltip	boolean	đúng	Nếu bạn đặt chính sách này thành true, thì chú thích sẽ xuất hiện khi người dùng nhấp vào một lát.
focusBorderColor	chuỗi hoặc Đối tượng	màu mặc định	Đường viền xung quanh các phần tử biểu đồ được lấy tiêu điểm (trỏ bằng chuột). Các giá trị có thể là các giá trị của tuỳ chọn cấu hình backgroundColor.
độ 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ị.
chú thích	string	"phải"	Vị trí và loại chú thích. Có thể là một trong những trạng thái sau đây: "phải" – Ở bên phải biểu đồ. "left" (trái) – Ở bên trái biểu đồ. "trên cùng" - Phía trên biểu đồ. "dưới cùng" – Bên dưới biểu đồ. 'label' - Nhãn gần lát cắt. "none" – Không có chú giải nào được hiển thị.
legendBackgroundColor	chuỗi hoặc Đối tượng	màu mặc định	Màu nền cho vùng chú giải trên biểu đồ. Các giá trị có thể là các giá trị của tuỳ chọn cấu hình backgroundColor.
legendFontSize	number	tự động	Kích thước phông chữ chú giải, tính bằng pixel.
legendTextColor	chuỗi hoặc Đối tượng	màu mặc định	Màu văn bản chú giải. Các giá trị có thể là các giá trị của tuỳ chọn cấu hình backgroundColor.
pieJoinAngle	number	0	Bất kỳ lát cắt nào nhỏ hơn góc này sẽ được kết hợp thành một lát cắt chung có nhãn "Khác".
pieMinimalAngle	number	0	Bất kỳ lát cắt nào nhỏ hơn góc này sẽ không được vẽ trong biểu đồ hình tròn (mặc dù vẫn sẽ nhận được mục nhập chú giải). Các lát còn lại sẽ mở rộng để lấp đầy chiếc bánh theo tỷ lệ cố định. Lưu ý: Điều này có thể làm sai lệch các giá trị biểu kiến, đặc biệt là khi con số này lớn, vì một số lượng sẽ bị xoá khỏi hình tròn. Để tính toán kích thước của các lát cắt, các góc đầu tiên nhỏ hơn pieJoinAngle sẽ được nối với lát cắt "Other", sau đó tất cả các lát cắt lớn hơn pieMinimumAngle sẽ được vẽ
title	string	không có tiêu đề	Văn bản để hiển thị phía trên biểu đồ.
titleColor	chuỗi hoặc Đối tượng	màu mặc định	Màu cho tiêu đề của biểu đồ. Các giá trị có thể là các giá trị của tuỳ chọn cấu hình backgroundColor.
titleFontSize	number	tự động	Cỡ chữ cho tiêu đề biểu đồ, tính bằng pixel.
tooltipFontSize	number	11	Cỡ chữ của văn bản chú thích. Tỷ lệ này có thể giảm nếu chú thích quá nhỏ để chứa văn bản bằng phông chữ đã chỉ định.
tooltipHeight	number	60	Chiều cao của chú thích, tính bằng pixel. Chiều cao của chú thích là cố định; chú thích này sẽ không bao giờ tăng hoặc thu nhỏ cho vừa với độ dài hoặc cỡ chữ của văn bản. Tuy nhiên, những giá trị lớn hơn 1/3 chiều cao của biểu đồ sẽ bị cắt.
tooltipWidth	number	120	Chiều rộng của chú thích, tính bằng pixel. Chiều rộng của chú thích là cố định; chú thích này sẽ không bao giờ tăng hoặc thu nhỏ cho vừa với độ dài hoặc cỡ chữ của văn bản. Tuy nhiên, mọi nội dung lớn hơn chiều rộng của biểu đồ sẽ bị cắt.
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 đồ.
`getSelection()`	Mảng gồm các phần tử lựa chọn	Cách triển khai `getSelection()` chuẩn. Các phần tử đã chọn là các phần tử hàng và ô. Người dùng có thể chọn nhiều hàng và/hoặc một ô cùng một lúc.
`setSelection()`	không có	Cách triển khai `setSelection()` chuẩn, nhưng hỗ trợ lựa chọn nhiều hàng và/hoặc một ô. Coi mọi mục nhập lựa chọn là một lựa chọn hàng hoặc ô.

Sự kiện

Tên	Nội dung mô tả	Thuộc tính
`onmouseover`	Được kích hoạt khi người dùng di chuột qua một lát cắt và chuyển chỉ mục hàng và cột của ô tương ứng.	hàng, cột
`onmouseout`	Được kích hoạt khi người dùng di chuột ra khỏi một lát rồi chuyển vào các chỉ mục hàng và cột của ô tương ứng.	hàng, cột
`ready`	Biểu đồ này đã 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ẽ, 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ó
`select`	Được kích hoạt khi người dùng nhấp vào một lát cắt hoặc chú giải. Khi bạn chọn một lát cắt, ô tương ứng trong bảng dữ liệu sẽ được chọn; khi bạn chọn một chú giải, cột tương ứng trong bảng dữ liệu sẽ được chọn. Để tìm hiểu những mục đã được chọn, hãy gọi `getSelection()`. Lưu ý: Thao tác nhấp vào một lát cắt không chuyển đổi giữa cách chọn và bỏ chọn một ô; thao tác nhấp vào một lát cắt sẽ luôn chọn lát cắt đó. Mặt khác, thao tác nhấp vào một mục chú giải sẽ chuyển đổi giữa cách chọn và bỏ chọn hàng đó.	Không có

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

Tất cả mã và dữ liệu đều được xử lý và hiển thị trong trình duyệt. Không có dữ liệu nào được gửi đến bất kỳ máy chủ nào.

Hiển thị: Biểu đồ hình tròn (Phiên bản cũ) Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.