圆环图和饼图

饼图和圆环图可能是最常用的图表。它们被分成多个扇区，每个扇区的弧长显示了每个数据片段的比例值。

它们非常适合显示数据之间的关系比例。

饼图和圆环图在 Chart.js 中实际上是同一个类，但有一个不同的默认值 - 它们的 cutout。这相当于内部应切出的部分。对于饼图，默认值为 0，对于圆环图，默认值为 '50%'。

它们还在 Chart 核心中的两个别名下注册。除了不同的默认值和不同的别名之外，它们完全相同。

const config = { type: 'doughnut', data: data, };

const config = {
  type: 'doughnut',
  data: data,
};

const data = { labels: [ 'Red', 'Blue', 'Yellow' ], datasets: [{ label: 'My First Dataset', data: [300, 50, 100], backgroundColor: [ 'rgb(255, 99, 132)', 'rgb(54, 162, 235)', 'rgb(255, 205, 86)' ], hoverOffset: 4 }] };

const data = {
  labels: [
    'Red',
    'Blue',
    'Yellow'
  ],
  datasets: [{
    label: 'My First Dataset',
    data: [300, 50, 100],
    backgroundColor: [
      'rgb(255, 99, 132)',
      'rgb(54, 162, 235)',
      'rgb(255, 205, 86)'
    ],
    hoverOffset: 4
  }]
};

const config = { type: 'pie', data: data, };

const config = {
  type: 'pie',
  data: data,
};

const data = { labels: [ 'Red', 'Blue', 'Yellow' ], datasets: [{ label: 'My First Dataset', data: [300, 50, 100], backgroundColor: [ 'rgb(255, 99, 132)', 'rgb(54, 162, 235)', 'rgb(255, 205, 86)' ], hoverOffset: 4 }] };

const data = {
  labels: [
    'Red',
    'Blue',
    'Yellow'
  ],
  datasets: [{
    label: 'My First Dataset',
    data: [300, 50, 100],
    backgroundColor: [
      'rgb(255, 99, 132)',
      'rgb(54, 162, 235)',
      'rgb(255, 205, 86)'
    ],
    hoverOffset: 4
  }]
};

数据集属性

命名空间

• data.datasets[index] - 仅此数据集的选项
• options.datasets.doughnut - 所有圆环图数据集的选项
• options.datasets.pie - 所有饼图数据集的选项
• 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
borderRadius	number|object	是	是	0
borderWidth	number	是	是	2
circumference	number	-	-	undefined
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
hoverOffset	number	是	是	0
offset	number|number[]	是	是	0
rotation	number	-	-	undefined
spacing	number	-	-	0
weight	number	-	-	1

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

通用

名称	描述
circumference	每个数据集的覆盖，用于弧形覆盖的扫描范围
clip	如何相对于 chartArea 进行裁剪。正值允许溢出，负值在 chartArea 内部裁剪那么多像素。0 = 在 chartArea 处裁剪。裁剪也可以针对每边配置：clip: {left: 5, top: false, right: -2, bottom: 0}
rotation	每个数据集的覆盖，用于绘制弧形的起始角度

样式

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

名称	描述
backgroundColor	弧背景颜色。
borderColor	弧边框颜色。
borderDash	弧边框的长度和虚线的间距。参见 MDN (在新窗口打开)。
borderDashOffset	弧边框的虚线的偏移量。参见 MDN (在新窗口打开)。
borderJoinStyle	弧边框的连接样式。参见 MDN (在新窗口打开)。
borderWidth	弧边框宽度（以像素为单位）。
offset	弧偏移量（以像素为单位）。
spacing	固定弧偏移量（以像素为单位）。类似于 offset，但适用于所有弧形。
weight	数据集的相对厚度。为 weight 提供一个值将导致饼图或圆环图数据集以相对于所有数据集 weight 值之和的厚度绘制。

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

边框对齐

以下值支持 borderAlign。

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

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

边框圆角

如果此值是一个数字，它将应用于弧形的所有角（outerStart、outerEnd、innerStart、innerRight）。如果此值是一个对象，outerStart 属性定义外起点角的边框圆角。类似地，也可以指定 outerEnd、innerStart 和 innerEnd 属性。

交互

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

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

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

配置选项

这些是特定于饼图和圆环图的自定义选项。这些选项在访问时会被查找，并与全局图表配置一起形成图表的选项。

名称	类型	默认值	描述
cutout	number|string	50% - 对于圆环图，0 - 对于饼图	图表中间切出的部分。如果 string 并以 '%' 结尾，则为图表半径的百分比。number 被认为是像素。
radius	number|string	100%	图表的外部半径。如果 string 并以 '%' 结尾，则为最大半径的百分比。number 被认为是像素。
rotation	number	0	绘制弧形的起始角度。
circumference	number	360	允许弧形覆盖的扫描范围。
animation.animateRotate	boolean	true	如果为真，图表将以旋转动画的方式进行动画。此属性位于 options.animation 对象中。
animation.animateScale	boolean	false	如果为真，将对从中心向外缩放图表进行动画。

默认选项

我们还可以更改为每个创建的 Doughnut 类型设置的这些默认值，该对象在 Chart.overrides.doughnut 中可用。饼图也有一份这些默认值的克隆，可在 Chart.overrides.pie 中更改，唯一的区别是 cutout 设置为 0。

数据结构

对于饼图，数据集需要包含一个数据点数组。数据点应为数字，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'
    ]
};