# 雷达图

¥Radar Chart

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

¥A radar chart is a way of showing multiple data points and the variation between them.

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

¥They are often useful for comparing the points of two or more different data sets.

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

# 数据集属性

¥Dataset Properties

命名空间：

¥Namespaces:

data.datasets[index] - 仅此数据集的选项

¥data.datasets[index] - options for this dataset only
options.datasets.line - 所有线数据集的选项

¥options.datasets.line - options for all line datasets
options.elements.line - 所有线条元素的选项

¥options.elements.line - options for all line elements
options.elements.point - 所有点元素的选项

¥options.elements.point - options for all point elements
options - 整个图表的选项

¥options - options for the whole chart

雷达图允许为每个数据集指定许多属性。这些用于设置特定数据集的显示属性。比如一条线的颜色一般都是这样设置的。

¥The radar chart allows a number of properties to be specified for each dataset. These are used to set display properties for a specific dataset. For example, the colour of a line is generally set this way.

名称	类型	可编写脚本	可转位	默认
`backgroundColor`	`Color`	是的	*	`'rgba(0, 0, 0, 0.1)'`
`borderCapStyle`	`string`	是的	*	`'butt'`
`borderColor`	`Color`	是的	*	`'rgba(0, 0, 0, 0.1)'`
`borderDash`	`number[]`	是的	*	`[]`
`borderDashOffset`	`number`	是的	*	`0.0`
`borderJoinStyle`	`'round'`\|`'bevel'`\|`'miter'`	是的	*	`'miter'`
`borderWidth`	`number`	是的	*	`3`
`hoverBackgroundColor`	`Color`	是的	*	`undefined`
`hoverBorderCapStyle`	`string`	是的	*	`undefined`
`hoverBorderColor`	`Color`	是的	*	`undefined`
`hoverBorderDash`	`number[]`	是的	*	`undefined`
`hoverBorderDashOffset`	`number`	是的	*	`undefined`
`hoverBorderJoinStyle`	`'round'`\|`'bevel'`\|`'miter'`	是的	*	`undefined`
`hoverBorderWidth`	`number`	是的	*	`undefined`
`clip`	`number`\|`object`\|`false`	*	*	`undefined`
`data`	`number[]`	*	*	required
`fill`	`boolean`\|`string`	是的	*	`false`
`label`	`string`	*	*	`''`
`order`	`number`	*	*	`0`
`tension`	`number`	*	*	`0`
`pointBackgroundColor`	`Color`	是的	是的	`'rgba(0, 0, 0, 0.1)'`
`pointBorderColor`	`Color`	是的	是的	`'rgba(0, 0, 0, 0.1)'`
`pointBorderWidth`	`number`	是的	是的	`1`
`pointHitRadius`	`number`	是的	是的	`1`
`pointHoverBackgroundColor`	`Color`	是的	是的	`undefined`
`pointHoverBorderColor`	`Color`	是的	是的	`undefined`
`pointHoverBorderWidth`	`number`	是的	是的	`1`
`pointHoverRadius`	`number`	是的	是的	`4`
`pointRadius`	`number`	是的	是的	`3`
`pointRotation`	`number`	是的	是的	`0`
`pointStyle`	`pointStyle`	是的	是的	`'circle'`
`spanGaps`	`boolean`	*	*	`undefined`

所有这些值，如果 undefined，回退到选项决议中描述的范围

¥All these values, if undefined, fallback to the scopes described in option resolution

# 一般的

¥General

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

# 点样式

¥Point Styling

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

¥The style of each point can be controlled with the following properties:

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

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

¥All these values, if undefined, fallback first to the dataset options then to the associated elements.point.* options.

# 折线样式

¥Line Styling

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

¥The style of the line can be controlled with the following properties:

名称	描述
`backgroundColor`	线条填充颜色。
`borderCapStyle`	线帽样式。见 MDN (opens new window)。
`borderColor`	线条颜色。
`borderDash`	破折号的长度和间距。见 MDN (opens new window)。
`borderDashOffset`	虚线的偏移量。见 MDN (opens new window)。
`borderJoinStyle`	线联合样式。见 MDN (opens new window)。
`borderWidth`	线宽（以像素为单位）。
`fill`	如何填充线下的区域。见面积图。
`tension`	线的贝塞尔曲线张力。设置为 0 以绘制直线。
`spanGaps`	如果为真，则将在没有数据或数据为空的点之间绘制线条。如果为 false，具有 `null` 数据的点将在线条中创建一个中断。

如果值为 undefined，则值回退到关联的 elements.line.* 选项。

¥If the value is undefined, the values fallback to the associated elements.line.* options.

# 交互

¥Interactions

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

¥The interaction with each point can be controlled with the following properties:

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

# 标尺选项

¥Scale Options

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

¥The radar chart supports only a single scale. The options for this scale are defined in the scales.r property, which can be referenced from the Linear Radial Axis page.

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

# 默认选项

¥Default Options

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

¥It is common to want to apply a configuration setting to all created radar charts. The global radar chart settings are stored in Chart.overrides.radar. Changing the global options only affects charts created after the change. Existing charts are not changed.

# 数据结构

¥Data Structure

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

¥The data property of a dataset for a radar chart is specified as an array of numbers. Each point in the data array corresponds to the label at the same index.

data: [20, 10]

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

¥For a radar chart, to provide context of what each point means, we include an array of strings that show around each point in the chart.

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

# 内部数据格式

¥Internal data format

{x, y}