Trình tạo biểu đồ vành khuyên

Cách dùng

1. 1 Dán CSV hai cột — nhãn và giá trị.
2. 2 Bật/tắt chú giải cho phù hợp với thiết kế của bạn.
3. 3 Tải biểu đồ vành khuyên xuống dưới dạng PNG.

Vì sao dùng công cụ này

• Bố cục vành khuyên — cùng dữ liệu như biểu đồ tròn nhưng có phần tâm rõ ràng hơn để chèn KPI trong slide.
• Chart.js chỉ được tải khi cần.
• Hỗ trợ các ô CSV có dấu ngoặc kép.
• Hoàn toàn xử lý phía trình duyệt (client-side) — dữ liệu của bạn luôn ở trên thiết bị.

Câu hỏi thường gặp

Trình tạo biểu đồ vành khuyên là gì?

Trình tạo biểu đồ vành khuyên (Doughnut Chart Maker) là công cụ tạo biểu đồ vành khuyên từ dữ liệu CSV ngay trong trình duyệt. Công cụ hiển thị các phần theo tỷ lệ trên một vòng tròn có phần tâm rỗng, bố cục phù hợp cho các màn hình KPI. Biểu đồ có thể được xuất ra dưới dạng ảnh PNG, và toàn bộ quá trình xử lý diễn ra phía trình duyệt (client-side), không cần tải file lên.

Tính năng

Ví dụ

Source,Users
Organic,420
Direct,310
Referral,180
Social,140
Email,90

doughnut-chart-maker.png — canvas-resolution PNG (matches the on-screen preview element size), 5 colored ring segments sized proportionally to 420/310/180/140/90, white 1px segment borders, legend shown above the chart if the 'Show legend' toggle is on

Trường hợp sử dụng

1. 1

   Slide KPI với vòng biểu đồ để chèn nhãn ở giữa

   Xuất file PNG biểu đồ vành khuyên thể hiện tỷ trọng một chỉ số (ví dụ: tỷ lệ nguồn traffic) rồi chèn con số nổi bật vào phần trống ở giữa trong trình chỉnh sửa slide, vì bản thân công cụ không hỗ trợ vẽ chữ ở tâm biểu đồ.

2. 2

   Trực quan hóa nhanh tỷ lệ theo danh mục

   Dán một file CSV hai cột gồm danh mục và giá trị (ví dụ: số lượng câu trả lời khảo sát, các khoản mục ngân sách) để lập tức xem tỷ lệ dưới dạng các phần của vòng tròn mà không cần mở ứng dụng bảng tính.

3. 3

   Tái sử dụng dữ liệu xuất từ bảng tính mà không cần định dạng lại

   Dán trực tiếp các dòng CSV sao chép từ Excel hoặc Google Sheets, kể cả các trường có ngoặc kép chứa dấu phẩy bên trong, vì trình phân tích RFC 4180 tích hợp sẵn tự động xử lý việc trích dẫn và nhận diện dấu phân cách.

Tài liệu tham khảo

• Doughnut and Pie Chart — Tài liệu Chart.js — Chart.js
• HTMLCanvasElement: phương thức toDataURL() — MDN Web Docs
• RFC 4180: Common Format and MIME Type for Comma-Separated Values (CSV) Files — IETF
• Colors — Tài liệu Chart.js — Chart.js

Công cụ liên quan