Hình ảnh: Biểu đồ vùng (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.

Tổng quan

Một biểu đồ khu vực được kết xuất 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:["imageareachart"]});
      google.charts.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.ImageAreaChart(document.getElementById('chart_div'));

        chart.draw(data, {width: 400, height: 240, min: 300, max: 1400, title: 'Yearly Expenses and Sales'});
      }
    </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"imageareachart"

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

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

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

Định dạng dữ liệu

Mỗi cột đại diện cho một đường trong biểu đồ; mỗi mục nhập là giá trị trục Y tại cùng một điểm trục X và hình ảnh trực quan kết nối các mục đó với một đường thẳng, sau đó điền vào vùng bên dưới đường kẻ đó.

Dữ liệu được xử lý theo cột, bắt đầu từ cột 0 trở lên. Bạn nên viết các dòng cao nhất trước, sau đó đến các dòng dưới, vì nếu bạn vẽ các dòng dưới thì trước tiên, một dòng sẽ được vẽ lên và ẩn bất kỳ dòng dưới nào. Do đó, hãy cố gắng đảm bảo cột 1 có điểm cao hơn cột 2, cột 2 cao hơn cột 3, v.v. Nếu bạn có một hoặc hai điểm cao hơn ở cột bên phải so với cột bên trái, điều này có thể che khuất một phần dòng dưới mức nhưng vẫn hiển thị.

Tất cả dữ liệu phải là loại số, ngoại trừ loại đầu tiên, có thể là số hoặc chuỗi. Nếu cột đầu tiên là một loại chuỗi, thì các mục nhập trong cột đầu tiên sẽ được hiển thị dưới dạng nhãn trên X; nếu cột đầu tiên là một số, sẽ không có nhãn trục X được hiển thị. Tất cả các cột (ngoại trừ cột đầu tiên) phải là số. Không có giới hạn về số lượng cột.

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

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 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.
chú giải chuỗi "phải" Vị trí và loại chú giải. Có thể là một trong những trạng thái sau đây:
  • 'right' - Ở bên phải biểu đồ.
  • 'left' - Ở bên trái của biểu đồ.
  • 'top' - Phía trên biểu đồ.
  • 'bottom' - Dưới biểu đồ.
  • "none" – Không có chú giải nào xuất hiện.
tối đa number tự động Giá trị lớn nhất để hiển thị trên trục Y.
phút number tự động Giá trị tối thiểu để hiển thị trên trục Y.
showCategoryLabels boolean đúng Nếu bạn đặt thành false, nhãn sẽ bị xoá (các nhãn trục X).
showValueLabel boolean đúng Nếu bạn đặt chính sách này thành false, thì hệ thống sẽ xóa nhãn của các giá trị (nhãn trục Y).
tiêu đề chuỗi không có tiêu đề Văn bản sẽ hiển thị phía trên biểu đồ.
Khoảng thời gian giá trị của nhãn number Tự động Khoảng thời gian hiển thị nhãn trục giá trị. Ví dụ: nếu min là 0, max là 100 và valueLabelsInterval là 20, biểu đồ sẽ hiển thị các nhãn trục ở (0, 20, 40, 60, 80 100).
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 đồ.