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

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

Biểu đồ doughnut (còn gọi là biểu đồ vòng donut) là một biến thể của biểu đồ tròn (pie chart) nhưng có một “lỗ” ở giữa, tạo nên hình dạng giống như một chiếc bánh vòng. So với biểu đồ tròn truyền thống, doughnut mang lại một số ưu điểm nổi bật:

• Hiển thị nhiều nhóm dữ liệu: Có thể chồng nhiều vòng doughnut lên nhau, mỗi vòng đại diện cho một cấp độ hoặc một thời kỳ khác nhau, giúp so sánh đa chiều.
• Không gian trung tâm: Lỗ ở giữa cho phép bạn chèn tiêu đề, giá trị tổng, hoặc các biểu tượng minh họa, làm tăng tính thẩm mỹ và thông tin.
• Dễ đọc: Khi có quá nhiều phần trong một biểu đồ tròn, các góc nhỏ sẽ khó nhìn. Doughnut thường chia dữ liệu thành các phần vừa phải, giảm thiểu hiện tượng “gãy góc”.
• Thích hợp cho dashboard: Trong các báo cáo kinh doanh, dashboard tài chính hay phân tích dữ liệu, doughnut thường được dùng để tóm tắt nhanh các chỉ số quan trọng.

Trong bài viết này, chúng ta sẽ đi sâu vào cách vẽ biểu đồ doughnut từ những công cụ phổ biến như Microsoft Excel, Google Sheets, Power BI, Tableau, và thậm chí là lập trình bằng JavaScript (Chart.js, D3.js). Bên cạnh đó, chúng ta sẽ khám phá các nguyên tắc thiết kế, lựa chọn màu sắc, xử lý dữ liệu, và các mẹo tối ưu để biểu đồ của bạn vừa đẹp mắt vừa truyền tải thông tin hiệu quả.

2. Khi nào nên sử dụng biểu đồ doughnut?

Trước khi bắt tay vào vẽ, hãy cân nhắc xem doughnut có thực sự phù hợp với dữ liệu và mục tiêu truyền tải hay không. Dưới đây là một số tình huống thích hợp:

Trường hợp	Lý do sử dụng doughnut
So sánh tỷ lệ phần trăm	Doughnut giúp thể hiện tỷ lệ phần trăm của từng hạng mục trong tổng thể.
Hiển thị dữ liệu phân lớp	Khi muốn thể hiện dữ liệu có cấu trúc phân cấp (ví dụ: doanh thu theo khu vực → theo sản phẩm).
Báo cáo nhanh trong dashboard	Với không gian hạn chế, doughnut cung cấp thông tin tổng quan nhanh.
Cần chèn thông tin phụ ở trung tâm	Giá trị tổng, năm, hoặc biểu tượng thương hiệu có thể đặt ở trung tâm.
Tránh quá nhiều phần nhỏ	Nếu dữ liệu có nhiều mục, bạn có thể gộp các mục nhỏ thành “Khác”.

Không nên dùng doughnut khi:

• Dữ liệu có quá nhiều hạng mục (trên 10) khiến mỗi phần quá mỏng.
• Yêu cầu so sánh giá trị tuyệt đối chi tiết (biểu đồ cột hoặc đường thường tốt hơn).
• Cần thể hiện xu hướng theo thời gian (biểu đồ đường, cột, hoặc area phù hợp hơn).

3. Nguyên tắc thiết kế biểu đồ doughnut chuẩn

3.1. Lựa chọn màu sắc hợp lý

• Màu sắc tương phản: Đảm bảo mỗi phần có màu sắc đủ khác biệt để người xem dễ phân biệt. Tránh dùng các màu quá gần nhau (ví dụ: xanh lá nhạt và xanh lá nhạt hơn).
• Palette dựa trên mục tiêu: Nếu biểu đồ dùng cho báo cáo tài chính, thường dùng màu xanh (tăng) và đỏ (giảm). Nếu là báo cáo thị trường, có thể dùng màu sắc thương hiệu.
• Số lượng màu: Không nên vượt quá 7 màu chính. Khi cần nhiều hơn, hãy nhóm các mục tương tự lại và dùng tông màu (shade) của một màu chính.

3.2. Độ dày vòng (thickness)

• Vòng mỏng: Thích hợp khi chồng nhiều vòng (để tạo độ sâu) hoặc khi muốn nhấn mạnh phần trung tâm.
• Vòng dày: Khi chỉ có một vòng duy nhất, độ dày lớn giúp tăng khả năng đọc và tạo cảm giác “đầy đủ”.

3.3. Nhãn (label) và chú giải (legend)

• Nhãn trực tiếp trên phần: Đặt giá trị % hoặc số lượng ngay trên hoặc bên cạnh phần. Đảm bảo không che lấp quá nhiều phần.
• Legend bên cạnh: Khi có quá nhiều phần, dùng legend để liệt kê màu và mô tả. Đặt legend gần biểu đồ, tránh để quá xa gây mất liên kết.
• Công cụ tooltip: Trong các công cụ tương tác (Google Sheets, Power BI, Chart.js), khi người dùng di chuột lên phần, hiển thị tooltip chi tiết.

3.4. Giá trị trung tâm

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

• Tổng cộng: Thường đặt tổng số hoặc tổng % ở trung tâm.
• Tiêu đề ngắn: Ghi ngắn gọn như “Doanh thu 2026” hoặc “Tỷ lệ khách hàng”.
• Biểu tượng: Đôi khi đặt logo công ty hoặc biểu tượng liên quan để tăng nhận diện thương hiệu.

3.5. Độ chính xác và làm tròn

• Làm tròn: Khi hiển thị % trên biểu đồ, thường làm tròn đến 1 chữ số thập phân hoặc 0 chữ số nếu dữ liệu lớn.
• Kiểm tra tổng: Đảm bảo tổng các phần = 100% (hoặc gần 100% trong trường hợp làm tròn). Nếu không, có thể thêm một phần “Khác” để bù.

4. Hướng dẫn vẽ doughnut trong Microsoft Excel

Excel là công cụ phổ biến nhất cho việc tạo biểu đồ. Dưới đây là các bước chi tiết:

4.1. Chuẩn bị dữ liệu

Hạng mục	Giá trị
Điện thoại	150
Máy tính	200
Tablet	80
Phụ kiện	70
Khác	30

• Đặt tiêu đề cột ở hàng đầu (A1, B1).
• Đảm bảo không có ô trống trong dải dữ liệu.

4.2. Chèn biểu đồ

1. Chọn dải dữ liệu (A1:B6).
2. Vào Insert → Charts → Pie → Doughnut. Excel sẽ tự động tạo một biểu đồ doughnut đơn.

4.3. Tùy chỉnh biểu đồ

• Thay đổi màu sắc: Click vào vòng doughnut → Format Data Series → Fill → Solid fill → chọn màu. Lặp lại cho từng phần.
• Thêm nhãn: Click chuột phải vào vòng → Add Data Labels → More Data Label Options → chọn Percentage và Category Name. Đánh dấu Value nếu muốn hiển thị số.
• Định dạng nhãn: Trong Label Options, có thể đặt vị trí Inside End hoặc Outside End tùy vào độ dày vòng.
• Thêm tiêu đề trung tâm: Click vào vòng → Format Data Series → Series Options → Donut Hole Size (đặt 50% hoặc tùy ý). Sau đó, chèn Text Box ở trung tâm và nhập nội dung (ví dụ: “Tổng: 530”).
• Thêm legend: Nếu không tự động xuất hiện, vào Chart Elements → Legend → Right.

4.4. Tối ưu cho báo cáo

• Giảm độ chi tiết: Nếu có quá nhiều phần nhỏ (<5% mỗi phần), gộp chúng thành “Khác”. Thêm một dòng “Khác” trong bảng dữ liệu.
• Định dạng số: Click vào Data Labels → Number → Number Format → Percentage với 1 decimal place.
• Lưu mẫu: Nếu bạn thường xuyên dùng cùng kiểu, có thể lưu biểu đồ dưới dạng Template (right‑click → Save as Template), sau đó tái sử dụng.

5. Vẽ doughnut trong Google Sheets

Google Sheets cung cấp tính năng vẽ biểu đồ trực tuyến, thuận tiện cho làm việc nhóm.

5.1. Chuẩn bị dữ liệu

Giống như trong Excel, tạo bảng:

Loại	Số lượng
A	120
B	80
C	50
D	30
E	20

5.2. Tạo biểu đồ

Có thể bạn quan tâm: Cách Vẽ Biểu Đồ Dfd (data Flow Diagram) Chi Tiết Từ A Đến Z

1. Chọn dải dữ liệu (A1:B6).
2. Insert → Chart. Google Sheets sẽ tự động đề xuất một biểu đồ.
3. Trong Chart editor, chuyển Chart type thành Donut chart.

5.3. Tùy chỉnh

• Thay đổi màu: Trong Customize → Pie slice, chọn màu cho từng phần.
• Thêm nhãn: Customize → Pie chart → Slice label → chọn Value hoặc Percentage.
• Thêm tiêu đề trung tâm: Google Sheets không hỗ trợ trực tiếp chèn văn bản vào lỗ trung tâm. Bạn có thể tạo Text box (Insert → Drawing → Text box) và đặt lên trên biểu đồ, căn giữa.
• Thêm legend: Customize → Legend → chọn vị trí (right, top, bottom).

5.4. Chia sẻ và nhúng

• Nhúng vào website: Click vào biểu đồ → Publish chart → Embed. Mã HTML sẽ chứa một iframe hiển thị biểu đồ doughnut tương tác.
• Cập nhật tự động: Khi dữ liệu thay đổi, biểu đồ sẽ tự động cập nhật mà không cần làm gì thêm.

6. Sử dụng Power BI để tạo doughnut tương tác

Power BI là công cụ BI mạnh mẽ cho phép tạo dashboard tương tác. Dưới đây là quy trình:

6.1. Nhập dữ liệu

• Mở Power BI Desktop → Get Data → chọn Excel, CSV, hoặc SQL Server.
• Chọn bảng dữ liệu chứa các cột Category và Value.

6.2. Tạo visual

• Trong Report view, kéo visual Donut chart (được gọi là Pie chart, sau đó bật Donut trong Format).
• Kéo Category vào Legend, Value vào Values.

6.3. Tùy chỉnh visual

Tùy chỉnh	Cách thực hiện
Đổi màu	Format → Data colors → chọn màu cho từng mục.
Thêm nhãn	Format → Detail labels → bật Category, Values, Percent of total.
Thêm tiêu đề trung tâm	Power BI không hỗ trợ trực tiếp, nhưng bạn có thể tạo Card visual hiển thị tổng và đặt lên trên doughnut, điều chỉnh Z‑index để đặt lên trên.
Tooltip	Khi di chuột, Power BI tự động hiển thị tooltip; bạn có thể tùy chỉnh trong Tooltip fields.
Responsive	Bật Responsive để biểu đồ tự động thay đổi kích thước khi thay đổi kích thước báo cáo.

6.4. Thêm drill‑through

• Để cho phép người dùng bấm vào một phần của doughnut và xem chi tiết, kéo Drillthrough page và thiết lập Category làm filter. Khi người dùng click vào phần, họ sẽ chuyển sang trang chi tiết.

7. Tạo doughnut trong Tableau

Tableau cung cấp khả năng thiết kế trực quan và tương tác.

7.1. Chuẩn bị dữ liệu

Có thể bạn quan tâm: Cách Vẽ Biểu Đồ Chart Chuẩn Và Hiệu Quả: Hướng Dẫn Từ Cơ Bản Đến Nâng Cao

• Import file CSV/Excel chứa Category và Value.

7.2. Tạo biểu đồ

1. Kéo Category vào Rows.
2. Kéo Value vào Angle (Marks → Pie).
3. Kéo Value vào Size để điều chỉnh độ dày vòng.
4. Trong Marks, chọn Pie → Add → Path → Category để tạo “slice”.
5. Để có dạng donut, kéo Value vào Detail, sau đó tạo Calculated field: 0.5 (độ dày). Sau khi tạo, kéo Calculated field vào Size và giảm kích thước để tạo lỗ giữa.

7.3. Tùy chỉnh

• Màu sắc: Kéo Category vào Color.
• Nhãn: Kéo Value vào Label → chọn Show mark labels → Percent of Total.
• Tooltip: Tùy chỉnh hiển thị thông tin chi tiết.
• Dashboard: Khi đưa vào Dashboard, bạn có thể chèn Text object ở trung tâm để hiển thị tổng.

8. Lập trình doughnut bằng JavaScript (Chart.js)

Đối với các nhà phát triển web, Chart.js là thư viện nhẹ, dễ sử dụng.

8.1. Cài đặt

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

8.2. HTML placeholder

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

8.3. JavaScript code

const ctx = document.getElementById('myDoughnut').getContext('2d');
const data = { labels: 'A', 'B', 'C', 'D', 'E', datasets: { data: 120, 80, 50, 30, 20, backgroundColor: '#4e79a7', '#f28e2b', '#e15759', '#76b7b2', '#59a14f' , hoverOffset: 10 }
}; const config = { type: 'doughnut', data: data, options: { responsive: true, plugins: { legend: { position: 'right', }, tooltip: { callbacks: { label: function(context) { const label = context.label || ''; const value = context.parsed; const total = context.dataset.data.reduce((a,b)=>a+b,0); const percent = ((value/total)100).toFixed(1); return `${label}: ${value} (${percent}%)`; } } }, title: { display: true, text: 'Biểu đồ Doughnut - Doanh thu' } }, cutout: '50%' // tạo lỗ ở giữa 50% kích thước vòng },
}; new Chart(ctx, config);

8.4. Thêm nội dung trung tâm

Chart.js không hỗ trợ trực tiếp, nhưng có thể dùng plugin:

Chart.register({ id: 'centerText', afterDraw: function(chart) { const {ctx, width, height} = chart; ctx.restore(); const fontSize = (height / 114).toFixed(2); ctx.font = `${fontSize}em sans-serif`; ctx.textBaseline = "middle"; const total = chart.config.data.datasets0.data.reduce((a,b)=>a+b,0); const text = `Tổng: ${total}`; const textX = Math.round((width - ctx.measureText(text).width) / 2); const textY = height / 2; ctx.fillText(text, textX, textY); ctx.save(); }
});

Thêm plugin vào plugins trong config.

8.5. Responsiveness & Animation

• Responsive: Đặt responsive: true trong options.
• Animation: animation: { animateScale: true, animateRotate: true }.

9. D3.js: Tạo doughnut tùy chỉnh cấp cao

Có thể bạn quan tâm: Cách Vẽ Biểu Đồ Bánh Chuẩn Xác Và Thu Hút Người Xem: Hướng Dẫn Từ Cơ Bản Đến Nâng Cao

D3.js cho phép tạo biểu đồ hoàn toàn tùy chỉnh, phù hợp với các dự án phức tạp.

9.1. Cài đặt

<script src="https://d3js.org/d3.v7.min.js"></script>

9.2. HTML container

<div id="doughnut"></div>

9.3. Mã D3

const data = {label: 'A', value: 120}, {label: 'B', value: 80}, {label: 'C', value: 50}, {label: 'D', value: 30}, {label: 'E', value: 20}
; const width = 400, height = 400, margin = 40;
const radius = Math.min(width, height) / 2 - margin; const svg = d3.select('#doughnut') .append('svg') .attr('width', width) .attr('height', height) .append('g') .attr('transform', `translate(${width/2},${height/2})`); const color = d3.scaleOrdinal() .domain(data.map(d=>d.label)) .range(d3.schemeCategory10); const pie = d3.pie() .sort(null) .value(d=>d.value); const arc = d3.arc() .innerRadius(radius 0.5) // tạo lỗ 50% .outerRadius(radius); svg.selectAll('path') .data(pie(data)) .enter() .append('path') .attr('d', arc) .attr('fill', d=>color(d.data.label)) .attr('stroke', 'white') .style('stroke-width', '2px') .on('mouseover', function(event, d){ d3.select(this).transition().duration(200).attr('transform', 'scale(1.05)'); }) .on('mouseout', function(event, d){ d3.select(this).transition().duration(200).attr('transform', 'scale(1)'); }); / Thêm label /
svg.selectAll('text') .data(pie(data)) .enter() .append('text') .text(d=> `${d.data.label}: ${((d.data.value/ d3.sum(data, d=>d.value))100).toFixed(1)}%`) .attr('transform', d=> `translate(${arc.centroid(d)})`) .style('text-anchor', 'middle') .style('font-size', '12px'); / Thêm tổng ở trung tâm /
const total = d3.sum(data, d=>d.value);
svg.append('text') .text(`Tổng: ${total}`) .attr('text-anchor', 'middle') .attr('dy', '0.3em') .style('font-size', '16px') .style('font-weight', 'bold');

9.4. Mở rộng

• Tooltip: Dùng d3-tip để hiển thị chi tiết khi hover.
• Animation: Thêm transition() cho attr('d', arc) để tạo hiệu ứng vẽ dần.
• Responsive: Khi thay đổi kích thước cửa sổ, tính lại radius và cập nhật arc.

10. Các lưu ý khi làm việc với dữ liệu thực tế

10.1. Kiểm tra dữ liệu ngoại lệ

• Giá trị âm: Doughnut không hỗ trợ giá trị âm; nếu có, cần chuyển đổi (ví dụ: lấy tuyệt đối hoặc loại bỏ).
• Null / Missing: Thay thế bằng 0 hoặc loại bỏ hàng đó.

10.2. Gộp nhóm “Khác”

Khi có nhiều mục có giá trị nhỏ (<5% tổng), gộp chúng lại:

=IF(B2<0.05$B$6, "Khác", A2)

Sau đó tính tổng cho “Khác”.

10.3. Định dạng số quốc tế

• Dấu phân cách: Dùng #,##0 cho ngôn ngữ Việt.
• Phần trăm: 0.0% hoặc 0% tùy mức độ chi tiết.

10.4. Kiểm tra tính nhất quán màu sắc

Nếu báo cáo có nhiều doughnut, hãy dùng cùng một bảng màu để người xem dễ so sánh.

11. Các ví dụ thực tiễn

11.1. Báo cáo doanh thu theo kênh

Kênh	Doanh thu (triệu)
Online	150
Cửa hàng	120
Đại lý	80
Khác	20

• Doughnut: Mỗi kênh một phần, lỗ trung tâm hiển thị “Tổng: 370”.
• Màu: Online – xanh dương, Cửa hàng – xanh lá, Đại lý – cam, Khác – xám.

11.2. Phân bố khách hàng theo độ tuổi

Độ tuổi	Số lượng
18‑24	200
25‑34	350
35‑44	150
45‑54	80
55+	20

• Doughnut đa lớp: Lớp trong là tổng số khách, lớp ngoài chia theo độ tuổi.
• Tooltip: Khi hover, hiển thị “35‑44: 150 (18.5%)”.

11.3. Dashboard KPI tài chính

• Biểu đồ doughnut: Tỷ lệ chi phí cố định vs biến đổi.
• Màu: Cố định – đỏ, Biến đổi – xanh.
• Giá trị trung tâm: “Tổng chi phí: 2.3 tỷ”.

12. Kiểm tra và đánh giá chất lượng biểu đồ

Sau khi hoàn thành, hãy tự hỏi:

1. Biểu đồ có truyền tải thông tin chính không?

2. Nếu người xem phải suy nghĩ lâu để hiểu tỷ lệ, có thể cần giảm số phần hoặc thay đổi loại biểu đồ.

3. Màu sắc có gây mệt mỏi mắt không?

4. Kiểm tra trên màn hình và bản in. Tránh màu quá sáng hoặc quá tối.

5. Nhãn có rõ ràng, không bị che lấp?

6. Kiểm tra ở kích thước thu nhỏ (dashboard) và phóng to.

7. Tooltip và legend có nhất quán?

8. Đảm bảo từ “%” đến “Giá trị” được hiển thị đồng nhất.

9. Biểu đồ đáp ứng đa thiết bị?

10. Trong môi trường web, kiểm tra responsive. Trong Power BI, kiểm tra trên mobile view.

13. Tổng kết

Biểu đồ doughnut là công cụ mạnh mẽ giúp bạn tóm tắt tỷ lệ, so sánh đa cấp và tạo điểm nhấn thẩm mỹ trong báo cáo. Để vẽ một doughnut chất lượng, bạn cần:

• Chuẩn bị dữ liệu sạch, gộp các mục nhỏ để tránh quá nhiều phần.
• Lựa chọn màu sắc và độ dày vòng phù hợp với mục tiêu và khán giả.
• Thêm nhãn, legend, và thông tin trung tâm một cách cân bằng.
• Sử dụng công cụ phù hợp: Excel/Google Sheets cho nhanh, Power BI/Tableau cho dashboard doanh nghiệp, hoặc JavaScript (Chart.js, D3.js) cho web tương tác.
• Kiểm tra tính chính xác và khả năng đọc trên mọi kích thước.

Hy vọng qua bài viết chi tiết này, bạn đã nắm vững quy trình từ khởi tạo dữ liệu, thiết kế, tùy chỉnh cho đến triển khai trên các nền tảng khác nhau. Hãy áp dụng những kiến thức này vào dự án thực tế của mình và tạo ra những biểu đồ doughnut vừa đẹp mắt, vừa truyền tải thông tin một cách hiệu quả. Chúc bạn thành công!