教程 > Chart.js 中文教程 > Chart.js 图表类型 阅读：305

Chart.js 面积图

折线图和雷达图都支持数据集对象上的填充选项，可用于在两个数据集或数据集和边界之间创建空间，即比例原点、开始或结束（参见填充模式）。

注意 ：此功能由填充插件实现。

填充方式

模式 类型 值
绝对数据集索引 number 1, 2, 3, ...
相对数据集索引 string '-1', '-2', '+1', ...
边界 string 'start', 'end', 'origin'
已禁用 boolean false
下面的堆积值 string 'stack'
轴值 object { value: number; }
形状（填充内线） string '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
        ]
    }
});

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

参数 类型 描述
target number, string, boolean, object 接受的值与填充模式值相同，因此我们可以使用绝对和相对数据集索引和/或边界。
above Color 如果未设置颜色，则默认颜色将是图表的背景颜色。
below Color 与上述相同。

具有多种颜色的示例

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

选项 类型 默认值 描述
drawTime string beforeDatasetDraw 填充绘制时间。 支持的值：'beforeDraw'、'beforeDatasetDraw'、'beforeDatasetsDraw'
propagate boolean true 隐藏目标时填充传递。

传递

传播采用布尔值（默认值：true）。

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

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 将填充到“原点”

propagate：false ：-如果数据集 2 和/或 4 被隐藏，则不会填充数据集 4

查看笔记

扫码一下
查看教程更方便