# 极面积图

¥Polar Area Chart

极地面积图与饼图类似，但每个部分具有相同的角度 - 线段的半径根据值的不同而不同。

¥Polar area charts are similar to pie charts, but each segment has the same angle - the radius of the segment differs depending on the value.

当我们想要显示类似于饼图的比较数据时，这种类型的图表通常很有用，但也显示上下文值的比例。

¥This type of chart is often useful when we want to show a comparison data similar to a pie chart, but also show a scale of values for context.

const config = {
  type: 'polarArea',
  data: data,
  options: {}
};const config = {
  type: 'polarArea',
  data: data,
  options: {}
};

# 数据集属性

¥Dataset Properties

命名空间：

¥Namespaces:

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

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

¥options.datasets.polarArea - options for all polarArea datasets
options.elements.arc - 所有圆弧元素的选项

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

¥options - options for the whole chart

以下选项可以包含在极地面积图数据集中，以配置该特定数据集的选项。

¥The following options can be included in a polar area chart dataset to configure options for that specific dataset.

名称	类型	可编写脚本	可转位	默认
`backgroundColor`	`Color`	是的	是的	`'rgba(0, 0, 0, 0.1)'`
`borderAlign`	`'center'`\|`'inner'`	是的	是的	`'center'`
`borderColor`	`Color`	是的	是的	`'#fff'`
`borderDash`	`number[]`	是的	*	`[]`
`borderDashOffset`	`number`	是的	*	`0.0`
`borderJoinStyle`	`'round'`\|`'bevel'`\|`'miter'`	是的	是的	`undefined`
`borderWidth`	`number`	是的	是的	`2`
`clip`	`number`\|`object`\|`false`	*	*	`undefined`
`data`	`number[]`	*	*	required
`hoverBackgroundColor`	`Color`	是的	是的	`undefined`
`hoverBorderColor`	`Color`	是的	是的	`undefined`
`hoverBorderDash`	`number[]`	是的	*	`undefined`
`hoverBorderDashOffset`	`number`	是的	*	`undefined`
`hoverBorderJoinStyle`	`'round'`\|`'bevel'`\|`'miter'`	是的	是的	`undefined`
`hoverBorderWidth`	`number`	是的	是的	`undefined`
`circular`	`boolean`	是的	是的	`true`

所有这些值，如果 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}`

# 样式

¥Styling

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

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

名称	描述
`backgroundColor`	圆弧背景色。
`borderColor`	弧形边框颜色。
`borderDash`	圆弧边框长度和虚线间距。见 MDN (opens new window)。
`borderDashOffset`	虚线的圆弧边界偏移量。见 MDN (opens new window)。
`borderJoinStyle`	弧形边框连接样式。见 MDN (opens new window)。
`borderWidth`	圆弧边框宽度（以像素为单位）。
`circular`	默认情况下，弧是弯曲的。如果 `circular: false`，弧形将是平坦的。

所有这些值，如果为 undefined，则回退到关联的 elements.arc.* 选项。

¥All these values, if undefined, fallback to the associated elements.arc.* options.

# 边框对齐

¥Border Alignment

borderAlign 支持以下值。

¥The following values are supported for borderAlign.

'center'（默认）

¥'center' (default)
'inner'

当设置 'center' 时，相邻圆弧的边界会重叠。当设置 'inner' 时，保证所有边框不重叠。

¥When 'center' is set, the borders of arcs next to each other will overlap. When 'inner' is set, it is guaranteed that all the borders do not overlap.

# 交互

¥Interactions

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

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

名称	描述
`hoverBackgroundColor`	悬停时的弧形背景颜色。
`hoverBorderColor`	悬停时的弧形边框颜色。
`hoverBorderDash`	悬停时弧形边框长度和虚线间距。见 MDN (opens new window)。
`hoverBorderDashOffset`	悬停时虚线的圆弧边界偏移。见 MDN (opens new window)。
`hoverBorderJoinStyle`	悬停时弧形边框连接样式。见 MDN (opens new window)。
`hoverBorderWidth`	悬停时的弧形边框宽度（以像素为单位）。

所有这些值，如果为 undefined，则回退到关联的 elements.arc.* 选项。

¥All these values, if undefined, fallback to the associated elements.arc.* options.

# 配置选项

¥Config Options

这些是特定于极地面积图的自定义选项。这些选项在访问时被查找，并与全局图表默认选项一起构成图表的选项。

¥These are the customisation options specific to Polar Area charts. These options are looked up on access, and form together with the global chart default options the options of the chart.

名称	类型	默认	描述
`animation.animateRotate`	`boolean`	`true`	如果为真，图表将以旋转动画的形式渲染。此属性位于 `options.animation` 对象中。
`animation.animateScale`	`boolean`	`true`	如果为真，将以动画方式从中心向外缩放图表。

极地面积图使用 radialLinear 刻度。通过秤提供额外的配置。

¥The polar area chart uses the radialLinear scale. Additional configuration is provided via the scale.

# 默认选项

¥Default Options

我们还可以为创建的每个 PolarArea 类型更改这些默认值，此对象在 Chart.overrides.polarArea 可用。更改全局选项只会影响更改后创建的图表。现有图表不会更改。

¥We can also change these default values for each PolarArea type that is created, this object is available at Chart.overrides.polarArea. Changing the global options only affects charts created after the change. Existing charts are not changed.

例如，要使用 animateScale = false 配置所有新的极地面积图，你可以执行以下操作：

¥For example, to configure all new polar area charts with animateScale = false you would do:

Chart.overrides.polarArea.animation.animateScale = false;

# 数据结构

¥Data Structure

对于极地面积图，数据集需要包含一个数据点数组。数据点应该是一个数字，Chart.js 将计算所有数字的总和并计算每个数字的相对比例。

¥For a polar area chart, datasets need to contain an array of data points. The data points should be a number, Chart.js will total all of the numbers and calculate the relative proportion of each.

你还需要指定一个标签数组，以便每个切片都能正确显示工具提示。

¥You also need to specify an array of labels so that tooltips appear correctly for each slice.

data = {
    datasets: [{
        data: [10, 20, 30]
    }],
    // These labels appear in the legend and in the tooltips when hovering different arcs
    labels: [
        'Red',
        'Yellow',
        'Blue'
    ]
};