Cách Vẽ Biểu Đồ Gauge: Hướng Dẫn Chi Tiết Từ Cơ Bản Đến Nâng Cao

1. Giới thiệu chung về biểu đồ gauge

Biểu đồ gauge (còn gọi là biểu đồ đồng hồ, biểu đồ tốc độ, speedometer chart) là một dạng biểu đồ trực quan, thường được sử dụng để hiển thị một giá trị duy nhất trong một phạm vi cho trước, giống như kim đồng hồ chỉ vào một vị trí trên vòng tròn. Đây là công cụ mạnh mẽ giúp người dùng nhanh chóng nắm bắt mức độ đạt được của một chỉ số quan trọng, ví dụ như mức tiêu thụ năng lượng, tốc độ xử lý, mức độ hoàn thành dự án, hay chỉ số sức khỏe.

1.1. Lý do nên sử dụng gauge

• Trực quan: Dễ dàng nhận biết mức độ “cao/độ thấp” chỉ qua một cái nhìn.
• Tập trung: Thể hiện một giá trị duy nhất, không gây rối mắt như biểu đồ đa dạng.
• Thẩm mỹ: Thiết kế đẹp mắt, phù hợp với dashboard, báo cáo tương tác.
• Tùy biến cao: Có thể thay đổi màu sắc, độ dốc, các vùng cảnh báo (red/yellow/green) để phản ánh mức độ rủi ro.

1.2. Các loại gauge phổ biến

Loại gauge	Đặc điểm	Ứng dụng thường gặp
Gauge cơ bản	Kim đồng hồ đơn, một vòng tròn	Nhiệt độ, tốc độ
Gauge đa vòng	Nhiều vòng tròn đồng tâm, mỗi vòng thể hiện một chỉ số	Dashboard tài chính
Gauge dạng bán vòng	Chỉ hiển thị 180° (hoặc 270°)	Mức độ hoàn thành, KPI
Gauge radial bar	Thanh cung tròn thay vì kim	Thống kê thời gian, tiến độ
Gauge combo	Kết hợp gauge + biểu đồ khác (line, bar)	Dashboard công nghiệp, IoT

2. Các công cụ vẽ gauge phổ biến

Có thể bạn quan tâm: Cách Vẽ Biểu Đồ Excel: Hướng Dẫn Chi Tiết Từ Cơ Bản Đến Nâng Cao

2.1. Excel & Google Sheets

• Ưu điểm: Dễ học, tích hợp sẵn trong môi trường làm việc văn phòng.
• Nhược điểm: Giới hạn về tùy biến, không hỗ trợ animation mượt mà.

2.2. Power BI

• Ưu điểm: Tích hợp sẵn visual “Gauge”, hỗ trợ DAX, khả năng tạo báo cáo tương tác.
• Nhược điểm: Cần license, tùy biến màu sắc, hình dạng có hạn.

2.3. Tableau

• Ưu điểm: Tính năng “Dual Axis” cho phép tạo gauge độc đáo.
• Nhược điểm: Cần kỹ năng thiết kế, chi phí phần mềm.

2.4. JavaScript Libraries

Thư viện	Đặc điểm	Khi nào dùng
Chart.js	Đơn giản, hỗ trợ gauge qua plugin	Dự án web nhẹ
D3.js	Tùy biến tối đa, đồ họa SVG	Dashboard phức tạp
ECharts	Rich theme, gauge built‑in	Ứng dụng doanh nghiệp
Highcharts	Gauge chuyên nghiệp, hỗ trợ export	Báo cáo thương mại
Google Charts	Dễ tích hợp, miễn phí	Trang web nội bộ

2.5. Python (Matplotlib, Plotly)

Có thể bạn quan tâm: Cách Vẽ Biểu Đồ Ex: Hướng Dẫn Chi Tiết Từ Cơ Bản Đến Nâng Cao

• Matplotlib: Tạo gauge bằng Wedge và annotate. Thích hợp cho báo cáo PDF, Jupyter Notebook.
• Plotly: Gauge built‑in, hỗ trợ interactive, dễ chia sẻ qua web.

3. Quy trình thiết kế gauge từ A → Z

3.1. Bước 1: Xác định mục tiêu và dữ liệu

1. Xác định chỉ số: Ví dụ, “Tỷ lệ hoàn thành dự án” (0‑100%).
2. Xác định phạm vi: Giá trị tối thiểu, tối đa (ví dụ 0‑100).
3. Xác định ngưỡng cảnh báo:
4. Green: 70‑100% (đạt mục tiêu)
5. Yellow: 40‑70% (cần chú ý)
6. Red: 0‑40% (rủi ro cao)

3.2. Bước 2: Lựa chọn loại gauge

• Nếu muốn đơn giản, chọn Gauge cơ bản.
• Nếu cần so sánh nhiều chỉ số, chọn Gauge đa vòng.
• Nếu muốn tập trung vào tiến độ, Gauge bán vòng là lựa chọn tốt.

3.3. Bước 3: Thiết kế bố cục tổng thể

Có thể bạn quan tâm: Cách Vẽ Biểu Đồ E‑p: Hướng Dẫn Chi Tiết Từ Cơ Bản Đến Nâng Cao

Thành phần	Mô tả	Lưu ý
Vòng tròn (đường viền)	Định dạng tổng thể	Độ dày phù hợp với kích thước dashboard
Kim (needle)	Chỉ giá trị hiện tại	Độ dài = tỷ lệ % của vòng tròn
Màu nền các vùng	Đánh dấu ngưỡng	Sử dụng gradient hoặc màu sắc đặc trưng
Nhãn giá trị	Số liệu hiện tại (ví dụ “78%”)	Font lớn, dễ đọc
Tiêu đề	Mô tả chỉ số	Đặt phía trên hoặc bên dưới gauge

3.4. Bước 4: Tạo gauge trong công cụ đã chọn

3.4.1. Vẽ gauge bằng Excel

1. Chuẩn bị dữ liệu:
2. A1 = “Giá trị thực” (ví dụ 78)
3. B1 = “Giá trị còn lại” = 100 – A1
4. Chèn biểu đồ Donut (Vòng tròn rỗng): Chọn A1 & B1 → Insert → Pie → Donut.
5. Định dạng:
6. Loại bỏ “hole size” (đặt 70%).
7. Đặt “Start Angle” = 270° để bắt đầu từ dưới.
8. Thêm kim:
9. Chèn “Shape” → Arrow → Đặt vị trí ở trung tâm, xoay theo công thức: Angle = 360 (Giá trị / 100) - 90.
10. Sử dụng VBA để tự động cập nhật góc khi giá trị thay đổi.
11. Thêm màu nền ngưỡng:
12. Tạo các series phụ cho các vùng màu (green, yellow, red) bằng cách chia 100 thành các phần.
13. Định dạng từng series màu tương ứng.
14. Thêm Text Box: Hiển thị giá trị % và tiêu đề.

3.4.2. Vẽ gauge bằng Power BI

1. Thêm visual “Gauge”: Trong “Visualizations” chọn biểu tượng Gauge.
2. Kéo trường “Giá trị” vào “Value”.
3. Thiết lập “Minimum” và “Maximum”: 0 và 100.
4. Cấu hình “Target value” (nếu muốn so sánh với mục tiêu).
5. Định dạng “Data colors”: Thiết lập màu cho “Low”, “Target”, “High”.
6. Thêm “Conditional formatting” cho màu nền dựa trên ngưỡng.

3.4.3. Vẽ gauge bằng Plotly (Python)

import plotly.graph_objects as go fig = go.Figure(go.Indicator( mode = "gauge+number", value = 78, title = {'text': "Tỷ lệ hoàn thành dự án"}, gauge = { 'axis': {'range': 0, 100}, 'bar': {'color': "darkblue"}, 'steps' : {'range': 0, 40, 'color': "red"}, {'range': 40, 70, 'color': "yellow"}, {'range': 70, 100, 'color': "green"}, 'threshold' : { 'line': {'color': "black", 'width': 4}, 'thickness': 0.75, 'value': 78}})) fig.show()

3.4.4. Vẽ gauge bằng ECharts (JavaScript)

option = { series: { type: 'gauge', startAngle: 180, endAngle: 0, min: 0, max: 100, splitNumber: 5, axisLine: { lineStyle: { width: 30, color: 0.4, '#FF6E76', 0.7, '#FDDD60', 1, '#7CFFB2' } }, pointer: { itemStyle: {color: 'auto'} }, detail: {formatter: '{value}%'}, data: {value: 78, name: 'Hoàn thành'} }
};

3.4.5. Vẽ gauge bằng D3.js (cơ bản)

1. Tạo SVG

const width = 300, height = 300;
const svg = d3.select('#gauge') .append('svg') .attr('width', width) .attr('height', height);

1. Định nghĩa scale

const scale = d3.scaleLinear() .domain(0, 100) .range(-Math.PI/2, Math.PI/2);

1. Vẽ arc cho các vùng màu

const arc = d3.arc() .innerRadius(100) .outerRadius(120) .startAngle(d => scale(d.start)) .endAngle(d => scale(d.end)); const zones = {start:0, end:40, color:'#FF6E76'}, {start:40, end:70, color:'#FDDD60'}, {start:70, end:100, color:'#7CFFB2'}
; svg.selectAll('path') .data(zones) .enter() .append('path') .attr('d', arc) .attr('fill', d=>d.color) .attr('transform', `translate(${width/2},${height/2})`);

1. Vẽ kim

const needleAngle = scale(78);
const line = d3.line() .x(d=>d.x) .y(d=>d.y); const needle = {x:0, y:0}, {x:Math.cos(needleAngle)80, y:Math.sin(needleAngle)80}
; svg.append('path') .attr('d', line(needle)) .attr('stroke','black') .attr('stroke-width',3) .attr('transform',`translate(${width/2},${height/2})`);

3.5. Bước 5: Tinh chỉnh và tối ưu

Yếu tố	Cách tối ưu
Màu sắc	Dùng màu sắc thương hiệu, đảm bảo độ tương phản cao.
Độ nhạy	Nếu giá trị thay đổi thường xuyên, bật animation (ví dụ Plotly transition).
Responsive	Đối với web, sử dụng % hoặc viewBox để gauge co giãn.
Accessibility	Thêm aria-label mô tả giá trị cho người khiếm thị.
Performance	Tránh vẽ quá nhiều gauge trên cùng một trang; dùng lazy loading hoặc canvas nếu cần.

4. Các lỗi thường gặp khi vẽ gauge và cách khắc phục

Lỗi	Nguyên nhân	Giải pháp
Kim không khớp với giá trị	Đơn vị góc tính sai (bắt đầu từ 0° thay vì -90°).	Sử dụng công thức angle = (value/min-max) 360 - 90.
Vùng màu không hiển thị đúng	Đặt thứ tự steps sai hoặc không chuẩn hoá phạm vi.	Đảm bảo steps được sắp xếp tăng dần, tổng 100% = max.
Gauge bị cắt khi responsive	Không thiết lập viewBox hoặc width/height cố định.	Dùng viewBox="0 0 300 300" và width:100%.
Không hiển thị giá trị trong gauge	Thiếu detail hoặc label trong cấu hình.	Thêm detail: {formatter: '{value}%'} trong cấu hình.
Performance chậm	Vẽ quá nhiều gauge SVG phức tạp.	Sử dụng canvas, hoặc gộp nhiều gauge vào một chart với multiple series.

5. Các ví dụ thực tế và ý tưởng sáng tạo

5.1. Dashboard năng lượng cho nhà máy

Có thể bạn quan tâm: Cách Vẽ Biểu Đồ Doughnut: Hướng Dẫn Chi Tiết Từ Cơ Bản Đến Nâng Cao

• Gauge năng lượng tiêu thụ (kW) với ngưỡng:
• Green: ≤ 70% công suất thiết kế
• Yellow: 70‑90%
• Red: > 90%
• Kèm trend line dưới gauge để xem xu hướng 24h.

5.2. Ứng dụng IoT: Giám sát nhiệt độ phòng

• Gauge dạng bán vòng 180°, màu xanh cho 18‑24°C, vàng cho 24‑28°C, đỏ >28°C.
• Kết nối MQTT để cập nhật giá trị mỗi 5 giây, sử dụng Plotly hoặc ECharts để animate mượt.

5.3. KPI nhân sự

• Mỗi nhân viên có gauge “Hiệu suất” dựa trên điểm đánh giá 0‑100.
• Đặt target (ví dụ 85) và hiển thị một dấu “target line” màu vàng.
• Khi vượt target, gauge tự động đổi màu thành xanh lục.

5.4. Biểu đồ gauge đa vòng trong tài chính

• Vòng ngoài: Tỷ lệ lợi nhuận gộp.
• Vòng giữa: Tỷ lệ chi phí hoạt động.
• Vòng trong: Tỷ lệ nợ trên vốn.
• Mỗi vòng có màu sắc và ngưỡng riêng, giúp nhà quản lý nhìn tổng quan nhanh.

5.5. Gauge animation cho trang giới thiệu sản phẩm

• Khi người dùng scroll tới phần “Thống kê”, gauge “Số lượng khách hàng hài lòng” từ 0 → 96% trong 2 giây, tạo ấn tượng mạnh.

6. Lời khuyên cuối cùng khi triển khai gauge

1. Không lạm dụng: Gauge rất mạnh nhưng chỉ nên dùng cho các chỉ số “độc lập”, không nên dùng để so sánh nhiều danh mục cùng lúc.
2. Giữ độ đơn giản: Tránh thêm quá nhiều chi tiết (đường lưới, label phụ) gây rối mắt.
3. Kiểm tra trên nhiều thiết bị: Đảm bảo gauge hiển thị tốt trên desktop, tablet và mobile.
4. Cân nhắc màu sắc: Đối với người màu mù, tránh dùng chỉ màu đỏ‑xanh; thêm biểu tượng hoặc hatching để phân biệt.
5. Tự động cập nhật: Khi dữ liệu thay đổi thường xuyên, tích hợp API và sử dụng WebSocket hoặc polling để gauge luôn “sống”.

7. Tổng kết

Biểu đồ gauge là một công cụ trực quan, mạnh mẽ và linh hoạt, phù hợp cho mọi loại dashboard từ kinh doanh, công nghiệp tới health‑tech. Qua bài viết này, bạn đã nắm được:

• Khái niệm và các loại gauge
• Công cụ và thư viện phổ biến (Excel, Power BI, Tableau, JavaScript, Python)
• Quy trình chi tiết từ xác định mục tiêu, thiết kế, triển khai tới tối ưu hoá.
• Mã mẫu thực tế cho Plotly, ECharts, D3.js và Excel.
• Lỗi thường gặp và cách khắc phục, cũng như ý tưởng sáng tạo cho các trường hợp thực tế.

Hãy áp dụng những kiến thức trên để tạo ra những gauge đẹp mắt, chính xác và hữu ích, nâng cao trải nghiệm người dùng và giúp doanh nghiệp đưa ra quyết định nhanh chóng, chính xác hơn. Chúc bạn thành công!