如何使用chart.js动态堆叠和取消堆叠条形图

Question

我有一个条形图，我想在其中切换条形是否堆叠或在彼此后面。

注意 x 轴堆叠在一起。

    useEffect(() => {
        if (!myChart) return;

        if (barStack)
        {
            myChart.data.datasets[1].stack = "barstack";
            myChart.data.datasets[2].stack = "barstack";
            myChart.data.datasets[1].barPercentage = 1;
            myChart.data.datasets[2].barPercentage = 1;
        } else
        {
            myChart.data.datasets[1].stack = undefined;
            myChart.data.datasets[2].stack = undefined;
            myChart.data.datasets[1].barPercentage = 0.5;
            myChart.data.datasets[2].barPercentage = 1;
        }

        myChart.update();

    }, [myChart, barStack]);

options: {
    scales: {
        x: {
            stacked: true,
            },

首次加载页面时，它会正常工作

barStack = false

当我切换到堆叠它时，它也可以工作

但是当我想拆开它时，它就不再起作用了。

这里可能出了什么问题？

使用不同的堆栈或将 stacked 设置为 false 没有影响

Answer 1

您还必须使用

y

缩放

stacked

属性：在重叠模式下，您必须设置它

false

并在 堆叠模式应该是

true

。这是一个正在使用的示例：

const data = {
    labels: ['2024', '2025', '2026', '2027'],
    datasets: [
        {
            label: 'Dataset 1',
            data: Array.from({length: 4}, () => 10 +  Math.random() * 10),
            backgroundColor: 'rgba(92, 128, 255, 0.75)',
            barPercentage: 0.5
        },
        {
            label: 'Dataset 2',
            data: Array.from({length: 4}, () => 10 + Math.random() * 10),
            backgroundColor: 'rgba(92, 128, 255, 0.5)',
            barPercentage: 1
        }
    ]
};

const config = {
    type: 'bar',
    data: data,
    options: {
        responsive: true,
        scales:{
            x:{
                stacked: true
            },
            y:{
                stacked: false
            }
        },
        plugins: {
            legend: {
                display: false
            }
        }
    },
};

const myChart = new Chart(document.querySelector('#myChart'), config);


document.querySelector('#stack').onclick = function(e){
    if(e.target.innerText === 'Stack'){
        e.target.innerText = 'Unstack';
        myChart.scales.y.options.stacked = true;
        myChart.data.datasets[0].barPercentage = 1;
        myChart.data.datasets[0].stack = "barstack";
        myChart.data.datasets[1].stack = "barstack";
    }
    else{
        e.target.innerText = 'Stack';
        myChart.scales.y.options.stacked = false;
        myChart.data.datasets[0].barPercentage = 0.5;
        // assigning undefined also happens to work
        delete myChart.data.datasets[0].stack;// = undefined;
        delete myChart.data.datasets[1].stack;// = undefined;
    }
    myChart.update();
}

<button id="stack">Stack</button>
<div style="min-height: 60vh">
    <canvas id="myChart">
    </canvas>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.umd.min.js"></script>

在您的原始代码中，在数据集上设置

stack

后，您似乎没有堆叠条形图，但它们是 仍然重叠，但条形宽度相等。

事实上，您的原始代码不起作用，导致在删除数据集的

stack

属性后，条形图堆积起来 并且

y

轴没有将

stacked

设置为

true

（它是

undefined

）可能被认为是一个小错误 Chart.js - 它来自这样一个事实：在更新中，元集属性

_stacked

是根据之前的计算得出的，

.stack

属性的未更新值。这个问题可以通过上面的解决方案轻松解决，即适当设置 y 缩放

stacked

属性。这是错误的代码，每个代码后面都会显示

_stacked

和

stack

属性 更新。

const data = {
    labels: ['2024', '2025', '2026', '2027'],
    datasets: [
        {
            label: 'Dataset 1',
            data: Array.from({length: 4}, () => 10 +  Math.random() * 10),
            backgroundColor: 'rgba(92, 128, 255, 0.75)',
            barPercentage: 0.5
        },
        {
            label: 'Dataset 2',
            data: Array.from({length: 4}, () => 10 + Math.random() * 10),
            backgroundColor: 'rgba(92, 128, 255, 0.5)',
            barPercentage: 1
        }
    ]
};

const config = {
    type: 'bar',
    data: data,
    options: {
        responsive: true,
        scales:{
            x:{
                stacked: true
            },
            y:{
                //stacked: false
            }
        },
        plugins: {
            legend: {
                display: false
            }
        }
    },
};

const myChart = new Chart(document.querySelector('#myChart'), config);


document.querySelector('#stack').onclick = function(e){
    if(e.target.innerText === 'Stack'){
        e.target.innerText = 'Unstack';
        //myChart.scales.y.options.stacked = true;
        myChart.data.datasets[0].barPercentage = 1;
        myChart.data.datasets[0].stack = "barstack";
        myChart.data.datasets[1].stack = "barstack";
    }
    else{
        e.target.innerText = 'Stack';
        //myChart.scales.y.options.stacked = false;
        myChart.data.datasets[0].barPercentage = 0.5;
        // assigning undefined also happens to work
        delete myChart.data.datasets[0].stack;// = undefined;
        delete myChart.data.datasets[1].stack;// = undefined;
    }
    myChart.update();
    // to prove the bug described in the text
    console.log("_stacked:",myChart.getDatasetMeta(0)._stacked, "stack:", myChart.getDatasetMeta(0).stack)
}

<button id="stack">Stack</button>
<div style="height: 60vh">
    <canvas id="myChart">
    </canvas>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.umd.min.js"></script>