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

Mở Đầu

Biểu đồ tròn (pie chart) là một trong những công cụ trực quan hóa dữ liệu phổ biến và hiệu quả nhất, giúp người dùng nhanh chóng nắm bắt tỷ lệ phần trăm của các thành phần trong một tổng thể. Tuy nhiên, để tạo ra một biểu đồ tròn chính xác, thẩm mỹ và dễ hiểu, chúng ta cần nắm vững các bước tính toán, lựa chọn dữ liệu phù hợp và áp dụng các kỹ thuật vẽ đúng chuẩn. Bài viết này sẽ cung cấp cho bạn một hướng dẫn chi tiết, từ việc chuẩn bị dữ liệu, tính toán góc, lựa chọn màu sắc, tới việc vẽ biểu đồ tròn bằng các công cụ phổ biến như Excel, Google Sheets, Python (matplotlib, seaborn) và thậm chí là HTML5 Canvas.

1. Kiến Thức Cơ Bản Về Biểu Đồ Tròn

1.1. Định Nghĩa

Biểu đồ tròn là một biểu đồ dạng hình tròn được chia thành các “miếng” (sector) hoặc “cung” (slice), mỗi miếng đại diện cho một phần tỷ lệ của tổng thể. Tổng các góc của các miếng luôn bằng 360 độ (hoặc 2π radian).

1.2. Khi Nào Nên Sử Dụng Biểu Đồ Tròn?

• Tỷ lệ phần trăm: Khi muốn thể hiện tỉ lệ phần trăm của các danh mục trong một tổng thể.
• Số lượng danh mục ít: Thường không nên dùng nếu có quá nhiều danh mục (hơn 7-8), vì sẽ gây rối mắt.
• So sánh tương đối: Khi mục tiêu là so sánh tỷ lệ tương đối hơn là giá trị tuyệt đối.

1.3. Những Lỗi Thường Gặp

• Quá nhiều miếng: Khi có quá nhiều danh mục, miếng sẽ quá mỏng, khó nhận diện.
• Không bắt đầu từ cùng một vị trí: Đôi khi các miếng không bắt đầu từ góc 0° (đường dọc lên trên), gây khó so sánh.
• Màu sắc không đối lập: Màu gần nhau làm người xem khó phân biệt.
• Không hiển thị giá trị: Chỉ có màu không đủ, cần có nhãn hoặc tỷ lệ phần trăm.

2. Chuẩn Bị Dữ Liệu

2.1. Thu Thập Dữ Liệu

• Nguồn dữ liệu: Bảng tính, cơ sở dữ liệu, file CSV, API.
• Kiểm tra tính hợp lệ: Đảm bảo không có giá trị âm, không có giá trị null.

2.2. Định Dạng Dữ Liệu

Dữ liệu cần được chuẩn hoá thành hai cột cơ bản:
| Danh Mục | Giá Trị |
|———-|———|
| A | 120 |
| B | 80 |
| C | 200 |
| D | 50 |

2.3. Tính Tổng

Có thể bạn quan tâm: Cách Tính Tỷ Lệ Bản Vẽ: Hướng Dẫn Chi Tiết Từ Cơ Bản Đến Nâng Cao

Tổng = Σ Giá Trị

Ví dụ: Tổng = 120 + 80 + 200 + 50 = 450.

2.4. Kiểm Tra Tỷ Lệ

Mỗi giá trị chia cho tổng để có tỷ lệ phần trăm:

Tỷ lệ_i = Giá Trị_i / Tổng

• A: 120/450 = 0.2667 → 26.67%
• B: 80/450 = 0.1778 → 17.78%
• C: 200/450 = 0.4444 → 44.44%
• D: 50/450 = 0.1111 → 11.11%

3. Công Thức Tính Góc Cho Mỗi Miếng

3.1. Góc Độ

Góc_i (độ) = Tỷ lệ_i × 360°

• A: 0.2667 × 360 = 96°
• B: 0.1778 × 360 = 64°
• C: 0.4444 × 360 = 160°
• D: 0.1111 × 360 = 40°

3.2. Góc Radian

Nếu làm việc trong môi trường lập trình (Python, JavaScript):

Góc_i (radian) = Tỷ lệ_i × 2π

• A: 0.2667 × 2π ≈ 1.676 rad
• B: 0.1778 × 2π ≈ 1.117 rad
• C: 0.4444 × 2π ≈ 2.791 rad
• D: 0.1111 × 2π ≈ 0.698 rad

3.3. Kiểm Tra Tổng Góc

Σ Góc_i = 360° (hoặc 2π rad)

Trong ví dụ: 96 + 64 + 160 + 40 = 360°, đúng.

4. Vẽ Biểu Đồ Tròn Bằng Excel

4.1. Nhập Dữ Liệu

• Mở Excel, nhập bảng dữ liệu như trên vào hai cột.

4.2. Chèn Biểu Đồ

1. Chọn dữ liệu → Insert → Pie Chart → Chọn kiểu 2-D Pie.
2. Biểu đồ sẽ xuất hiện, mỗi miếng tương ứng với danh mục.

4.3. Định Dạng Miếng

• Thêm nhãn: Click chuột phải vào biểu đồ → Add Data Labels → More Data Label Options → Tick Percentage.
• Thay đổi màu: Click vào miếng → Format Data Point → Chọn màu.
• Bắt đầu góc: Format Data Series → Angle of first slice → Đặt 0° (đường dọc lên trên) hoặc tùy ý.

4.4. Tùy Chỉnh Thêm

• Exploded Pie: Kéo miếng ra để nhấn mạnh.
• Đánh dấu: Thêm đường dẫn (leader lines) nếu nhãn ngoài biểu đồ.

4.5. Lưu và Xuất

Có thể bạn quan tâm: Cách Tìm Ra Nét Vẽ Riêng: Hành Trình Khám Phá Phong Cách Cá Nhân Trong Nghệ Thuật

• File → Save As → Chọn định dạng (xlsx, pdf, png).

5. Vẽ Biểu Đồ Tròn Bằng Google Sheets

5.1. Nhập Dữ Liệu

• Tương tự như Excel.

5.2. Tạo Biểu Đồ

1. Chọn dữ liệu → Insert → Chart.
2. Trong Chart editor, chọn Chart type → Pie chart.

5.3. Tùy Chỉnh

• Customize → Pie slice → Thay đổi màu, Slice label → Hiển thị Percentage.
• Chart & axis titles → Thêm tiêu đề.

5.4. Chia Sẻ

• Dễ dàng chia sẻ link hoặc nhúng vào website bằng Publish to web.

6. Vẽ Biểu Đồ Tròn Bằng Python (matplotlib)

6.1. Cài Đặt Thư Viện

pip install matplotlib

6.2. Mã Nguồn Cơ Bản

import matplotlib.pyplot as plt # Dữ liệu
labels = 'A', 'B', 'C', 'D'
sizes = 120, 80, 200, 50 # Giá trị gốc
total = sum(sizes)
percent = s/total100 for s in sizes # Vẽ biểu đồ
fig, ax = plt.subplots()
ax.pie(sizes, labels=labels, autopct='%1.1f%%', startangle=90, # Bắt đầu từ 12h colors='#ff9999','#66b3ff','#99ff99','#ffcc99', explode=(0, 0, 0.1, 0)) # Nổi miếng C
ax.axis('equal') # Đảm bảo hình tròn plt.title('Biểu Đồ Tròn - Ví Dụ')
plt.show()

6.3. Giải Thích Các Tham Số

• autopct='%1.1f%%': Hiển thị tỷ lệ phần trăm với 1 chữ số thập phân.
• startangle=90: Đặt miếng đầu tiên ở vị trí 12h.
• explode: Nổi miếng (đẩy ra khỏi trung tâm) để nhấn mạnh.
• axis('equal'): Giữ tỉ lệ trục X và Y bằng nhau, tránh biến dạng.

6.4. Vẽ Biểu Đồ 3D

from mpl_toolkits.mplot3d import Axes3D fig = plt.figure()
ax = fig.add_subplot(111, projection='3d')
ax.pie(sizes, startangle=90, colors='#ff9999','#66b3ff','#99ff99','#ffcc99')
ax.set_title('Biểu Đồ Tròn 3D')
plt.show()

Lưu ý: mpl_toolkits không hỗ trợ 3D pie chart thực sự, thường dùng mpl_toolkits.mplot3d để tạo hiệu ứng 3D.

7. Vẽ Biểu Đồ Tròn Bằng JavaScript (Chart.js)

Có thể bạn quan tâm: Cách Trị Mề Đay Vẽ Nổi: Hướng Dẫn Chi Tiết, Hiệu Quả Và An Toàn

7.1. Chuẩn Bị

• Tải thư viện Chart.js từ CDN:

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

7.2. HTML Cơ Bản

<canvas id="myPieChart" width="400" height="400"></canvas>

7.3. JavaScript

const ctx = document.getElementById('myPieChart').getContext('2d');
const data = { labels: 'A', 'B', 'C', 'D', datasets: { data: 120, 80, 200, 50, backgroundColor: '#ff9999', '#66b3ff', '#99ff99', '#ffcc99', hoverOffset: 10 }
}; const config = { type: 'pie', data: data, options: { responsive: true, plugins: { legend: { position: 'right', }, tooltip: { callbacks: { label: function(context) { const total = context.dataset.data.reduce((a,b) => a+b,0); const value = context.parsed; const percent = (value/total100).toFixed(1); return `${context.label}: ${value} (${percent}%)`; } } } } },
}; new Chart(ctx, config);

7.4. Tùy Chỉnh

• Hover effect: hoverOffset để làm nổi miếng khi di chuột.
• Tooltip: Hiển thị giá trị và phần trăm.
• Legend: Đặt vị trí, màu sắc.

8. Vẽ Biểu Đồ Tròn Bằng HTML5 Canvas Thuần

8.1. Cấu Trúc HTML

<canvas id="pieCanvas" width="500" height="500"></canvas>

8.2. JavaScript Tính Toán Góc

const canvas = document.getElementById('pieCanvas');
const ctx = canvas.getContext('2d'); const data = {label: 'A', value: 120, color: '#ff9999'}, {label: 'B', value: 80, color: '#66b3ff'}, {label: 'C', value: 200, color: '#99ff99'}, {label: 'D', value: 50, color: '#ffcc99'}
; const total = data.reduce((sum, d) => sum + d.value, 0);
let startAngle = -0.5 Math.PI; // Bắt đầu từ 12h data.forEach(d => { const sliceAngle = (d.value / total) 2 Math.PI; const endAngle = startAngle + sliceAngle; // Vẽ miếng ctx.beginPath(); ctx.moveTo(canvas.width/2, canvas.height/2); ctx.arc(canvas.width/2, canvas.height/2, 200, startAngle, endAngle); ctx.closePath(); ctx.fillStyle = d.color; ctx.fill(); // Vẽ nhãn const midAngle = startAngle + sliceAngle/2; const labelX = canvas.width/2 + 120 Math.cos(midAngle); const labelY = canvas.height/2 + 120 Math.sin(midAngle); ctx.fillStyle = '#000'; ctx.font = '16px Arial'; const percent = ((d.value/total)100).toFixed(1) + '%'; ctx.fillText(`${d.label} (${percent})`, labelX, labelY); startAngle = endAngle;
});

8.3. Giải Thích

• startAngle bắt đầu từ -π/2 (12h) để miếng đầu tiên nằm ở trên.
• arc vẽ cung tròn, bán kính 200px.
• Nhãn được đặt ở vị trí trung bình của mỗi miếng, cách tâm 120px.

9. Các Kỹ Thuật Nâng Cao

9.1. Biểu Đồ Tròn Có Đường Kẻ (Donut Chart)

• Donut chart là phiên bản có lỗ ở giữa, giúp nhãn và tiêu đề đặt ở trung tâm.
• Excel: Chọn Pie Chart → Doughnut Chart.
• Python (matplotlib):

ax.pie(sizes, radius=1, wedgeprops=dict(width=0.3, edgecolor='w'))

• Chart.js: Thay type: 'pie' thành type: 'doughnut'.

9.2. Tách Miếng (Exploded Slice)

Có thể bạn quan tâm: Cách Sử Dụng Giá Vẽ Tranh: Hướng Dẫn Chi Tiết Từ Lựa Chọn Đến Bảo Quản

• Dùng để nhấn mạnh một danh mục quan trọng.
• Excel: Kéo miếng ra.
• Python: explode = (0, 0, 0.1, 0).
• Chart.js: offset: 20 trong dataset.

9.3. Ghi Nhãn Bên Ngoài (Outside Labels)

• Khi miếng quá nhỏ, nhãn bên trong sẽ chồng chéo.
• Excel: Label Position → Outside End.
• Matplotlib: autopct kết hợp pctdistance và labeldistance.

ax.pie(sizes, labels=labels, autopct='%1.1f%%', pctdistance=0.85, labeldistance=1.1)

9.4. Sắp Xếp Miếng Theo Giá Trị

• Để biểu đồ dễ so sánh, sắp xếp danh mục giảm dần.

data = sorted(data, key=lambda x: x'value', reverse=True)

9.5. Thêm Đường Kẻ Phân Chia (Grid Lines) – Không Thường Dùng

• Đối với biểu đồ tròn, không dùng grid, nhưng có thể thêm các đường chia góc (radial lines) để tăng độ rõ ràng trong một số trường hợp đặc thù.

10. Lưu Ý Khi Trình Bày

Yếu Tố	Gợi Ý
Màu sắc	Chọn màu tương phản, tránh sử dụng quá nhiều màu tương tự
Số lượng miếng	≤ 7 là lý tưởng; nếu >7, cân nhắc nhóm lại hoặc dùng bar chart
Nhãn	Hiển thị cả giá trị và phần trăm; đặt ở vị trí dễ đọc
Tiêu đề	Ngắn gọn, mô tả rõ nội dung (ví dụ: “Tỷ Lệ Doanh Thu Theo Khu Vực”)
Nguồn dữ liệu	Đưa nguồn gốc (năm, báo cáo) để tăng độ tin cậy
Định dạng	Đảm bảo biểu đồ không bị méo (axis equal, ratio 1:1)

11. So Sánh Với Các Kiểu Biểu Đồ Khác

Kiểu biểu đồ	Khi nào nên dùng?	Ưu điểm	Nhược điểm
Bar Chart	So sánh giá trị tuyệt đối, danh mục nhiều (>7)	Dễ đọc, so sánh trực tiếp	Không hiển thị tỷ lệ phần trăm rõ ràng
Line Chart	Biểu diễn xu hướng theo thời gian	Thể hiện xu hướng mượt mà	Không phù hợp cho tỷ lệ phần trăm
Stacked Bar	Hiển thị cấu trúc phần trăm trong các nhóm	So sánh tổng và thành phần	Phức tạp khi có nhiều nhóm
Pie Chart	Tỷ lệ phần trăm, danh mục ít, muốn nhấn mạnh tỉ lệ	Trực quan, dễ hiểu	Không tốt khi danh mục nhiều hoặc giá trị gần nhau
Donut Chart	Cần không gian trung tâm để đặt tiêu đề hoặc nhãn tổng hợp	Thẩm mỹ, trung tâm trống	Cũng có các hạn chế của pie chart

12. Thực Hành: Tạo Biểu Đồ Tròn Cho Dữ Liệu Thực Tế

Giả sử bạn là nhà phân tích bán hàng và muốn trình bày tỷ lệ doanh thu theo sản phẩm trong quý 1:

Sản phẩm	Doanh thu (triệu VND)
Smartphone	340
Laptop	210
Tablet	95
Phụ kiện	55
Đồng hồ thông minh	30

12.1. Tính Tổng và Tỷ Lệ

• Tổng = 340 + 210 + 95 + 55 + 30 = 730 triệu.
• Tỷ lệ:
• Smartphone: 46.58%
• Laptop: 28.77%
• Tablet: 13.01%
• Phụ kiện: 7.53%
• Đồng hồ: 4.11%

12.2. Vẽ Bằng Python

import matplotlib.pyplot as plt labels = 'Smartphone','Laptop','Tablet','Phụ kiện','Đồng hồ'
values = 340,210,95,55,30
colors = '#ff6666','#ffcc99','#99ff99','#66b3ff','#c2c2f0'
explode = (0.1,0,0,0,0) # Nổi Smartphone plt.figure(figsize=(8,8))
plt.pie(values, labels=labels, autopct='%1.1f%%', startangle=90, colors=colors, explode=explode, shadow=True)
plt.title('Tỷ Lệ Doanh Thu Theo Sản Phẩm - Q1')
plt.axis('equal')
plt.show()

12.3. Vẽ Bằng Excel

1. Nhập dữ liệu vào bảng.
2. Chọn Insert → Pie Chart → 2-D Pie.
3. Đặt Explode cho miếng Smartphone.
4. Thêm nhãn phần trăm và tiêu đề.

12.4. Đánh Giá

• Smartphone chiếm gần một nửa, nên nên nổi để thu hút sự chú ý.
• Đồng hồ chỉ 4%, có thể gộp vào “Khác” nếu muốn giảm số miếng.

13. Tự Động Hóa Quá Trình Tạo Biểu Đồ Tròn

13.1. Sử Dụng VBA trong Excel

Sub CreatePieChart() Dim ws As Worksheet Set ws = ThisWorkbook.Sheets("Data") Dim rng As Range Set rng = ws.Range("A1:B5") 'Giả sử dữ liệu ở A1:B5 Dim cht As ChartObject Set cht = ws.ChartObjects.Add(Left:=300, Width:=400, Top:=10, Height:=300) With cht.Chart .ChartType = xlPie .SetSourceData Source:=rng .HasTitle = True .ChartTitle.Text = "Doanh Thu Theo Sản Phẩm" .ApplyDataLabels xlDataLabelsShowPercent, , , , True .SeriesCollection(1).Explosion = 10 'Nổi miếng đầu tiên End With
End Sub

13.2. Sử Dụng Power Query + Power BI

• Power Query: Xử lý, tổng hợp dữ liệu.
• Power BI: Tạo visual Pie Chart, tùy chỉnh màu, tooltip, drill-down.

14. Kiểm Tra Độ Chính Xác Và Kiểm Định

14.1. Kiểm Tra Tổng Phần Trăm

Sau khi hiển thị, tổng các phần trăm nên bằng 100% (có thể sai lệch do làm tròn). Kiểm tra:

total_pct = sum(pct for pct in percent)
print(f"Tổng phần trăm: {total_pct:.2f}%")

Nếu sai lệch > 0.5%, cân nhắc điều chỉnh hiển thị.

14.2. Đánh Giá Thị Giác

• Công cụ: Use colorblind palettes (e.g., viridis, cividis) để đảm bảo người dùng màu mù vẫn phân biệt được.
• Cân nhắc: Tránh màu đỏ và xanh lá quá gần nhau.

15. Kết Luận

Biểu đồ tròn là một công cụ mạnh mẽ cho việc truyền đạt tỷ lệ phần trăm một cách trực quan. Tuy nhiên, để đạt được hiệu quả tối đa, chúng ta cần:
1. Chuẩn bị dữ liệu sạch và tính toán tổng, tỷ lệ, góc một cách chính xác.
2. Lựa chọn công cụ phù hợp (Excel, Google Sheets, Python, JavaScript) dựa trên nhu cầu và môi trường làm việc.
3. Áp dụng các quy tắc thiết kế: màu sắc đối lập, nhãn rõ ràng, số lượng miếng hợp lý.
4. Sử dụng kỹ thuật nâng cao như donut chart, exploded slice, outside labels để làm nổi bật thông tin quan trọng.
5. Kiểm tra độ chính xác và tính thẩm mỹ, đồng thời cân nhắc đối tượng người xem (màu mù, người không chuyên).

Bằng cách tuân thủ những hướng dẫn chi tiết trên, bạn sẽ tự tin tạo ra những biểu đồ tròn không chỉ chính xác mà còn đẹp mắt, giúp truyền tải thông tin một cách hiệu quả và chuyên nghiệp. Hãy thực hành với các bộ dữ liệu thực tế, điều chỉnh các tham số cho phù hợp và không ngừng cải thiện kỹ năng trực quan hoá dữ liệu của mình. Chúc bạn thành công!