1.4.6 通用配置(elements

优质

小牛编辑

130浏览

2023-12-01

虽然图表类型提供了设置来配置每个数据集的样式，但我们有时希望以相同的方式对所有数据集进行样式设置。常用的做法是用相同的颜色对条形图中的所有线条进行描边来改变每个数据集的填充。

我们可以为四种不同类型的元素配置选项：arc, lines, points, 和 rectangles。当设置后，这些选项将应用于该类型的所有对象，除非被附加到数据集的配置被覆盖掉。

全局配置

元素选项可以在每个图表或全局中指定。元素的全局选项在Chart.defaults.global.elements中定义。例如，要设置全局条形图的边框宽度，可以执行以下操作：

Chart.defaults.global.elements.rectangle.borderWidth = 2;

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

全局点指示器配置选项: Chart.defaults.global.elements.point

支持以下值：

如果值是图像，则使用drawImage)在canvas上绘制该图像。

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

全局折线配置: Chart.defaults.global.elements.line

名称	类型	默认值	描述
`tension`	`Number`	`0.4`	贝塞尔曲线张力 (`0` 表示没有)
`backgroundColor`	`Color`	`'rgba(0,0,0,0.1)'`	填充色
`borderWidth`	`Number`	`3`	画笔宽度
`borderColor`	`Color`	`'rgba(0,0,0,0.1)'`	画笔颜色
`borderCapStyle`	`String`	`'butt'`	线帽样式 (详看 MDN).
`borderDash`	`Array`	`[]`	线段 (详看 MDN).
`borderDashOffset`	`Number`	`0`	偏移量 (详看 MDN).
`borderJoinStyle`	`String`	`'miter'`	连接样式 (详看 MDN).
`capBezierPoints`	`Boolean`	`true`	`true` 表示在图表内受贝塞尔曲线控制，`false`为没限制
`fill`	`Boolean/String`	`true`	填充位置: `'zero'`, `'top'`, `'bottom'`, `true` (等于`'zero'`) 或者 `false` (不填充).
`stepped`	`Boolean`	`false`	`true` 将线显示为阶梯线(`tension`设置将会被忽略).

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

全局矩形设置: Chart.defaults.global.elements.rectangle

名称	类型	默认值	描述
`backgroundColor`	`Color`	`'rgba(0,0,0,0.1)'`	填充色
`borderWidth`	`Number`	`0`	边框宽度
`borderColor`	`Color`	`'rgba(0,0,0,0.1)'`	边框色.
`borderSkipped`	`String`	`'bottom'`	跳过 (排除) 的边框: `'bottom'`, `'left'`, `'top'` or `'right'`.

圆弧用于极地图，甜甜圈图和饼图。

全局圆弧配置: Chart.defaults.global.elements.arc.