Chart.js柱状图动态堆叠与取消堆叠切换异常排查

问题原因 #

你将数据集的stack设为undefined时，Chart.js并未正确清除该属性的影响，导致切换回并列状态时逻辑异常。另外，x轴的stacked配置需要和数据集的stack属性配合才能正常工作。

修复步骤 #

1. 正确处理数据集的stack属性 #

不要用undefined重置stack，而是直接删除该属性，或者给不同数据集设置唯一的stack值（比如各自的名称），这样Chart.js会将它们视为独立分组，实现并列显示。

2. 优化图表更新逻辑 #

修改你的useEffect代码如下：

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

    if (barStack) {
        // 堆叠模式：给目标数据集设置相同stack标识
        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 {
        // 并列模式：删除stack属性，或设置不同的唯一值
        delete myChart.data.datasets[1].stack;
        delete myChart.data.datasets[2].stack;
        // 也可以用不同stack值替代删除：
        // myChart.data.datasets[1].stack = "dataset-1";
        // myChart.data.datasets[2].stack = "dataset-2";
        myChart.data.datasets[1].barPercentage = 0.5;
        myChart.data.datasets[2].barPercentage = 1;
    }

    // 强制更新图表，确保配置生效
    myChart.update('none'); // 使用无过渡模式，避免动画干扰调试
}, [myChart, barStack]);

3. 确认轴配置的一致性 #

保持x轴stacked: true，这是实现堆叠/并列切换的基础（无共同stack的数据集会自动并列）。如果y轴也需要同步堆叠状态，可添加对应配置：

options: {
    scales: {
        x: {
            stacked: true,
        },
        y: {
            stacked: barStack, // y轴随切换状态同步堆叠/非堆叠，不需要则设为false
        }
    }
}

验证效果 #

• 初始barStack=false：数据集无stack属性，x轴stacked=true，图表正常并列。
• 切换barStack=true：数据集共享同一stack，图表堆叠显示。
• 切回barStack=false：stack属性被删除，图表恢复并列状态。

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