面積圖

折線圖和雷達圖都支援資料集物件上的 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
        ]
    }
});

如果您需要在從一個資料集填充到另一個資料集時支援多種顏色，您可以指定具有以下選項的物件

參數	類型	描述
target	數字、字串、布林值、物件	接受的值與填充模式值相同，因此您可以使用絕對和相對資料集索引和/或邊界。
above	顏色	如果未設定顏色，則預設顏色將為圖表的背景顏色。
below	顏色	與上述相同。

具有多種顏色的範例

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	字串	beforeDatasetDraw	填充器繪製時間。支援的值：'beforeDraw'、'beforeDatasetDraw'、'beforeDatasetsDraw'
propagate	布林值	true	目標隱藏時的填充傳播。

propagate

propagate 接受一個 boolean 值（預設值：true）。

如果為 true，則填充區域將遞迴擴展到隱藏資料集目標的 fill 值定義的可見目標

使用 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: false： - 如果資料集 2 和/或 4 被隱藏，則不會填充資料集 4