雷达图简介
雷达图是一种以圆形格式绘制低维数据的简单方法。
雷达图也被称为蜘蛛图、星形图、网状图、极坐标图。
应用
雷达图对于需要以圆形格式清晰简洁地表示数据的开发者、数据科学家和工程师特别有用。
它通常用于以图形方式总结和比较多个实体在多个维度上的表现。
语法
复制
嵌入
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}