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 về cấu hình
  6. Phương thức
  7. Sự kiện
  8. Chính sách dữ liệu

Tổng quan

Một đồng hồ đo có nút quay số, được kết xuất 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 đồ thước đo như bạn có thể thực hiện 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, tùy chọn animation.startup có sẵn cho nhiều Biểu đồ của Google không có sẵn cho Biểu đồ đồng hồ đo. Nếu bạn muốn ảnh động khi 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 ảnh động vào.

Đ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 đồng hồ đo. Hỗ trợ hai định dạng dữ liệu thay thế:

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

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

Tên
animate.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
hoạt ảnh.

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

  • 'tuyến tính' - Tốc độ không đổi.
  • 'in' - easy in - Bắt đầu chậm và tăng tốc.
  • 'out' - easing out - Bắt đầu nhanh và chậm.
  • 'inAndOut' - Giảm dần và khởi động - Bắt đầu chậm, tăng tốc, sau đó chậm lại.
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. (Xin lưu ý rằng trên IE8, tuỳ chọn này sẽ bị bỏ qua; tất cả biểu đồ IE8 đều được vẽ trong khung i.)

Loại: Boolean
Mặc định: sai
màu xanh lục

Màu 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"
nguồn từ xanh lục

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

Loại: số
Mặc định: không có
màu xanh lụcTo

Giá trị cao nhất của một 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
lớn

Nhãn cho các dấu kiểm. 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à năm kim đánh dấu nhịp độ khung hình chính, với các nhãn của giá trị 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 đồng hồ đo.

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

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

Loại: số
Mặc định: 0
Đánh dấu nhỏ

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

Loại: số
Mặc định: 2
màu đỏ

Màu sắc 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 một dải ô được đánh dấu bằng màu đỏ.

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

Giá trị cao nhất của một 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 biểu đồ tính bằng pixel.

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

Màu sắc 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 một dải ô được đánh dấu bằng màu vàng.

Loại: số
Mặc định: không có
màu vàngTo

Giá trị cao nhất của một 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 dữ liệu trả về: không có
clearChart()

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

Loại dữ liệu trả về: không có

Sự kiện

Không có sự kiện nào được kích hoạt.

Chính sách dữ liệu

Toàn bộ mã và dữ liệu đều được xử lý và kết xuất trong trình duyệt. Dữ liệu không được gửi đến bất kỳ máy chủ nào.