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ế:
- 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.
- 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:
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.