# 元素

虽然图表类型提供了配置每个数据集样式的设置，但你有时希望为 所有数据集都以相同的方式 设置样式。一个常见的示例是用相同的颜色对柱状图中的所有条形进行描边，但更改每个数据集的填充。可以为四种不同类型的元素配置选项： arc、lines、points 和 bars。设置后，这些选项适用于该类型的所有对象，除非被附加到数据集的配置特别覆盖。

# 全局配置

可以按图表或全局指定元素选项。元素的全局选项在 Chart.defaults.elements 中定义。例如，要全局设置所有柱状图的边框宽度，你可以执行以下操作：

Chart.defaults.elements.bar.borderWidth = 2;

# 点配置

点元素用于表示折线图、雷达图或气泡图中的点。

命名空间： options.elements.point、全局点选项： Chart.defaults.elements.point.

名称	类型	默认	描述
`radius`	`number`	`3`	点半径。
`pointStyle`	`pointStyle`	`'circle'`	点样式。
`rotation`	`number`	`0`	点旋转（以度为单位）。
`backgroundColor`	`Color`	`Chart.defaults.backgroundColor`	点填充颜色。
`borderWidth`	`number`	`1`	点笔划宽度。
`borderColor`	`Color`	`'Chart.defaults.borderColor`	点描边颜色。
`hitRadius`	`number`	`1`	添加到点半径的额外半径以进行命中检测。
`hoverRadius`	`number`	`4`	悬停时的点半径。
`hoverBorderWidth`	`number`	`1`	悬停时的笔划宽度。

# 点样式

# 类型

pointStyle 参数接受以下类型的输入： string、Image 和 HTMLCanvasElement

# 信息

当提供字符串时，支持以下值：

'circle'
'cross'
'crossRot'
'dash'
'line'
'rect'
'rectRounded'
'rectRot'
'star'
'triangle'
false

如果值为图片或画布元素，则使用 drawImage (opens new window) 在画布上绘制该图片或画布元素。

# 折线配置

折线元素用于表示折线图中的折线。

命名空间： options.elements.line、全局线路选项： Chart.defaults.elements.line.

名称	类型	默认	描述
`tension`	`number`	`0`	贝塞尔曲线张力（`0` 表示没有贝塞尔曲线）。
`backgroundColor`	`Color`	`Chart.defaults.backgroundColor`	线条填充颜色。
`borderWidth`	`number`	`3`	线条笔划宽度。
`borderColor`	`Color`	`Chart.defaults.borderColor`	线条描边颜色。
`borderCapStyle`	`string`	`'butt'`	线帽样式。见 MDN (opens new window)。
`borderDash`	`number[]`	`[]`	划线。见 MDN (opens new window)。
`borderDashOffset`	`number`	`0.0`	虚线偏移量。见 MDN (opens new window)。
`borderJoinStyle`	`'round'`\|`'bevel'`\|`'miter'`	`'miter'`	线连接样式。见 MDN (opens new window)。
`capBezierPoints`	`boolean`	`true`	`true` 保持图表内的 Bézier 控制，`false` 无限制。
`cubicInterpolationMode`	`string`	`'default'`	要应用的插值模式。查看更多...
`fill`	`boolean`\|`string`	`false`	如何填充线下的区域。见面积图。
`stepped`	`boolean`	`false`	`true` 将线条显示为阶梯线（`tension` 将被忽略）。

# 柱状配置

条形元素用于表示柱状图中的条形。

命名空间： options.elements.bar、全局栏选项： Chart.defaults.elements.bar.

名称	类型	默认	描述
`backgroundColor`	`Color`	`Chart.defaults.backgroundColor`	条形填充颜色。
`borderWidth`	`number`	`0`	条形笔划宽度。
`borderColor`	`Color`	`Chart.defaults.borderColor`	条形描边颜色。
`borderSkipped`	`string`	`'start'`	跳过（排除）边界： `'start'`、`'end'`、`'middle'`、`'bottom'`、`'left'`、`'top'`、`'right'` 或 `false`。
`borderRadius`	`number`\|`object`	`0`	条形边框半径（以像素为单位）。
`inflateAmount`	`number`\|`'auto'`	`'auto'`	绘制时使条形矩形膨胀的像素数量。
`pointStyle`	`string`\|`Image`\|`HTMLCanvasElement`	`'circle'`	图例点的样式。

# 圆弧配置

圆弧用于极图、圆环图和饼图。

命名空间： options.elements.arc、全局弧选项： Chart.defaults.elements.arc.

名称	类型	默认	描述
`angle` - 仅适用于极地	`number`	`circumference / (arc count)`	要覆盖的弧角。
`backgroundColor`	`Color`	`Chart.defaults.backgroundColor`	圆弧填充颜色。
`borderAlign`	`'center'`\|`'inner'`	`'center'`	弧线对齐。
`borderColor`	`Color`	`'#fff'`	弧线描边颜色。
`borderDash`	`number[]`	`[]`	弧线破折号。见 MDN (opens new window)。
`borderDashOffset`	`number`	`0.0`	弧线虚线偏移。见 MDN (opens new window)。
`borderJoinStyle`	`'round'`\|`'bevel'`\|`'miter'`	`'bevel'`\|`'round'`	线连接样式。见 MDN (opens new window)。 `borderAlign` 为 `'inner'` 时默认为 `'round'`
`borderWidth`	`number`	`2`	弧线宽度。
`circular`	`boolean`	`true`	默认情况下，弧是弯曲的。如果 `circular: false` 则圆弧将是平坦的