面积图

折线图 和 雷达图 都支持数据集对象中的 fill 选项，该选项可用于在两个数据集之间或数据集与边界（即刻度 origin、start 或 end）之间创建空间，（参见 填充模式）。

注意

此功能由 filler 插件 (在新窗口中打开) 实现。

填充模式

模式	类型	值
绝对数据集索引	数字	1, 2, 3, ...
相对数据集索引	字符串	'-1', '-2', '+1', ...
边界	字符串	'start', 'end', 'origin'
禁用 1	布尔值	false
堆叠值以下	字符串	'stack'
坐标轴值	对象	{ value: 数字; }
形状（在直线内填充）	字符串	'shape'

¹ 为了向后兼容，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
            {fill: {value: 25}}    // 5: fill to axis value 25
        ]
    }
});

如果需要在从一个数据集到另一个数据集填充时支持多种颜色，可以指定具有以下选项的对象

参数	类型	描述
目标	数字, 字符串, 布尔值, 对象	接受的值与填充模式值相同，因此可以使用绝对和相对数据集索引和/或边界。
以上	颜色	如果没有设置颜色，则默认颜色将是图表的背景颜色。
以下	颜色	与以上相同。

带有多种颜色的示例

new Chart(ctx, {
    data: {
        datasets: [
            {
              fill: {
                target: 'origin',
                above: 'rgb(255, 0, 0)',   // Area will be red above the origin
                below: 'rgb(0, 0, 255)'    // And blue below the origin
              }
            }
        ]
    }
});

配置

命名空间：options.plugins.filler

选项	类型	默认值	描述
绘制时间	字符串	beforeDatasetDraw	填充绘制时间。支持的值：'beforeDraw', 'beforeDatasetDraw', 'beforeDatasetsDraw'
传播	布尔值	true	当目标隐藏时填充传播。

传播

propagate 接受一个 布尔值（默认：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 将不会填充