区域图表

折线图和雷达图都支持数据集对象上的fill选项，该选项可用于创建两个数据集之间的区域或数据集与边界之间的区域，例如，比例尺origin, start or end（参见filling modes）。

注意: 这个功能是由 filler plugin实现的。

填充模式

模式 类型 值
绝对数据集索引 1 Number 1, 2, 3, …
相对数据集索引 1 String '-1', '-2', '+1', …
边界 2 String 'start', 'end', 'origin'
禁用 3 Boolean false

1 在2.2.0版中引入了数据集填充模式2 2.6.0之前的版本, 边界值为 'zero', 'top', 'bottom' (已废弃)3 对于向后兼容性, fill: true (默认值) 相当于fill: 'origin'

示例

1. new Chart(ctx, {
2. data: {
3. datasets: [
4. {fill: 'origin'},      // 0: fill to 'origin'
5. {fill: '+2'},          // 1: fill to dataset 3
6. {fill: 1},             // 2: fill to dataset 1
7. {fill: false},         // 3: no fill
8. {fill: '-2'}           // 4: fill to dataset 2
9. ]
10. }
11. })

配置

选项 类型 默认值 描述
plugins.filler.propagate Boolean true 隐藏数据集时的填充

propagate

Boolean (默认值: true)

如果为true，则填充区域将递归地扩展到由隐藏数据集目标的fill值所定义的可见目标：

示例

1. new Chart(ctx, {
2. data: {
3. datasets: [
4. {fill: 'origin'},   // 0: fill to 'origin'
5. {fill: '-1'},       // 1: fill to dataset 0
6. {fill: 1},          // 2: fill to dataset 1
7. {fill: false},      // 3: no fill
8. {fill: '-2'}        // 4: fill to dataset 2
9. ]
10. },
11. options: {
12. plugins: {
13. filler: {
14. propagate: true
15. }
16. }
17. }
18. })

propagate: true:

  • 如果数据集2被隐藏，则数据集4将填充到数据集1
  • 如果数据集2和1被隐藏，则数据集4将填充到'origin' propagate: false:
  • 如果数据集2和/或4被隐藏，则数据集4将不被填充