雷达图 (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：标题是一个可选字段，允许在雷达图顶部渲染标题。

¥title: The title is an optional field that allows to render a title at the top of the radar diagram.

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

轴

¥Axis

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

¥axis: The axis keyword is used to define the axes of the radar diagram.

每个轴由一个 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 关键字用于定义雷达图中曲线的数据点。

¥curve: The curve keyword is used to define the data points for a curve in the radar diagram.

每条曲线由一个 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 关键字用于显示或隐藏雷达图中的图例。默认显示图例。

  ¥showLegend: The showLegend keyword is used to show or hide the legend in the radar diagram. The legend is shown by default.

• max：雷达图的最大值。这用于缩放雷达图。如果未提供，则从数据点计算出最大值。

  ¥max: The maximum value for the radar diagram. This is used to scale the radar diagram. If not provided, the maximum value is calculated from the data points.

• min：雷达图的最小值。这用于缩放雷达图。如果未提供，则最小值为 0。

  ¥min: The minimum value for the radar diagram. This is used to scale the radar diagram. If not provided, the minimum value is 0.

• graticule：经纬线关键字用于定义要在雷达图中渲染的经纬线类型。经纬线可以是 circle 或 polygon。如果未提供，则默认格线为 circle。

  ¥graticule: The graticule keyword is used to define the type of graticule to be rendered in the radar diagram. The graticule can be circle or polygon. If not provided, the default graticule is circle.

• ticks：ticks 关键字用于定义经纬线上的刻度数。它是绘制的同心圆或多边形的数量，用于指示雷达图的比例。如果未提供，则默认刻度数为 5。

  ¥ticks: The ticks keyword is used to define the number of ticks on the graticule. It is the number of concentric circles or polygons drawn to indicate the scale of the radar diagram. If not provided, the default number of ticks is 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 部分设置所需的值：%%{init: {"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 键内。要设置雷达样式选项，请使用此语法。%%{init: {"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