环形图和饼图

¥Doughnut and Pie Charts

饼图和圆环图可能是最常用的图表。它们被分成段，每段的圆弧表示每条数据的比例值。

¥Pie and doughnut charts are probably the most commonly used charts. They are divided into segments, the arc of each segment shows the proportional value of each piece of data.

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

¥They are excellent at showing the relational proportions between data.

饼图和圆环图实际上是 Chart.js 中的同一类，但具有不同的默认值 - their cutout。这相当于应该切掉内部的哪一部分。饼图默认为 0，环形图默认为 '50%'。

¥Pie and doughnut charts are effectively the same class in Chart.js, but have one different default value - their cutout. This equates to what portion of the inner should be cut out. This defaults to 0 for pie charts, and '50%' for doughnuts.

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

¥They are also registered under two aliases in the Chart core. Other than their different default value, and different alias, they are exactly the same.

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
  }]
};

数据集属性

¥Dataset Properties

命名空间：

¥Namespaces:

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

  ¥data.datasets[index] - options for this dataset only

• options.datasets.doughnut - 所有环形图数据集的选项

  ¥options.datasets.doughnut - options for all doughnut datasets

• options.datasets.pie - 所有饼图数据集的选项

  ¥options.datasets.pie - options for all pie datasets

• options.elements.arc - 所有 圆弧元素 的选项

  ¥options.elements.arc - options for all arc elements

• options - 整个图表的选项

  ¥options - options for the whole chart

圆环图/饼图允许为每个数据集指定许多属性。这些用于设置特定数据集的显示属性。例如，数据集的弧线的颜色通常是这样设置的。

¥The doughnut/pie 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 colours of the dataset's arcs are generally set this way.

名称	类型	可编写脚本	可转位	默认
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
borderRadius	number|object	是的	是的	0
borderWidth	number	是的	是的	2
circumference	number	*	*	undefined
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
hoverOffset	number	是的	是的	0
offset	number|number[]	是的	是的	0
rotation	number	*	*	undefined
spacing	number	*	*	0
weight	number	*	*	1

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

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

一般的

¥General

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

样式

¥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	圆弧边框宽度（以像素为单位）。
offset	弧偏移（以像素为单位）。
spacing	固定弧偏移（以像素为单位）。与 offset 类似，但适用于所有弧。
weight	数据集的相对厚度。提供权重值将导致饼图或环形图数据集的绘制厚度相对于所有数据集权重值的总和。

所有这些值，如果为 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 borders will not overlap.

边框半径

¥Border Radius

如果这个值是一个数字，它会应用于圆弧的所有角点（outerStart、outerEnd、innerStart、innerRight）。如果此值为对象，则 outerStart 属性定义外起点角的边界半径。同样，也可以指定 outerEnd、innerStart 和 innerEnd 属性。

¥If this value is a number, it is applied to all corners of the arc (outerStart, outerEnd, innerStart, innerRight). If this value is an object, the outerStart property defines the outer-start corner's border radius. Similarly, the outerEnd, innerStart, and innerEnd properties can also be specified.

交互

¥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	悬停时的弧形边框宽度（以像素为单位）。
hoverOffset	悬停时的弧偏移（以像素为单位）。

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

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

配置选项

¥Config Options

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

¥These are the customisation options specific to Pie & Doughnut charts. These options are looked up on access, and form together with the global chart configuration the options of the chart.

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

默认选项

¥Default Options

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

¥We can also change these default values for each Doughnut type that is created, this object is available at Chart.overrides.doughnut. Pie charts also have a clone of these defaults available to change at Chart.overrides.pie, with the only difference being cutout being set to 0.

数据结构

¥Data Structure

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

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

你还需要指定一组标签，以便工具提示正确显示。

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

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