Biểu đồ XY là một thành phần trực quan hóa dữ liệu toàn diện được sử dụng để hiển thị cả biểu đồ đường và biểu đồ cột trên bố cục lưới tọa độ hai chiều tiêu chuẩn. Được giới thiệu để thay thế và tích hợp các sơ đồ biểu đồ độc lập cũ hơn, thìxychart-betađộng cơ hiển thị xử lý động các bộ dữ liệu số tùy chỉnh, tự động điều chỉnh độ lớn lưới cấu trúc phản hồi, và hỗ trợ hiển thị nhiều chuỗi dữ liệu độc lập chồng chéo nhau cùng lúc.
Cấu trúc cú pháp cơ bản
Mỗi biểu đồ XY bắt đầu bằngxychart-betatiêu đề khai báo. Tiếp theo là cấu hình mảng danh mục trục X ngang, tiêu đề trục Y dọc hoặc giới hạn phạm vi dữ liệu, và ít nhất một chuỗi hiển thị dữ liệu rõ ràng (ví dụ như một khốilinehoặcbarkhối).
xychart-beta
title "Biểu đồ Hiệu suất Mẫu"
x-axis [Thg1, Thg2, Thg3, Thg4]
y-axis "Doanh thu (USD)"
bar [4500, 5200, 6100, 5800]
Tham chiếu cú pháp
Bảng dưới đây phân tích các định nghĩa dữ liệu chính và các khóa cấu hình cần thiết để xây dựng biểu đồ XY đúng cách trong Mermaid.js.
| Thành phần cú pháp | Định dạng được chấp nhận | Mô tả và quy tắc sử dụng |
|---|---|---|
| Khai báo | Từ khóa | Khởi tạo không gian làm việc biểu đồ bố cục 2D. Phải sử dụng chính xác chuỗixychart-betakhối chuỗi. |
| Tiêu đề | Chuỗi được đóng dấu ngoặc kép | Tiêu đề tùy chọn được hiển thị ở giữa ngay phía trên lưới khung biểu đồ. |
| Cấu hình trục X | Danh sách trong dấu ngoặc / Khoảng | Xác định nhãn thang đo ngang. Chấp nhận các chuỗi văn bản phân loại bên trong dấu ngoặc[A, B, C] hoặc các khoảng điểm số học [100 --> 500]. |
| Cấu hình trục Y | Chuỗi tiêu đề / Giới hạn thang đo | Thiết lập các tham số thang đo dọc. Có thể chỉ là chuỗi tiêu đề trục, hoặc được tùy chỉnh để giới hạn phạm vi giá trị dưới/trên bằng cách sử dụng"Tiêu đề" 0 --> 100. |
| Dãy vẽ biểu đồ cột | Mảng số học | Hiển thị dữ liệu dưới dạng các cột thẳng đứng. Số lượng phần tử trong mảng dữ liệu phải khớp hoàn toàn với độ dài danh mục trục X của bạn. |
| Dãy vẽ biểu đồ đường | Mảng số học | Hiển thị dữ liệu dưới dạng các đường liên tục nối các điểm dữ liệu qua không gian làm việc lưới. |
Tùy chỉnh dữ liệu nâng cao (Chỉ thị)
Bạn có thể tinh chỉnh ngoại hình trực quan của không gian làm việc biểu đồ bằng cách nhúng một khối cấu hình frontmatter ở đầu tuyệt đối của đoạn mã tài liệu của bạn. Điều này giúp bạn kiểm soát hoàn toàn bố cục về màu sắc hex tùy chỉnh, độ dày đường của các dãy vẽ, và các trường hiển thị lưới.
Ma trận thuộc tính cấu hình biểu đồ XY
| Khóa cấu hình thuộc tính | Lựa chọn giá trị | Kết quả trực quan |
|---|---|---|
showLine |
đúng | sai |
Bật/tắt việc hiển thị các đường lưới trục cấu trúc nền trên các tọa độ. |
chartWidth |
Số nguyên (Pixel) | Thiết lập chiều rộng bố cục khung hình cố định của hệ thống lưới. |
chartHeight |
Số nguyên (Pixel) | Thiết lập chiều cao bố cục khung hình cố định của hệ thống lưới. |
themeVariables.xyChart |
Mảng ánh xạ màu sắc | Chèn các khối màu định dạng hex rõ ràng (ví dụ như backgroundColor, titleColor, hoặc các vị trí danh sách màu tùy chỉnh plotColorPalette) vào biểu đồ của bạn. |
Bản thiết kế thực tế: So sánh kỹ thuật đa chuỗi
Bản thiết kế toàn diện này theo dõi đánh giá hiệu suất cơ sở hạ tầng. Nó sử dụng một chỉ thị cấu hình tùy chỉnh để cố định kích thước khung hình, hiển thị các đường dẫn lưới nền và chèn một bảng màu hex rõ ràng. Nó ánh xạ bốn giai đoạn quý khác nhau, hiển thị chúng dưới dạng biểu đồ kết hợp trực quan (kết hợp biểu đồ cột chồng lên nhau và biểu đồ đường cùng một lúc).
---
config:
xychart:
chartWidth: 700
chartHeight: 400
showLine: true
themeVariables:
xychart:
titleColor: "#0072B1"
plotColorPalette: "#0072B1, #E06000"
---
xychart-beta
title "Chỉ số Tài nguyên so với Thực thi Q1-Q4"
x-axis ["Quý 1", "Quý 2", "Quý 3", "Quý 4"]
y-axis "Đơn vị Chỉ số Hiệu suất" 0 --> 100
bar [45, 65, 80, 95]
line [55, 60, 72, 88]
Lưu ý cú pháp: Khi chồng nhiều biểu đồ dữ liệu lên nhau (ví dụ như chạy một dữ liệu bar tập dữ liệu và một line tập dữ liệu bên trong cùng một khung bố cục), bộ xử lý hiển thị sẽ xếp chồng hoặc vẽ chúng theo thứ tự xuất hiện trong đoạn mã văn bản. Sắp xếp các khối dữ liệu một cách có chủ ý để tránh hiện tượng bị cắt hình ảnh trên các đường khung hình.
Những lỗi cú pháp phổ biến và giới hạn hệ thống
Khi biên dịch các đường đi ma trận chiều, một vài lỗi cấu hình tinh tế sẽ làm gián đoạn tính toán tọa độ. Hãy ghi nhớ các tham số khắc phục sự cố sau:
- Không khớp độ dài dữ liệu: Mỗi khối dữ liệu
barhoặcđườngmảng chuỗi dữ liệu *phải* chứa đúng số lượng mục như được xác định trongtrục xtham số danh sách. Việc có 4 danh mục trên trục X nhưng cung cấp danh sách dữ liệu gồm 5 số sẽ làm hỏng hoàn toàn quá trình biên dịch biểu đồ. - Biên giới dấu ngoặc kép: Khi xác định các danh mục bên trong dấu ngoặc móc của danh sách trục, các khối văn bản chứa khoảng trắng hoặc ký tự dấu câu đặc biệt phải được bao bọc gọn gàng bằng dấu ngoặc kép (ví dụ như
["Giai đoạn 1", "Giai đoạn 2"]). - Giới hạn tọa độ số học: Khi thiết lập phạm vi thủ công trên thang đo trục (ví dụ như
0 --> 500), bạn phải sử dụng rõ ràng hai gạch ngang theo sau là ký hiệu lớn hơn (-->). Bỏ quên một gạch ngang hoặc tách biệt các ký hiệu toán tử bằng khoảng trắng sẽ gây ra lỗi bố cục xử lý. - Trọng số số nguyên dương: Các giá trị thang đo ánh xạ vào các khối không gian tuyến tính. Đảm bảo các giá trị được truyền vào chuỗi của bạn không chứa các phần tử ký tự chưa được thoát hoặc các tham số rỗng null bên trong mảng.