面积图

¥Area Chart

line 和 radar 图表都支持数据集对象上的 fill 选项，可用于在两个数据集或数据集和边界之间创建空间，即比例 origin、start, 或 end（参见 填充模式）。

¥Both line and radar charts support a fill option on the dataset object which can be used to create space between two datasets or a dataset and a boundary, i.e. the scale origin, start, or end (see filling modes).

注意

该功能由 filler 插件 (opens new window) 实现。

¥This feature is implemented by the filler plugin (opens new window).

灌装方式

¥Filling modes

模式	类型	值
绝对数据集索引	number	1, 2, 3, ...
相对数据集索引	string	'-1', '-2', '+1', ...
边界	string	'start', 'end', 'origin'
Disabled 1	boolean	false
下面的堆叠值	string	'stack'
轴值	object	{ value: number; }
形状（填充内线）	string	'shape'

¹ 为了向后兼容，fill: true 相当于 fill: 'origin'

¥¹ for backward compatibility, fill: true is equivalent to fill: 'origin'

示例

¥Example

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
        ]
    }
});

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

¥If you need to support multiple colors when filling from one dataset to another, you may specify an object with the following option :

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

具有多种颜色的示例

¥Example with multiple colors

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
              }
            }
        ]
    }
});

配置

¥Configuration

命名空间：options.plugins.filler

¥Namespace: options.plugins.filler

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

propagate

propagate 采用 boolean 值（默认值：true）。

¥propagate takes a boolean value (default: true).

如果是 true，填充区域会递归扩展到隐藏数据集目标的 fill 值定义的可见目标：

¥If true, the fill area will be recursively extended to the visible target defined by the fill value of hidden dataset targets:

使用传播的示例

¥Example using propagate

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: true: -if dataset 2 is hidden, dataset 4 will fill to dataset 1 -if dataset 2 and 1 are hidden, dataset 4 will fill to 'origin'

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

¥propagate: false: -if dataset 2 and/or 4 are hidden, dataset 4 will not be filled