Giới thiệu biểu đồ radar
Biểu đồ radar là một cách đơn giản để vẽ dữ liệu đa chiều thấp ở định dạng hình tròn.
Biểu đồ radar còn được gọi là biểu đồ nhện, biểu đồ hình sao, biểu đồ mạng lưới, biểu đồ tọa độ cực.
Ứng dụng
Biểu đồ radar đặc biệt hữu ích cho nhà phát triển, nhà khoa học dữ liệu và kỹ sư cần biểu diễn dữ liệu một cách rõ ràng và súc tích ở định dạng hình tròn.
Nó thường được dùng để tóm tắt và so sánh trực quan hiệu suất của nhiều thực thể trên nhiều chiều.
Cú pháp
Sao chép
Nhúng
radar-beta
axis A, B, C, D, E
curve c1{1,2,3,4,5}
curve c2{5,4,3,2,1}
... More Fields ...
Ví dụ
Sao chép
Nhúng
---
title: "Grades"
---
radar-beta
axis m["Math"], s["Chinese"], e["English"]
axis h["History"], g["Geography"], a["Art"]
curve a["Alice"]{85, 90, 80, 70, 75, 90}
curve b["Bob"]{70, 75, 85, 80, 90, 85}
max 100
min 0
Chi tiết cú pháp
Tiêu đề
title: kết xuất ở đầu biểu đồ radar.
Sao chép
Nhúng
radar-beta
title Title of the Radar Diagram
...
Trục
axis: cú pháp axis dùng để định nghĩa các trục của biểu đồ radar.
Mỗi trục được biểu diễn bởi một ID và một nhãn tùy chọn.
Có thể định nghĩa nhiều trục trên một dòng.
Sao chép
Nhúng
radar-beta
axis id1["Label1"]
axis id2["Label2"], id3["Label3"]
...
Đường cong
curve: cú pháp curve dùng để định nghĩa các điểm dữ liệu của đường cong trong biểu đồ radar.
Mỗi đường cong được biểu diễn bởi một ID, một nhãn tùy chọn và một danh sách giá trị.
Giá trị có thể được định nghĩa bằng danh sách số hoặc danh sách cặp khóa-giá trị. Nếu dùng cặp khóa-giá trị, thì khóa biểu thị ID trục, giá trị biểu thị điểm dữ liệu.
Có thể định nghĩa nhiều đường cong trên một dòng.
Sao chép
Nhúng
radar-beta
axis axis1, axis2, axis3
curve id1["Label1"]{1, 2, 3}
curve id2["Label2"]{4, 5, 6}, id3{7, 8, 9}
curve id4{ axis3: 30, axis1: 20, axis2: 10 }
...
Tùy chọn
- showLegend: cú pháp showLegend dùng để hiển thị hoặc ẩn chú giải trong biểu đồ radar, mặc định là hiển thị.
- max: giá trị lớn nhất của biểu đồ radar, dùng để chia tỷ lệ biểu đồ radar. Nếu không cung cấp, giá trị lớn nhất sẽ được tính từ các điểm dữ liệu.
- min: giá trị nhỏ nhất của biểu đồ radar, dùng để chia tỷ lệ biểu đồ radar. Nếu không cung cấp, giá trị nhỏ nhất là 0.
- graticule: cú pháp graticule dùng để định nghĩa loại đường kinh tuyến và vĩ tuyến cần kết xuất trong biểu đồ radar. Đường kinh tuyến và vĩ tuyến có thể là circle hoặc polygon. Nếu không cung cấp, mặc định là circle.
- ticks: cú pháp ticks dùng để định nghĩa số vạch chia trên đường kinh tuyến và vĩ tuyến. Đó là số lượng hình tròn đồng tâm hoặc đa giác được vẽ, dùng để chỉ tỷ lệ của biểu đồ radar. Nếu không cung cấp, số vạch chia mặc định là 5.
Sao chép
Nhúng
radar-beta
...
showLegend true
max 100
min 0
graticule circle
ticks 5
...
Cấu hình
| Tham số | Mô tả | Giá trị mặc định |
|---|---|---|
| width | Chiều rộng của biểu đồ radar | 600 |
| height | Chiều cao của biểu đồ radar | 600 |
| marginTop | Lề trên của biểu đồ radar | 50 |
| marginBottom | Lề dưới của biểu đồ radar | 50 |
| marginLeft | Lề trái của biểu đồ radar | 50 |
| marginRight | Lề phải của biểu đồ radar | 50 |
| axisScaleFactor | Hệ số chia tỷ lệ của trục tọa độ | 1 |
| axisLabelFactor | Hệ số điều chỉnh vị trí nhãn trục tọa độ | 1.05 |
| curveTension | Độ căng của đường cong bo góc | 0.17 |
Biến chủ đề
Biến chủ đề toàn cục
Giá trị mặc định của các biến này phụ thuộc vào chủ đề được sử dụng. Để ghi đè giá trị mặc định, hãy đặt giá trị mong muốn trong phần themeVariables của cấu hình: config: themeVariables: cScale0: "#FF0000" cScale1: "#00FF00"
Biểu đồ radar hỗ trợ thang màu cScale${i}, trong đó i là một số từ 0 đến số màu lớn nhất của thang màu chủ đề. Thông thường, số màu lớn nhất là 12.
| Thuộc tính | Mô tả |
|---|---|
| fontSize | Cỡ chữ của tiêu đề |
| titleColor | Màu tiêu đề |
| cScale$ | Thang màu của đường cong thứ i |
Tùy chọn kiểu radar
Các biến riêng của radar nằm trong khóa radar. Để đặt tùy chọn kiểu radar, hãy dùng cú pháp sau. config: themeVariables: radar: axisColor: "#FF0000"
| Thuộc tính | Mô tả | Giá trị mặc định |
|---|---|---|
| axisColor | Màu của đường trục tọa độ | black |
| axisStrokeWidth | Chiều rộng của đường trục tọa độ | 1 |
| axisLabelFontSize | Cỡ chữ của nhãn trục tọa độ | 12px |
| curveOpacity | Độ trong suốt của đường cong | 0.7 |
| curveStrokeWidth | Chiều rộng của đường cong | 2 |
| graticuleColor | Màu đường kinh tuyến và vĩ tuyến | black |
| graticuleOpacity | Độ trong suốt của đường kinh tuyến và vĩ tuyến | 0.5 |
| graticuleStrokeWidth | Chiều rộng đường kinh tuyến và vĩ tuyến | 1 |
| legendBoxSize | Kích thước khung chú giải | 10 |
| legendFontSize | Cỡ chữ của chú giải | 14px |
Ví dụ cấu hình và chủ đề
Sao chép
Nhúng
---
config:
radar:
axisScaleFactor: 0.25
curveTension: 0.1
theme: base
themeVariables:
cScale0: "#FF0000"
cScale1: "#00FF00"
cScale2: "#0000FF"
radar:
curveOpacity: 0
---
radar-beta
axis A, B, C, D, E
curve c1{1,2,3,4,5}
curve c2{5,4,3,2,1}
curve c3{3,3,3,3,3}
