Sơ đồ Treemap hiển thị dữ liệu phân cấp dưới dạng một tập hợp các hình chữ nhật lồng ghép. Mỗi nhánh của cây được biểu diễn bằng một hình chữ nhật, sau đó được lát bằng các hình chữ nhật nhỏ hơn đại diện cho các nhánh con. Kích thước của mỗi hình chữ nhật tỷ lệ thuận hoàn toàn với giá trị số học của nó, làm cho nó trở thành lựa chọn lý tưởng để chuyển đổi văn bản thành sơ đồ nhằm so sánh các phần của toàn bộ trong các cấp độ danh mục phức tạp.
Cấu trúc cú pháp cơ bản
Mỗi sơ đồ Treemap bắt đầu bằng treemap-beta khai báo. Sau đó, bạn khai báo các nút cha cấu trúc bằng tên được đặt trong dấu ngoặc kép, và ánh xạ các nút lá con riêng lẻ bằng cách nhóm chúng dưới đây với khoảng trắng thụt lề tiêu chuẩn và thêm dấu hai chấm theo sau là trọng số số học của chúng.
treemap-beta
"Tên danh mục chính"
"Danh mục con A": 45
"Danh mục con B": 30
"Danh mục con C": 25
Tham chiếu cú pháp
Bảng dưới đây phân tích các yêu cầu định dạng chính được sử dụng để xây dựng bố cục sơ đồ Treemap trong Mermaid.js.
| Thành phần | Mô tả | Quy tắc cú pháp |
|---|---|---|
| Khai báo | Khởi tạo động cơ cấu trúc bố cục cho các tập dữ liệu hình chữ nhật lồng ghép. | treemap-beta |
| Nút cha | Xác định ranh giới nhóm hoặc danh mục cha. Văn bản luôn phải được đặt trong dấu ngoặc kép. | "Cơ sở hạ tầng đám mây" |
| Nút lá | Một phần tử dữ liệu lồng ghép mang theo trọng số giá trị cụ thể. | Thụt lề dưới một nút cha bằng dấu hai chấm kết thúc và một số dương. |
| Dữ liệu phân cấp | Xác định các phần tử nào thuộc về các nhóm cụ thể bằng cách sử dụng độ sâu văn bản. | Được kiểm soát hoàn toàn thông qua các mức thụt lề tiêu chuẩn (khoảng trắng hoặc tab). |
Định dạng dữ liệu nâng cao (Chỉ thị)
Mặc định, Mermaid hiển thị các số đếm thô. Tuy nhiên, bạn có thể truyền một khối cấu hình frontmatter bằng cách sử dụng valueFormat thuộc tính để định dạng số thành tiền tệ, thập phân hoặc phần trăm.
Các mẫu định dạng phổ biến
| Chuỗi định dạng | Loại kết quả | Kết quả ví dụ |
|---|---|---|
'$0,0' |
Dấu đô la với dấu phân cách hàng nghìn tiêu chuẩn. | $400,000 |
'.1f' |
Hiển thị số với đúng một chữ số thập phân. | 45.2 |
'.1%' |
Chuyển đổi giá trị trọng lượng thô thành định dạng phần trăm. | 35.4% |
Bản mẫu Dữ liệu Tài chính
Bản mẫu này minh họa cách định dạng ngân sách doanh nghiệp vận hành bằng cách sử dụng các tham số chuỗi tài chính tùy chỉnh:
---
config:
treemap:
valueFormat: '$0,0'
---
treemap-beta
"Ngân sách Công ty"
"Hoạt động Kỹ thuật"
"Cơ sở hạ tầng Chính": 500000
"Công cụ Phát triển": 150000
"Tiếp thị Tăng trưởng"
"Chiến dịch Quảng cáo Trả phí": 350000
"Tài trợ Sự kiện": 80000
Định dạng Nút tùy chỉnh (Lớp)
Để nhấn mạnh các nút quan trọng, các điểm ngoại lệ hoặc các khu vực rủi ro cao trong tài liệu của bạn, bạn có thể định nghĩa và áp dụng các kiểu CSS tùy chỉnh một cách tự nhiên trong khối mã sử dụngclassDef quy tắc.
treemap-beta
"Sử dụng Tài nguyên Hệ thống"
"Dịch vụ Web"
"Cổng API": 45
"Dịch vụ Xác thực": 95:::critical
"Lưu trữ Cơ sở dữ liệu"
"Bộ nhớ đệm DB Chính": 60
"Nút Đồng bộ Bản sao": 25
classDef critical fill:#ffcccc,stroke:#ff0000,stroke-width:2px;
Lưu ý Ngữ pháp: Để áp dụng định nghĩa lớp cho một nút lá chứa giá trị số, hãy thêm tên lớp bằng ba dấu hai chấm (:::className) ngay lập tức sau tên nhãn nhưng *trước* dấu phân cách giá trị dấu hai chấm.
Những sai lầm phổ biến về cú pháp & giới hạn
Vì sơ đồ treemap sử dụng thụt lề văn bản cấu trúc, những lỗi định dạng nhỏ có thể gây ra vấn đề hiển thị bố cục. Hãy lưu ý những tham số sau:
- Cấm giá trị âm:Các bản đồ cây dựa vào việc điền đầy không gian theo tỷ lệ và về mặt toán học không thể hiển thị các số âm hoặc trọng số bằng không. Đảm bảo tất cả các giá trị dữ liệu là số nguyên dương hoặc số thập phân.
- Bao bọc bằng dấu ngoặc kép:Mọi mô tả nút—dù là nhánh cha hay một phần tử lá nhỏ—phải được bao bọc gọn gàng bằng dấu ngoặc kép. Bỏ qua dấu ngoặc kép sẽ gây lỗi cú pháp ngay lập tức.
- Độ đều của khoảng trắng:Mối quan hệ cha-con lồng ghép được xác định hoàn toàn bởi số lượng khoảng trắng nằm ở đầu dòng. Duy trì quy tắc độ dài tab hoặc khoảng trắng nhất quán (ví dụ như hai khoảng trắng mỗi cấp) để tránh các nút rơi vào nhóm sai.
- Khả năng hiển thị nhãn:Những giá trị rất nhỏ trong các cấu trúc phân cấp sâu có thể dẫn đến các ô hình chữ nhật nhỏ, nơi văn bản bị tràn ra hoặc hoàn toàn không thể đọc được. Hãy cân nhắc nhóm các mục nhỏ lại với nhau dưới danh mục “Khác”.