Chartjs 4 - 填充堆积线和条形图之间的区域

Question

我正在迁移到 Chart.js 4.4.1，在之前的版本 (2.9.4) 中，我能够使用附图中的颜色填充空白。

在最新版本中，我可以通过使用不透明度来接近，但它并不完全相同：

关于如何实现这一点有什么想法吗？我正在使用非模块 JavaScript Chartjs 文件。

请参阅下面我的测试代码。

<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>

Answer 1

我认为 2.9.4 的行为不稳定，在 底部和顶部的线？

我能想到的复制该行为的唯一方法是复制 线数据集，即第一层有一个用于填充（

order

= 0） 另一个用于顶部的线和点 (

order

= 2)。这可以是 在不复制实际数据集对象文字的情况下完成，在

update

到

chart

：

const chart = new Chart(document.getElementById("my-chart"), config);
const dataset1 = chart.data.datasets[1];
chart.data.datasets.push({
    ...dataset1,
    data: [...dataset1.data],
    label: '', // we'll disable the legend and tooltip for datasets with empty labels
    order: 2,
    fill: true
}) 
chart.update();

必须附带一些代码来排除重复的数据集 来自工具提示和图例；我们将通过其空标签来识别该数据集；这是完整的片段：

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: "#979c6a", //"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: false,
                drawActiveElementsOnTop: true,
                pointBackgroundColor: "#ffffff",
                pointRadius: 5,
                order: 0
            }

        ]
    },
    options: {
        scales: {
            x: {
                grid: {
                    display: false
                }
            },
            y: {
                stacked: false,
                scaleLabel: {
                    display: false
                },
                ticks: {
                    callback: function(value, index, ticks) {
                        return ("$" + (value/1000000));
                    }
                }
            }
        },
        plugins: {
            tooltip: {
                intersect: true,
                callbacks: {
                    label: function(context) {
                        if(!context.dataset.label){
                            return null
                        }
                        return ("$" + context.parsed.y.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","));
                    }
                }
            },
            legend:{
                labels: {
                    filter({text}){
                        return !!text
                    }
                }
            }
        }
    }
};

const chart = new Chart(document.getElementById("my-chart"), config);
const dataset1 = chart.data.datasets[1];
chart.data.datasets.push({
    ...dataset1,
    data: [...dataset1.data],
    label: '',
    order: 2,
    fill: true,
})
chart.update();

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.js"></script>