Trình tạo biểu đồ tròn
Nhập CSV hai cột, xuất ra biểu đồ tròn. Tự động tô màu từng lát, xuất PNG, xử lý hoàn toàn phía client.
Cách dùng
- 1 Dán dữ liệu gồm hai cột — nhãn và giá trị. Mỗi dòng sẽ trở thành một lát trong biểu đồ.
- 2 Bật/tắt chú thích (legend) nếu nhãn của bạn quá dài.
- 3 Tải biểu đồ về dưới dạng ảnh PNG.
Vì sao dùng công cụ này
- CSV hai cột — giữ dữ liệu đơn giản, dễ nhập.
- Tự động tô màu các lát từ bảng màu 10 màu được chọn lọc.
- Chart.js được tải lười (lazy load) — dung lượng tải ban đầu nhỏ gọn.
- Render hoàn toàn phía client — dữ liệu của bạn không bao giờ được tải lên.
Câu hỏi thường gặp
Các phần trăm có cần cộng lại bằng 100 không?
Không nhất thiết — Chart.js sẽ hiển thị các giá trị thô theo tỷ lệ so với tổng.
Muốn biểu đồ có phần tâm rỗng?
Hãy dùng <a class="underline" href="/doughnut-chart-maker">Doughnut Chart Maker</a> — cùng định dạng dữ liệu đầu vào, nhưng bố cục dạng vòng.
Cần vẽ đường xu hướng (trend line)?
Hãy thử <a class="underline" href="/line-chart-maker">Line Chart Maker</a>.
Trình tạo biểu đồ tròn là gì?
Trình tạo biểu đồ tròn (Pie Chart Maker) là công cụ chuyển đổi dữ liệu CSV hai cột thành biểu đồ tròn ngay trong trình duyệt. Công cụ chia một hình tròn thành các lát có tỷ lệ tương ứng, mỗi dòng dữ liệu là một lát, và tự động gán màu cho từng lát. Biểu đồ kết quả có thể được xuất ra dưới dạng ảnh PNG, toàn bộ quá trình render diễn ra phía client và không có dữ liệu nào được tải lên máy chủ.
Tính năng
Ánh xạ CSV thành lát cắt
Mỗi hàng dữ liệu trở thành một lát cắt của biểu đồ tròn: cột đầu tiên là nhãn, cột thứ hai là giá trị. Chart.js tự động chuẩn hóa các giá trị thành tỷ lệ so với tổng, nên các số của bạn không cần cộng lại bằng 100.
Tự động tô màu lát cắt
Các lát cắt được tô màu theo thứ tự từ bảng màu cố định gồm 10 màu; nếu CSV có hơn 10 hàng, màu sẽ lặp lại từ đầu bảng màu.
Phân tích CSV theo chuẩn RFC 4180
Bộ phân tích tích hợp sẵn xử lý các trường có dấu ngoặc kép, dấu phẩy nằm trong trường, và ký tự xuống dòng CRLF/LF theo chuẩn RFC 4180, kèm tự động phát hiện dấu phân cách (dấu phẩy, dấu chấm phẩy hoặc tab).
Chỉ xử lý phía trình duyệt, xuất PNG
Chart.js được tải chậm (lazy-load) và toàn bộ quá trình render diễn ra ngay trên tab trình duyệt; không có gì được gửi lên máy chủ. Dùng nút Download PNG để xuất canvas hiện tại thành ảnh PNG không mất dữ liệu.
Ví dụ
Input
Browser,Share
Chrome,63
Safari,19
Edge,5
Firefox,3
Other,10
Output
pie-chart-maker.png — 5 slices sized by value (63/19/5/3/10, not required to sum to 100), colored from the 10-color palette in row order, exported at the canvas's current rendered pixel size via toDataURL('image/png')
Trường hợp sử dụng
-
1
Phân tích thị phần
Dán dữ liệu thị phần trình duyệt hoặc nền tảng (ví dụ: Chrome, Safari, Edge) để trực quan hóa tức thì tỷ lệ tương đối cho báo cáo hoặc slide thuyết trình.
-
2
Phân bổ ngân sách và chi phí
Biến dữ liệu xuất từ bảng tính về danh mục chi phí và số tiền thành biểu đồ tròn để phục vụ buổi rà soát ngân sách hoặc cập nhật cho các bên liên quan.
-
3
Cơ cấu khảo sát và nguồn lưu lượng truy cập
Trực quan hóa cách người trả lời khảo sát hoặc khách truy cập phân bố theo danh mục (Organic, Direct, Referral, Social) mà không cần mở ứng dụng bảng tính.
Pie Chart Maker chuyển dữ liệu CSV hai cột (nhãn, giá trị) thành biểu đồ tròn bằng Chart.js 4, mỗi hàng CSV trở thành một lát cắt được tô màu từ bảng màu cố định gồm 10 màu. Biểu đồ hiển thị trực tiếp trên trình duyệt khi bạn gõ và có thể xuất ra PNG thông qua API toDataURL của canvas. Việc phân tích CSV và render đều diễn ra hoàn toàn phía trình duyệt của bạn — không có dữ liệu nào được tải lên máy chủ.
- Danh mục
- Sáng tạo
- Giá
- Miễn phí
- Quyền riêng tư
- Chạy trên trình duyệt
- Đăng ký
- Không cần
Tài liệu tham khảo
- Chart.js — Biểu đồ Doughnut và Pie — Chart.js
- Chart.js — Màu sắc — Chart.js
- Phương thức HTMLCanvasElement: toDataURL() — MDN Web Docs
- RFC 4180 — Định dạng chung và kiểu MIME cho tệp CSV (Comma-Separated Values) — IETF
Quyền riêng tư
Dữ liệu của bạn không bao giờ rời khỏi trình duyệt trừ khi được nêu rõ. Trình tạo biểu đồ tròn chạy hoàn toàn phía client — không tải lên máy chủ, không ghi log, không theo dõi dữ liệu bạn nhập.
Xây dựng, chia sẻ và phát triển trên Zerethon Social
Đăng ký miễn phí. Kiếm điểm, sưu tầm thành tựu và kết nối với nhà sáng tạo khắp thế giới.