免费注册
流程类
图形化表达方式
脑图类
结构化表达方式
笔记类
高效化表达方式
实用工具
实用工具
业务与管理领域
软件工程与系统设计
UML
数据分析与研究
工程与技术设计
数据库与信息系统
树形图
括号图
思维笔记

雷达图语法

雷达图简介

雷达图是一种以圆形格式绘制低维数据的简单方法。

雷达图也被称为蜘蛛图、星形图、网状图、极坐标图。

应用

雷达图对于需要以圆形格式清晰简洁地表示数据的开发者、数据科学家和工程师特别有用。

它通常用于以图形方式总结和比较多个实体在多个维度上的表现。

语法

                            
复制
嵌入
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}