极坐标面积图

极坐标面积图类似于饼图，但每个扇区的角度相同——扇区的半径根据值的不同而不同。

当我们希望显示与饼图类似的比较数据，但同时还要显示值的比例以提供上下文时，这种类型的图表通常很有用。

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

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

const data = { labels: [ 'Red', 'Green', 'Yellow', 'Grey', 'Blue' ], datasets: [{ label: 'My First Dataset', data: [11, 16, 7, 3, 14], backgroundColor: [ 'rgb(255, 99, 132)', 'rgb(75, 192, 192)', 'rgb(255, 205, 86)', 'rgb(201, 203, 207)', 'rgb(54, 162, 235)' ] }] };

const data = {
  labels: [
    'Red',
    'Green',
    'Yellow',
    'Grey',
    'Blue'
  ],
  datasets: [{
    label: 'My First Dataset',
    data: [11, 16, 7, 3, 14],
    backgroundColor: [
      'rgb(255, 99, 132)',
      'rgb(75, 192, 192)',
      'rgb(255, 205, 86)',
      'rgb(201, 203, 207)',
      'rgb(54, 162, 235)'
    ]
  }]
};

数据集属性

命名空间

• data.datasets[index] - 仅适用于此数据集的选项
• options.datasets.polarArea - 适用于所有 polarArea 数据集的选项
• options.elements.arc - 适用于所有 弧形元素 的选项
• options - 适用于整个图表的选项

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

名称	类型	可脚本化	可索引	默认值
backgroundColor	颜色	是	是	'rgba(0, 0, 0, 0.1)'
borderAlign	'center'|'inner'	是	是	'center'
borderColor	颜色	是	是	'#fff'
borderDash	number[]	是	-	[]
borderDashOffset	number	是	-	0.0
borderJoinStyle	'round'|'bevel'|'miter'	是	是	undefined
borderWidth	number	是	是	2
clip	number|object|false	-	-	undefined
data	number[]	-	-	必需
hoverBackgroundColor	颜色	是	是	undefined
hoverBorderColor	颜色	是	是	undefined
hoverBorderDash	number[]	是	-	undefined
hoverBorderDashOffset	number	是	-	undefined
hoverBorderJoinStyle	'round'|'bevel'|'miter'	是	是	undefined
hoverBorderWidth	number	是	是	undefined
circular	boolean	是	是	true

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

通用

名称	描述
clip	如何相对于 chartArea 进行裁剪。正值允许溢出，负值在 chartArea 内裁剪这么多像素。0 = 在 chartArea 处裁剪。裁剪也可以针对每一面进行配置：clip: {left: 5, top: false, right: -2, bottom: 0}

样式

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

名称	描述
backgroundColor	弧形背景颜色。
borderColor	弧形边框颜色。
borderDash	弧形边框的长度和虚线的间距。参见 MDN (在新窗口打开).
borderDashOffset	弧形边框用于虚线的偏移量。参见 MDN (在新窗口打开).
borderJoinStyle	弧形边框的连接样式。参见 MDN (在新窗口打开).
borderWidth	弧形边框的宽度（以像素为单位）。
circular	默认情况下，弧形是弯曲的。如果circular: false，弧形将变平。

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

边框对齐

以下值为borderAlign支持。

• 'center'（默认）
• 'inner'

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

交互

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

名称	描述
hoverBackgroundColor	悬停时弧形背景颜色。
hoverBorderColor	悬停时弧形边框颜色。
hoverBorderDash	悬停时弧形边框的长度和虚线的间距。参见 MDN (在新窗口打开).
hoverBorderDashOffset	悬停时弧形边框用于虚线的偏移量。参见 MDN (在新窗口打开).
hoverBorderJoinStyle	悬停时弧形边框的连接样式。参见 MDN (在新窗口打开).
hoverBorderWidth	悬停时弧形边框的宽度（以像素为单位）。

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

配置选项

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

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

极坐标面积图使用radialLinear比例尺。附加配置通过比例尺提供。

默认选项

我们还可以为创建的每个极坐标面积类型更改这些默认值，此对象位于Chart.overrides.polarArea中。更改全局选项仅影响更改后创建的图表。现有图表不会更改。

例如，要将所有新极坐标面积图配置为animateScale = false，你需要执行以下操作

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

数据结构

对于极坐标面积图，数据集需要包含数据点数组。数据点应为数字，Chart.js 将对所有数字进行汇总并计算每个数字的相对比例。

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

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