通用元素配置

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

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

全局配置

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

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

点指示器配置

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

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

名称 类型 默认值 描述
radius Number 3 半径
tyle String circle 样式
backgroundColor Color 'rgba(0,0,0,0.1)' 填充色
borderWidth Number 1 边框宽度
borderColor Color 'rgba(0,0,0,0.1)' 边框颜色
hitRadius Number 1 点击时额外增加的点半径
hoverRadius Number 4 悬浮时的点半径
hoverBorderWidth Number 1 悬浮时的边框宽度

数据点样式

支持以下值：

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

如果值是图像，则使用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.

名称 类型 默认值 描述
backgroundColor Color 'rgba(0,0,0,0.1)' 填充色
borderColor Color '#fff' 描边框色
borderWidth Number 2 描边宽度

results matching ""

    No results matching ""