# 雷达图

雷达图是一种显示多个数据点及其之间变化的方法。

它们通常用于比较两个或多个不同数据集的点。

const config = { type: 'radar', data: data, options: { elements: { line: { borderWidth: 3 } } }, };const config = {
  type: 'radar',
  data: data,
  options: {
    elements: {
      line: {
        borderWidth: 3
      }
    }
  },
};

# 数据集属性

命名空间

data.datasets[index] - 仅适用于此数据集的选项
options.datasets.line - 适用于所有折线数据集的选项
options.elements.line - 适用于所有折线元素的选项
options.elements.point - 适用于所有点元素的选项
options - 适用于整个图表的选项

雷达图允许为每个数据集指定一些属性。这些属性用于设置特定数据集的显示属性。例如，线的颜色通常以这种方式设置。

名称	类型	可脚本化	可索引	默认值
`backgroundColor`	`颜色`	是	-	`'rgba(0, 0, 0, 0.1)'`
`borderCapStyle`	`字符串`	是	-	`'butt'`
`borderColor`	`颜色`	是	-	`'rgba(0, 0, 0, 0.1)'`
`borderDash`	`数字[]`	是	-	`[]`
`borderDashOffset`	`数字`	是	-	`0.0`
`borderJoinStyle`	`'round'`\|`'bevel'`\|`'miter'`	是	-	`'miter'`
`borderWidth`	`数字`	是	-	`3`
`hoverBackgroundColor`	`颜色`	是	-	`未定义`
`hoverBorderCapStyle`	`字符串`	是	-	`未定义`
`hoverBorderColor`	`颜色`	是	-	`未定义`
`hoverBorderDash`	`数字[]`	是	-	`未定义`
`hoverBorderDashOffset`	`数字`	是	-	`未定义`
`hoverBorderJoinStyle`	`'round'`\|`'bevel'`\|`'miter'`	是	-	`未定义`
`hoverBorderWidth`	`数字`	是	-	`未定义`
`clip`	`数字`\|`对象`\|`false`	-	-	`未定义`
`data`	`数字[]`	-	-	必需
`fill`	`布尔值`\|`字符串`	是	-	`false`
`label`	`字符串`	-	-	`''`
`order`	`数字`	-	-	`0`
`tension`	`数字`	-	-	`0`
`pointBackgroundColor`	`颜色`	是	是	`'rgba(0, 0, 0, 0.1)'`
`pointBorderColor`	`颜色`	是	是	`'rgba(0, 0, 0, 0.1)'`
`pointBorderWidth`	`数字`	是	是	`1`
`pointHitRadius`	`数字`	是	是	`1`
`pointHoverBackgroundColor`	`颜色`	是	是	`未定义`
`pointHoverBorderColor`	`颜色`	是	是	`未定义`
`pointHoverBorderWidth`	`数字`	是	是	`1`
`pointHoverRadius`	`数字`	是	是	`4`
`pointRadius`	`数字`	是	是	`3`
`pointRotation`	`数字`	是	是	`0`
`pointStyle`	`pointStyle`	是	是	`'circle'`
`spanGaps`	`布尔值`	-	-	`未定义`

所有这些值，如果未定义，将回退到选项解析中描述的范围

# 通用

名称	描述
`clip`	如何相对于图表区域进行裁剪。正值允许溢出，负值在图表区域内裁剪这么多像素。`0` = 在图表区域处裁剪。裁剪也可以针对每侧进行配置：`clip: {left: 5, top: false, right: -2, bottom: 0}`
`label`	出现在图例和工具提示中的数据集的标签。
`order`	数据集的绘制顺序。也会影响工具提示和图例的顺序。更多

# 点样式

可以使用以下属性控制每个点的样式

名称	描述
`pointBackgroundColor`	点的填充颜色。
`pointBorderColor`	点的边框颜色。
`pointBorderWidth`	点的边框宽度（以像素为单位）。
`pointHitRadius`	未显示的点的像素大小，它对鼠标事件做出反应。
`pointRadius`	点形状的半径。如果设置为 0，则不会渲染点。
`pointRotation`	点的旋转角度（以度为单位）。
`pointStyle`	点的样式。更多...

所有这些值，如果未定义，将首先回退到数据集选项，然后回退到关联的 elements.point.* 选项。

# 线样式

可以使用以下属性控制线的样式

名称	描述
`backgroundColor`	线的填充颜色。
`borderCapStyle`	线的端点样式。参见 MDN (在新窗口中打开)。
`borderColor`	线的颜色。
`borderDash`	虚线的长度和间距。参见 MDN (在新窗口中打开)。
`borderDashOffset`	虚线的偏移量。参见 MDN (在新窗口中打开)。
`borderJoinStyle`	线的连接样式。参见 MDN (在新窗口中打开)。
`borderWidth`	线的宽度（以像素为单位）。
`fill`	如何填充线下的区域。参见面积图。
`tension`	线的贝塞尔曲线张力。设置为 0 以绘制直线。
`spanGaps`	如果为 true，则将在没有数据或数据为空的点之间绘制线。如果为 false，则数据为`null`的点将在线上产生间断。

如果该值为未定义，则这些值将回退到关联的 elements.line.* 选项。

# 交互

可以使用以下属性控制与每个点的交互

名称	描述
`pointHoverBackgroundColor`	悬停时的点背景颜色。
`pointHoverBorderColor`	悬停时的点边框颜色。
`pointHoverBorderWidth`	悬停时的点边框宽度。
`pointHoverRadius`	悬停时的点半径。

# 刻度选项

雷达图仅支持单个刻度。此刻度的选项在scales.r属性中定义，可以从线性径向坐标轴页面中引用。

options = {
    scales: {
        r: {
            angleLines: {
                display: false
            },
            suggestedMin: 50,
            suggestedMax: 100
        }
    }
};

# 默认选项

通常希望将配置设置应用于所有创建的雷达图。全局雷达图设置存储在Chart.overrides.radar中。更改全局选项仅影响更改后创建的图表。不会更改现有图表。

# 数据结构

雷达图数据集的data属性指定为数字数组。数据数组中的每个点对应于相同索引处的标签。

data: [20, 10]

对于雷达图，为了提供每个点的含义上下文，我们包含一个字符串数组，这些字符串显示在图表中的每个点周围。

data: {
    labels: ['Running', 'Swimming', 'Eating', 'Cycling'],
    datasets: [{
        data: [20, 10, 4, 2]
    }]
}

# 内部数据格式

{x, y}

← 极坐标图散点图 →