当前位置: 首页 > 文档资料 > Chart.js 开发文档 >

1.5.9 区域图(area

优质
小牛编辑
128浏览
2023-12-01

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

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

填充模式

模式类型
绝对数据集索引 1Number1, 2, 3, ...
相对数据集索引 1String'-1', '-2', '+1', ...
边界 2String'start', 'end', 'origin'
禁用 3Booleanfalse

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

示例

new Chart(ctx, {
    data: {
        datasets: [
            {fill: 'origin'},      // 0: fill to 'origin'
            {fill: '+2'},          // 1: fill to dataset 3
            {fill: 1},             // 2: fill to dataset 1
            {fill: false},         // 3: no fill
            {fill: '-2'}           // 4: fill to dataset 2
        ]
    }
})

配置

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

propagate

Boolean (默认值: true)

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

示例

new Chart(ctx, {
    data: {
        datasets: [
            {fill: 'origin'},   // 0: fill to 'origin'
            {fill: '-1'},       // 1: fill to dataset 0
            {fill: 1},          // 2: fill to dataset 1
            {fill: false},      // 3: no fill
            {fill: '-2'}        // 4: fill to dataset 2
        ]
    },
    options: {
        plugins: {
            filler: {
                propagate: true
            }
        }
    }
})

propagate: true:

  • 如果数据集2被隐藏,则数据集4将填充到数据集1
  • 如果数据集2和1被隐藏,则数据集4将填充到'origin'

propagate: false:

  • 如果数据集2和/或4被隐藏,则数据集4将不被填充