Hình ảnh: Đo lường

  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 đồng hồ đo có nút quay số, hiển thị trong trình duyệt bằng SVG hoặc VML.

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':['gauge']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {

        var data = google.visualization.arrayToDataTable([
          ['Label', 'Value'],
          ['Memory', 80],
          ['CPU', 55],
          ['Network', 68]
        ]);

        var options = {
          width: 400, height: 120,
          redFrom: 90, redTo: 100,
          yellowFrom:75, yellowTo: 90,
          minorTicks: 5
        };

        var chart = new google.visualization.Gauge(document.getElementById('chart_div'));

        chart.draw(data, options);

        setInterval(function() {
          data.setValue(0, 1, 40 + Math.round(60 * Math.random()));
          chart.draw(data, options);
        }, 13000);
        setInterval(function() {
          data.setValue(1, 1, 40 + Math.round(60 * Math.random()));
          chart.draw(data, options);
        }, 5000);
        setInterval(function() {
          data.setValue(2, 1, 60 + Math.round(20 * Math.random()));
          chart.draw(data, options);
        }, 26000);
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 400px; height: 120px;"></div>
  </body>
</html>

Hiện tại, không có cách nào để chỉ định tiêu đề của biểu đồ dạng đồng hồ đo như đối với các biểu đồ khác của Google. Trong ví dụ trên, HTML đơn giản được dùng để hiển thị tiêu đề.

Ngoài ra, tuỳ chọn animation.startup có sẵn cho nhiều Biểu đồ khác trên Google không có sẵn cho Biểu đồ dạng đồng hồ đo. Nếu bạn muốn ảnh động khởi động, hãy vẽ biểu đồ ban đầu với các giá trị được đặt thành 0, sau đó vẽ lại bằng giá trị mà bạn muốn tạo ảnh động.

Đang tải

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

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

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

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

Định dạng dữ liệu

Mỗi giá trị số được hiển thị dưới dạng một đồng hồ đo. 2 định dạng dữ liệu thay thế được hỗ trợ:

  1. 2 cột. Cột đầu tiên phải là một chuỗi và chứa nhãn của biểu đồ dạng đồng hồ đo. Cột thứ hai phải là một số và chứa giá trị của biểu đồ dạng đồng hồ đo.
  2. Số lượng cột số bất kỳ. Nhãn của mỗi đồng hồ đo là nhãn của cột.

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

Tên
animation.duration

Thời lượng của ảnh động, tính bằng mili giây. Để biết thông tin chi tiết, hãy xem tài liệu về ảnh động.

Loại: số
Mặc định: 400
animation.easing

Hàm easing được áp dụng cho ảnh động. Bạn có thể chọn trong các phương án sau đây:

  • "Tuyến tính" – Tốc độ không đổi.
  • 'in' - Giảm dần – Khởi động chậm và tăng tốc.
  • "out" – Giảm nhẹ – Bắt đầu nhanh và chậm lại.
  • "inAndOut" – Tăng và giảm – Khởi động chậm, tăng tốc, sau đó giảm tốc độ.
Loại: chuỗi
Mặc định: "tuyến tính"
forceIFrame

Vẽ biểu đồ bên trong một khung cùng dòng. (Lưu ý rằng trên IE8, tuỳ chọn này sẽ bị bỏ qua; tất cả biểu đồ của IE8 đều được vẽ trong các khung i.)

Loại: boolean
Mặc định: false
greenColor

Màu cần sử dụng cho phần màu xanh lục, trong ký hiệu màu HTML.

Loại: chuỗi
Mặc định: "#109618"
greenFrom

Giá trị thấp nhất của dải ô được đánh dấu bằng màu xanh lục.

Loại: số
Mặc định: không có
greenTo

Giá trị cao nhất của dải ô được đánh dấu bằng màu xanh lục.

Loại: số
Mặc định: không có
độ cao

Chiều cao của biểu đồ tính bằng pixel.

Loại: số
Mặc định: Chiều rộng của vùng chứa
majorTicks

Nhãn cho các dấu kiểm chính. Số lượng nhãn xác định số lượng kim đánh dấu nhịp độ khung hình chính trong tất cả các đồng hồ đo. Giá trị mặc định là 5 kim đánh dấu nhịp độ khung hình chính, có nhãn là giá trị đồng hồ đo tối thiểu và tối đa.

Loại: Mảng chuỗi
Mặc định: không có
tối đa

Giá trị tối đa của một đồng hồ đo.

Loại: số
Mặc định: 100
phút

Giá trị nhỏ nhất của một đồng hồ đo.

Loại: số
Mặc định: 0
minorTicks

Số phần đánh dấu nhịp độ khung hình nhỏ trong mỗi phần đánh dấu nhịp độ khung hình chính.

Loại:số
Mặc định: 2
redColor

Màu cần sử dụng cho phần màu đỏ, trong ký hiệu màu HTML.

Loại: chuỗi
Mặc định: "#DC3912"
redFrom

Giá trị thấp nhất của dải ô được đánh dấu bằng màu đỏ.

Loại: số
Mặc định: không có
redTo

Giá trị cao nhất của dải ô được đánh dấu bằng màu đỏ.

Loại: số
Mặc định: không có
chiều rộng

Chiều rộng của biểu đồ tính bằng pixel.

Loại: số
Mặc định: Chiều rộng của vùng chứa
yellowColor

Màu cần sử dụng cho phần màu vàng, trong ký hiệu màu HTML.

Loại: chuỗi
Mặc định: "#FF9900"
yellowFrom

Giá trị thấp nhất của dải ô được đánh dấu bằng màu vàng.

Loại: số
Mặc định: không có
yellowTo

Giá trị cao nhất của dải ô được đánh dấu bằng màu vàng.

Loại: số
Mặc định: không có

Phương thức

Phương thức
draw(data, options)

Vẽ biểu đồ.

Loại trả lại: không có
clearChart()

Xoá biểu đồ và giải phóng tất cả tài nguyên đã phân bổ của biểu đồ đó.

Loại trả lại: không có

Sự kiện

Chưa kích hoạt sự kiện nào.

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.