Chart.js 4.4.1：如何填充堆叠折线图与柱状图间的区域？

我正在迁移至Chart.js 4.4.1，旧版本2.9.4中可实现填充堆叠折线图与柱状图之间的区域，但在新版本中仅能通过透明度实现近似效果。现寻求实现旧版本效果的方案，我使用的是非模块化JavaScript版Chart.js，测试代码如下：

<canvas id="my-chart"></canvas>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.js"></script>
<script>
    
    let labels = [];
    for (let year=2000; year <= 2010; year++) {
        labels.push(year);
    }

    const config = {
        data: {
            labels: labels,
            datasets: [
                {
                    type: "bar",
                    label: "Product",
                    data: [1331320,2851137,5952127,6607851,11068289,12059067,12117998,11827962,16582836,20184478,23915606],
                    backgroundColor: "#bec38f",
                    order: 1
                },
                {
                    backgroundColor: "rgba(151,156,106,0.5)",// "#979c6a",
                    borderColor: "#826f68",
                    borderWidth: 3,
                    data: [1242306,2442693,5070218,5502960,8572948,7722718,6916448,7196356,10429229,12544283,15149568],
                    label: "Benchmark",
                    type: "line",
                    fill: true,
                    pointBackgroundColor: "#ffffff",
                    pointRadius: 5,
                    order: 0
                }
            ]
        },
        options: {
            scales: {
                x: {
                    grid: {
                        display: false
                    }
                },
                y: {
                    stacked: true,
                    scaleLabel: {
                        display: false
                    },
                    ticks: {
                        callback: function(value, index, ticks) {
                            return ("$" + (value/1000000));
                        }
                    }
                }
            },
            plugins: {
                tooltip: {
                    intersect: true,
                    callbacks: {
                        label: function(context) {
                            return ("$" + context.parsed.y.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","));
                        }
                    }
                }
            }
        }
    };

    new Chart(document.getElementById("my-chart"), config);

</script>

实现方案 #

Chart.js 4.x对fill选项的逻辑做了调整，默认折线图的fill: true会填充到坐标轴原点，而非下方的柱状图区域。要还原旧版效果，可通过以下两种方式修改：

方法1：直接指定填充目标数据集 #

修改折线数据集的fill配置为柱状图数据集的索引（此处柱状图是第0个数据集），同时设置不透明的填充颜色：

{
    backgroundColor: "#979c6a", // 替换为不透明的目标填充色
    borderColor: "#826f68",
    borderWidth: 3,
    data: [1242306,2442693,5070218,5502960,8572948,7722718,6916448,7196356,10429229,12544283,15149568],
    label: "Benchmark",
    type: "line",
    fill: 0, // 指定填充到索引为0的柱状图数据集上方
    pointBackgroundColor: "#ffffff",
    pointRadius: 5,
    order: 0
}

方法2：自定义填充区域规则 #

若需要更精细控制上下区域的填充样式，可使用fill的对象配置形式：

fill: {
    target: 0, // 目标数据集索引（柱状图）
    above: "#979c6a", // 折线在柱状图上方的填充颜色
    below: "transparent" // 折线在柱状图下方的区域设为透明
}

关键注意事项 #

• 保留y轴的stacked: true配置，保证坐标系逻辑与旧版一致
• 两种方法都能让填充区域精准对应柱状图与折线之间的空间，完全还原2.9.4版本的视觉效果

内容的提问来源于stack exchange，提问作者user1639283