雷达图 (v11.6.0+)

【Radar Diagram (v11.6.0+)】

介绍

【Introduction】

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

【A radar diagram is a simple way to plot low-dimensional data in a circular format.】

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

【It is also known as a radar chart, spider chart, star chart, cobweb chart, polar chart, or Kiviat diagram.】

使用方法

【Usage】

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

【This diagram type is particularly useful for developers, data scientists, and engineers who require a clear and concise way to represent data in a circular format.】

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

【It is commonly used to graphically summarize and compare the performance of multiple entities across multiple dimensions.】

语法

【Syntax】

radar-beta
axis A, B, C, D, E
curve c1{1,2,3,4,5}
curve c2{5,4,3,2,1}
... More Fields ...

示例

【Examples】

语法细节

【Details of Syntax】

标题

【Title】

title：标题是一个可选字段，允许在雷达图顶部显示标题。

radar-beta
  title Title of the Radar Diagram
  ...

轴

【Axis】

axis：axis 关键字用于定义雷达图的轴。

每个轴由一个 ID 和一个可选标签表示。

【Each axis is represented by an ID and an optional label.】

在一条线上可以定义多个轴。

【Multiple axes can be defined in a single line.】

radar-beta
  axis id1["Label1"]
  axis id2["Label2"], id3["Label3"]
  ...

曲线

【Curve】

curve：curve 关键字用于在雷达图中定义曲线的数据点。

每条曲线由一个 ID、一个可选标签和一个数值列表表示。

【Each curve is represented by an ID, an optional label, and a list of values.】

数值可以通过数字列表或键值对列表来定义。如果使用键值对，键表示轴 ID，值表示数据点。否则，数据点将按已定义的轴顺序排列。

【Values can be defined by a list of numbers or a list of key-value pairs. If key-value pairs are used, the key represents the axis ID and the value represents the data point. Else, the data points are assumed to be in the order of the axes defined.】

在一条线上可以定义多个曲线。

【Multiple curves can be defined in a single line.】

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 }
  ...

选项

【Options】

• 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
  ...

配置

【Configuration】

有关详细信息，请参阅配置指南。

【Please refer to the configuration guide for details.】

参数	描述	默认值
width	雷达图的宽度	600
height	雷达图的高度	600
marginTop	雷达图顶部边距	50
marginBottom	雷达图底部边距	50
marginLeft	雷达图左侧边距	50
marginRight	雷达图右侧边距	50
axisScaleFactor	轴的缩放因子	1
axisLabelFactor	调整轴标签位置的因子	1.05
curveTension	圆滑曲线的张力	0.17

主题变量

【Theme Variables】

全局主题变量

【Global Theme Variables】

信息

这些变量的默认值取决于所使用的主题。要覆盖默认值，请在配置的 themeVariables 部分设置所需的值：

---

config: themeVariables: cScale0: "#FF0000" cScale1: "#00FF00"

---

雷达图支持颜色刻度 cScale${i}，其中 i 是从 0 到主题颜色刻度的最大颜色数的数字。通常，最大颜色数为 12。

【Radar charts support the color scales cScale${i} where i is a number from 0 to the theme's maximum number of colors in its color scale. Usually, the maximum number of colors is 12.】

属性	描述
fontSize	标题的字体大小
titleColor	标题的颜色
cScale$	第 i 条曲线的颜色刻度

雷达样式选项

【Radar Style Options】

信息

雷达的特定变量位于 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

配置和主题示例

【Example on config and theme】