Biểu đồ tròn là các đồ họa thống kê hình tròn được sử dụng để hiển thị các tỷ lệ số học bằng cách chia dữ liệu thành các phần. Trong Mermaid.js, bạn có thể tạo các phân tích dữ liệu sạch, phản ứng nhanh tự động mà không cần phải thao tác với các thư viện biểu đồ phức tạp hay các công cụ thiết kế vector. Động cơ hiển thị sẽ xử lý tất cả việc gán màu sắc và tính toán phần trăm một cách động.
Cấu trúc cú pháp cơ bản
Mỗi biểu đồ tròn bắt đầu bằng piekhai báo. Bạn có thể tùy chọn thêm tiêu đề, theo sau là các mục dữ liệu nơi nhãn danh mục được bao quanh bằng dấu ngoặc kép và ghép cặp với các giá trị số dương.
pie
title Biểu đồ tròn mẫu
"Danh mục A" : 45
"Danh mục B" : 30
"Danh mục C" : 25
Tham chiếu cú pháp
Bảng dưới đây phân tích các tùy chọn cấu trúc cốt lõi được sử dụng để xây dựng bản đồ biểu đồ tròn trong Mermaid.js.
| Thành phần | Mô tả | Ví dụ cú pháp |
|---|---|---|
| Khai báo | Khởi tạo động cơ hiển thị biểu đồ tròn. | pie |
| Cờ hiển thị dữ liệu | Một tùy chọn sửa đổi được thêm ngay sau pieđể hiển thị các con số thực tế cùng với các phần trăm đã tính toán. |
pie showData |
| Tiêu đề | Một tiêu đề tùy chọn được in rõ ràng phía trên tâm bố cục biểu đồ. | title Nguồn doanh thu Q3 |
| Nhãn mục nhập dữ liệu | Tên danh mục, luôn phải được đóng trong dấu ngoặc kép. | "Tìm kiếm tự nhiên" |
| Dấu phân cách dữ liệu | Một ký tự hai chấm tách chuỗi nhãn của bạn khỏi giá trị toán học của nó. | : |
| Giá trị dữ liệu | Một số dương. Hỗ trợ các con số tuyệt đối hoặc trọng số thập phân trực tiếp lên đến hai chữ số thập phân. | 54.25 |
Bản thiết kế thực tế: Nguồn truy cập trang web
Bản thiết kế này thể hiện sự phân tích bảng điều khiển tiếp thị và phân tích truyền thống. Nó sử dụng tham số showData để hiển thị rõ ràng các chỉ số lưu lượng truy cập thô ngay trong chú thích, trong khi biểu đồ thể hiện tỷ lệ bố cục.
pie showData title Các kênh lưu lượng chính
"Tìm kiếm tự nhiên" : 3540
"Lưu lượng trực tiếp" : 2410
"Mạng xã hội" : 1850
"Trang giới thiệu" : 920
"Chiến dịch email" : 680
Lưu ý cú pháp: Mặc định, Mermaid chỉ hiển thị các phần trăm đã tính toán tương đối (ví dụ: 35%) trên từng phần biểu đồ. Thêm từ khóa showData ngay sau pie sẽ thay đổi nhãn để hiển thị cả phần trăm trên biểu đồ và các giá trị thô chính xác bên trong danh sách chú thích đi kèm.
Khái niệm nâng cao: Chỉ thị và định dạng
Đối với các trang tài liệu mật độ cao, bạn có thể áp dụng một chỉ thị cấu hình nhúng ở đầu đoạn mã của mình để tùy chỉnh hành vi định dạng, thay đổi độ lệch vị trí văn bản hoặc thay đổi kiểu dáng đường cấu trúc.
---
config:
pie:
textPosition: 0.6
themeVariables:
pieOuterStrokeWidth: "3px"
---
pie title Phân bổ ngân sách hoạt động
"Phát triển sản phẩm" : 40.5
"Tiếp thị & tăng trưởng" : 25.25
"Vận hành khách hàng" : 20.0
"Chi phí hành chính" : 14.25
Những lỗi cú pháp phổ biến
Mặc dù biểu đồ tròn có một trong những cú pháp đơn giản nhất trong Mermaid, nhưng một vài lỗi định dạng sẽ gây lỗi phân tích bố cục. Hãy tránh những lỗi phổ biến này:
- Số âm: Bộ xử lý hiển thị chỉ chấp nhận các giá trị số dương. Truyền một giá trị âm hoặc bằng không sẽ làm vỡ giới hạn xử lý toán học.
- Yêu cầu dấu ngoặc kép: Các nhãn danh mục dữ liệu luôn phải sử dụng dấu ngoặc kép. Dấu ngoặc đơn hoặc thiếu dấu ngoặc sẽ khiến việc xây dựng không thành công.
- Giới hạn độ chính xác thập phân: Mặc dù Mermaid xử lý các số thập phân dấu phẩy động chính xác một cách trơn tru, nhưng nó mặc định theo dõi các tham số lên đến hai chữ số thập phân. Làm tròn các giá trị trước sẽ đảm bảo tính nhất quán nghiêm ngặt.
- Mật độ miếng cắt: Để truyền đạt hình ảnh một cách rõ ràng, tốt nhất là giới hạn biểu đồ của bạn trong khoảng 6–8 miếng cắt. Nếu tập dữ liệu của bạn có nhiều phần tử hơn, hãy nhóm các nút nhỏ lại với nhau dưới danh mục “Khác” để thiết kế của bạn vẫn dễ quan sát.