Tạo biểu đồ tròn

Biểu đồ tròn thể hiện điều gì?

Biểu đồ tròn chuyển mỗi giá trị dương thành một góc trên đường tròn 360°. Nếu một danh mục có giá trị v và tổng mọi giá trị đang hiển thị là T, góc ở tâm của danh mục đó bằng 360 × v / T, còn tỷ lệ phần trăm hiển thị bằng 100 × v / T. Biểu đồ vành khuyên dùng cùng tỷ lệ nhưng khoét phần giữa; cách so sánh dữ liệu không thay đổi.

Trong ví dụ này, tổng bằng 100. Vì vậy, Sản phẩm chiếm 45 / 100 × 360 = 162°. Công cụ chấp nhận giá trị 0 nhưng không vẽ chúng trên vòng tròn. Giá trị âm, bị thiếu hoặc không hữu hạn sẽ bị từ chối vì không thể biểu diễn một phần thông thường của tổng thể. Phải có ít nhất một giá trị dương.

Khi nào nên dùng loại biểu đồ khác?

Biểu đồ tròn dễ đọc nhất khi chỉ có vài lát cắt với kích thước khác biệt rõ ràng. Biểu đồ cột thường phù hợp hơn khi các giá trị gần nhau, có nhiều danh mục, cần so sánh chính xác hoặc các danh mục không phải là thành phần của cùng một tổng. Biểu đồ đường phù hợp hơn để thể hiện thay đổi theo thời gian. Tránh dùng các tỷ lệ phần trăm chồng lấn hoặc bị tính hai lần, vì một vòng tròn đẹp mắt không thể sửa một tổng số sai.

Màu sắc, nhãn và khả năng tiếp cận

Không nên chỉ dùng màu sắc để truyền tải ý nghĩa. Hãy giữ chú giải hoặc nhãn lát cắt hiển thị, kiểm tra bảng đi kèm và dùng bảng màu thân thiện với người mù màu nếu biểu đồ được chia sẻ rộng rãi. Các lát quá nhỏ có thể không đủ chỗ chứa chữ; nhãn, giá trị và tỷ lệ chính xác vẫn có trong chú giải và bảng dữ liệu. SVG phù hợp để chỉnh sửa và in sắc nét. PNG là ảnh cố định 1200 × 800, thích hợp cho trang trình chiếu, tài liệu và bài đăng mạng xã hội.

Biểu đồ được tạo bằng API SVG và Canvas của trình duyệt. Dữ liệu biểu đồ không được gửi đến dịch vụ biểu đồ bên ngoài. Tiến trình qua các bước được giữ tạm thời trong bộ nhớ phiên của riêng thẻ này và có thể xóa bằng cách bắt đầu lại hoặc đóng thẻ.

Để tìm hiểu thêm, hãy đọc hướng dẫn của Datawrapper về cách tạo biểu đồ tròn chỉ với một số ít thành phần, bài hướng dẫn của W3C về bảng dữ liệu dễ tiếp cận và tài liệu MDN về mô tả đồ họa SVG bằng <desc>.