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

Hiển thị: Biểu đồ vùng (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

Biểu đồ vùng hiển thị trong trình duyệt bằng SVG hoặc VML. Hiển thị mẹo khi nhấp vào điểm. Tạo ảnh động cho các dòng 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:["areachart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Sales', 'Expenses'],
          ['2004',  1000,      400],
          ['2005',  1170,      460],
          ['2006',  660,       1120],
          ['2007',  1030,      540]
        ]);

        var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
        chart.draw(data, {width: 400, height: 240, legend: 'bottom', title: 'Company Performance'});
      }
    </script>
  </head>

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

Đang tải

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

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

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

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

Định dạng dữ liệu

Cột đầu tiên phải là một chuỗi và chứa nhãn danh mục. Có thể theo sau là số lượng cột bất kỳ, tất cả đều phải là số. Mỗi cột được hiển thị dưới dạng một dòng riêng biệt.

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

Tên	Loại	Mặc định	Nội dung mô tả
axisColor	chuỗi hoặc Đối tượng	màu mặc định	Màu của trục. Các giá trị có thể là các giá trị của tuỳ chọn cấu hình backgroundColor.
axisBackgroundColor	chuỗi hoặc Đối tượng	màu mặc định	Đường viền xung quanh nền trục. Các giá trị có thể là các giá trị của tuỳ chọn cấu hình backgroundColor.
axisFontSize	number	tự động	Cỡ chữ của văn bản trên trục biểu đồ, tính bằng pixel.
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 đồ. Có thể là một trong những lựa chọn sau: Chuỗi có màu được HTML hỗ trợ, ví dụ: 'đỏ' hoặc '#00cc00' Một đối tượng có các thuộc tính `stroke` `fill` và `strokeSize`. `stroke` và `fill` phải là một chuỗi có màu. strokeSize là một số. Ví dụ: `{backgroundColor: {stroke:'black', fill:'#eee', strokeSize: 1}`. Để sử dụng chỉ tô màu nền mà không có nét vẽ, hãy sử dụng `stroke:null, strokeSize: 0`.
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	Màu mặc định	Màu sẽ sử dụng cho các thành phần trong biểu đồ. Một mảng chuỗi. Mỗi phần tử là một chuỗi là một màu mà HTML hỗ trợ, ví dụ: "red" (đỏ) hoặc "#00cc00".
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 điểm dữ liệu.
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.
isStacked	boolean	false	Nếu bạn đặt chính sách này thành true, thì các giá trị đường sẽ được xếp chồng (tích lũy).
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 đồ. "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.
lineSize	number	2	Độ rộng của đường tính bằng pixel. Sử dụng số 0 để ẩn tất cả các dòng và chỉ hiển thị các điểm.
logScale	boolean	false	Nếu đúng, trục chính phải được chia tỷ lệ theo lôgarit.
tối đa	number	tự động	Chỉ định đường lưới trục Y cao nhất. Đường lưới thực tế sẽ là giá trị lớn hơn trong hai giá trị: giá trị tuỳ chọn tối đa hoặc giá trị dữ liệu cao nhất, được làm tròn lên dấu lưới cao hơn tiếp theo.
phút	number	tự động	Chỉ định đường lưới trục Y thấp nhất. Đường lưới thực tế sẽ là giá trị thấp hơn trong hai giá trị: giá trị lựa chọn tối thiểu hoặc giá trị dữ liệu thấp nhất, được làm tròn xuống dấu lưới phía dưới tiếp theo.
pointSize	number	3	Kích thước của điểm hiển thị tính bằng pixel. Hãy sử dụng số 0 để ẩn tất cả các điểm.
reverseAxis	boolean	false	Nếu bạn đặt chính sách này thành true, thì các danh mục sẽ được vẽ từ phải sang trái. Lựa chọn mặc định là vẽ từ trái sang phải.
showCategories	boolean	đúng	Nếu đúng, nhãn danh mục sẽ hiển thị. Nếu là false, thì sẽ không.
title	string	không có tiêu đề	Văn bản để hiển thị phía trên biểu đồ.
titleX	string	không có tiêu đề	Văn bản để hiển thị bên dưới trục hoành.
titleY	string	không có tiêu đề	Văn bản hiển thị theo trục tung.
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 phần 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, bất kỳ giá trị nào 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ử cột và ô. Người dùng chỉ có thể chọn một cột hoặc ô mỗi lần.
`setSelection()`	không có	Triển khai `setSelection()` chuẩn, nhưng chỉ hỗ trợ lựa chọn một phần tử. Coi mọi mục nhập lựa chọn là một lựa chọn cột hoặc ô. Lưu ý rằng bạn không thể chọn cột nhãn.

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 điểm, đồng thời chuyển các 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 điểm, đồng thời chuyển 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 điểm hoặc chú giải. Khi bạn chọn một điểm, ô 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()`.	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 đồ vùng (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.