Hình ảnh: Biểu đồ vùng (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 đồ vùng đượ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:["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 là "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 là giá trị trục Y tại cùng một điểm trục X và hình ảnh kết nối các cột đó với một đường thẳng, sau đó điền vào khu vực bên dưới đường kẻ.

Dữ liệu được xử lý theo cột, bắt đầu từ cột 0 và tăng dần. Bạn nên viết các dòng cao nhất trước rồi mới đến các dòng dưới, vì nếu bạn vẽ một dòng dưới trước, dòng cao hơn sẽ vẽ lên trên và ẩn đi mọi dòng thấp hơn. Do đó, hãy cố gắng làm cho 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 ở cột bên phải cao hơn cột bên trái, thì cột này có thể che khuất một phần dòng dưới, nhưng vẫn hiển thị.

Tất cả dữ liệu đều phải ở dạng số, ngoại trừ dữ liệu đầu tiên, có thể ở dạng số hoặc chuỗi. Nếu cột đầu tiên là một loại chuỗi, các mục nhập của 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 nào 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 cấu hình

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 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.
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ị.
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ị nhỏ nhất hiển thị trên trục Y.
showCategoryLabels boolean đúng Nếu bạn đặt chính sách này thành false, hãy xoá nhãn của các danh mục (nhãn trục X).
showValueLabels boolean đúng Nếu bạn đặt chính sách này thành false, hãy xoá nhãn của các giá trị (nhãn trục Y).
title string không có tiêu đề Văn bản để hiển thị phía trên biểu đồ.
valueLabelsInterval 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ị nhãn trục tại (0, 20, 40, 60, 80 100).
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 đồ.