Biểu đồ XY
Biểu đồ XY là một mô-đun biểu đồ tổng hợp, biểu diễn dữ liệu bằng trục x và trục y
Ví dụ
Sao chép
Nhúng
xychart-beta
title "Sales Revenue"
x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
y-axis "Revenue (in $)" 4000 --> 11000
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
Cú pháp
Tất cả giá trị văn bản chỉ chứa một từ đều có thể viết mà không cần dấu ngoặc kép. Nếu giá trị văn bản chứa nhiều từ, đặc biệt là chứa dấu cách, cần bao nó bằng dấu ngoặc kép.
Hướng
Biểu đồ có thể được vẽ theo chiều ngang hoặc dọc, mặc định là dọc.
Sao chép
Nhúng
xychart-beta horizontal
...
Tiêu đề
Tiêu đề là mô tả ngắn gọn về biểu đồ, nó luôn được kết xuất ở đầu biểu đồ.
Ví dụ
Sao chép
Nhúng
xychart-beta
title "This is a simple example"
...
Trục x
Trục x chủ yếu biểu diễn giá trị phân loại, mặc dù nó cũng có thể được dùng như một dải giá trị số.
Ví dụ
- mermaid.grammar_quadrant_example_x_axis_min_max_use
- mermaid.grammar_quadrant_example_x_axis_title_text
Trục y
Trục y dùng để biểu diễn dải giá trị số, nó không thể có giá trị phân loại.
Ví dụ
- y-axis title min --> max
- Nó chỉ thêm tiêu đề, dải giá trị sẽ được tạo tự động dựa trên dữ liệu
Biểu đồ đường
Biểu đồ đường cung cấp chức năng hiển thị đường một cách trực quan.
Ví dụ
- mermaid.grammar_quadrant_example_line_2_3_valide
- mermaid.grammar_quadrant_example_line_series_2_3_valide
Biểu đồ cột
Biểu đồ cột có thể hiển thị thanh một cách trực quan.
Ví dụ
- mermaid.grammar_quadrant_example_bar_2_3_valide
- mermaid.grammar_quadrant_example_bar_series_2_3_valide
Ví dụ đơn giản
Hai phần tử duy nhất cần thiết là tên biểu đồ xychart và một tập dữ liệu. Do đó, bạn sẽ có thể dùng cấu hình đơn giản để vẽ biểu đồ.
Sao chép
Nhúng
xychart-beta
line [+1.3, .6, 2.4, -.34]
Cấu hình biểu đồ
| Tham số | Mô tả | Giá trị mặc định |
|---|---|---|
| width | Chiều rộng biểu đồ | 700 |
| height | Chiều cao biểu đồ | 500 |
| titlePadding | Khoảng đệm trên dưới của tiêu đề | 10 |
| titleFontSize | Cỡ chữ tiêu đề | 20 |
| showTitle | Tiêu đề có hiển thị hay không | true |
| xAxis | Cấu hình trục x | AxisConfig |
| yAxis | Cấu hình trục y | AxisConfig |
| plotReservedSpacePercent | Phần trăm không gian tối thiểu mà mỗi đồ thị chiếm trong biểu đồ | 50 |
| showDataLabel | Có hiển thị giá trị tương ứng bên trong biểu đồ cột hay không | false |
AxisConfig
| Tham số | Mô tả | Giá trị mặc định |
|---|---|---|
| showLabel | Có hiển thị nhãn trục hay giá trị vạch chia hay không | true |
| labelFontSize | Cỡ chữ của nhãn cần vẽ | 14 |
| labelPadding | Khoảng cách trên dưới của nhãn | 5 |
| showTitle | Có hiển thị tiêu đề trục hay không | true |
| titleFontSize | Cỡ chữ tiêu đề trục | 16 |
| titlePadding | Khoảng cách trên dưới của tiêu đề trục | 5 |
| showTick | Có hiển thị vạch chia hay không | true |
| tickLength | Độ dài vạch chia | 5 |
| tickWidth | Chiều rộng vạch chia | 2 |
| showAxisLine | Đường trục có hiển thị hay không | true |
| axisLineWidth | Độ dày đường trục | 2 |
Biến chủ đề của biểu đồ
Chủ đề của xychart nằm trong thuộc tính xychart, có thể tùy chỉnh bằng cú pháp sau:
Sao chép
Nhúng
---
config:
themeVariables:
xyChart:
titleColor: '#ff0000'
---
| Tham số | Mô tả |
|---|---|
| backgroundColor | Màu nền của toàn bộ biểu đồ |
| titleColor | Màu văn bản tiêu đề |
| xAxisLabelColor | Màu nhãn trục x |
| xAxisTitleColor | Màu tiêu đề trục x |
| xAxisTickColor | Màu vạch chia trục x |
| xAxisLineColor | Màu đường trục x |
| yAxisLabelColor | Màu nhãn trục y |
| yAxisTitleColor | Màu tiêu đề trục y |
| yAxisTickColor | Màu vạch chia trục y |
| yAxisLineColor | Màu đường trục y |
| plotColorPalette | Có thể tùy chỉnh bằng cú pháp sau, ví dụ "#f3456, #43445" |
Ví dụ cấu hình và chủ đề
Sao chép
Nhúng
---
config:
xyChart:
width: 900
height: 600
showDataLabel: true
themeVariables:
xyChart:
titleColor: "#f96"
---
xychart-beta
title "Sales Revenue"
x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
y-axis "Revenue (in $)" 4000 --> 11000
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
