雷達圖簡介
雷達圖是一種以圓形格式繪製低維資料的簡單方法。
雷達圖也被稱為蜘蛛圖、星形圖、網狀圖、極座標圖。
應用
雷達圖對於需要以圓形格式清晰簡潔地表示資料的開發者、資料科學家和工程師特別有用。
它通常用於以圖形方式總結和比較多個實體在多個維度上的表現。
語法
複製
嵌入
radar-beta
axis A, B, C, D, E
curve c1{1,2,3,4,5}
curve c2{5,4,3,2,1}
... More Fields ...
範例
代碼
複製
嵌入
---
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
語法細節
標題
title：，渲染在雷達圖頂部。
複製
嵌入
radar-beta
title Title of the Radar Diagram
...
軸
axis：axis 語法用於定義雷達圖的軸。
每個軸由一個 ID 和一個選用標籤表示。
可以在一條線上定義多個軸。
複製
嵌入
radar-beta
axis id1["Label1"]
axis id2["Label2"], id3["Label3"]
...
曲線
curve：curve 語法用於定義雷達圖中曲線的資料點。
每條曲線由一個 ID、一個選用標籤和一個值清單表示。
值可以透過數字清單或鍵值對清單定義。如果使用鍵值對，則鍵表示軸 ID，值表示資料點。
可以在一條線上定義多條曲線。
複製
嵌入
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 }
...
選項
- showLegend：showLegend 語法用於顯示或隱藏雷達圖中的圖例，預設顯示。
- max：雷達圖的最大值，這用於縮放雷達圖。如果未提供，則從資料點計算出最大值。
- min：雷達圖的最小值，這用於縮放雷達圖。如果未提供，則最小值為 0。
- graticule：graticule 語法用於定義要在雷達圖中渲染的經緯線類型。經緯線可以是 circle 或 polygon。如果未提供，則預設為 circle。
- ticks：ticks 語法用於定義經緯線上的刻度數。它是繪製的同心圓或多邊形的數量，用於指示雷達圖的比例。如果未提供，則預設刻度數為 5。
複製
嵌入
radar-beta
...
showLegend true
max 100
min 0
graticule circle
ticks 5
...
設定
| 參數 | 描述 | 預設值 |
|---|---|---|
| width | 雷達圖的寬度 | 600 |
| height | 雷達圖的高度 | 600 |
| marginTop | 雷達圖的上邊距 | 50 |
| marginBottom | 雷達圖的下邊距 | 50 |
| marginLeft | 雷達圖的左邊距 | 50 |
| marginRight | 雷達圖的右邊距 | 50 |
| axisScaleFactor | 座標軸的縮放因子 | 1 |
| axisLabelFactor | 調整座標軸標籤位置的因子 | 1.05 |
| curveTension | 圓角曲線的張力 | 0.17 |
主題變數
全域主題變數
資訊
這些變數的預設值取決於所使用的主題。要覆寫預設值，請在設定的 themeVariables 部分設定所需的值： config: themeVariables: cScale0: "#FF0000" cScale1: "#00FF00"
雷達圖支援顏色刻度 cScale${i}，其中 i 是從 0 到主題顏色刻度的最大顏色數的數字。通常，最大顏色數為 12。
| 屬性 | 描述 |
|---|---|
| fontSize | 標題的字型大小 |
| titleColor | 標題顏色 |
| cScale$ | 第 i 條曲線的顏色刻度 |
雷達樣式選項
資訊
雷達的特定變數位於 radar 鍵內。要設定雷達樣式選項，請使用以下語法。 config: themeVariables: radar: axisColor: "#FF0000"
| 屬性 | 描述 | 預設值 |
|---|---|---|
| axisColor | 座標軸線的顏色 | black |
| axisStrokeWidth | 座標軸線的寬度 | 1 |
| axisLabelFontSize | 座標軸標籤的字型大小 | 12px |
| curveOpacity | 曲線透明度 | 0.7 |
| curveStrokeWidth | 曲線寬度 | 2 |
| graticuleColor | 經緯線顏色 | black |
| graticuleOpacity | 經緯線透明度 | 0.5 |
| graticuleStrokeWidth | 經緯線寬度 | 1 |
| legendBoxSize | 圖例框的大小 | 10 |
| legendFontSize | 圖例的字型大小 | 14px |
設定和主題範例
代碼
複製
嵌入
---
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}
