Chart.js手动控制柱状图分组：如何将指定柱状图移至目标分组

我完全理解你想要把Cash柱状图从当前独立分组移到Checkout 2分组下，和Apple Pay、Google Pay堆叠在一起的需求，其实只需要调整两个关键属性就能轻松实现：

核心修改思路 #

• 让Cash数据集的stack属性和Checkout 2分组的其他数据集保持一致（也就是"Two"），这样Chart.js会自动把它们归为同一堆叠组
• 调整Cash的data数组，把数值放到对应Checkout 2的位置（数组第二个元素的位置），同时给不需要显示的位置设为0

修改后的完整代码 #

var data = [ 
    { label: "Android", type: "bar", stack: "One", backgroundColor: "#F6AC74", data: [4, 0] }, 
    { label: "iOS", type: "bar", stack: "One", backgroundColor: "#9FA0EF", data: [6, 0] }, 
    { label: "Web", type: "bar", stack: "One", backgroundColor: "#F495C6", data: [14, 0] }, 
    { label: "Apple Pay", type: "bar", stack: "Two", backgroundColor: "#AEE9DD", data: [0, 6] }, 
    { label: "Google Pay", type: "bar", stack: "Two", backgroundColor: "#D3F284", data: [0, 14] }, 
    { label: "Cash", type: "bar", stack: "Two", backgroundColor: "#65C2F8", data: [0, 4] } 
]; 

$scope.AdvancedMethodStackedBarChart = new Chart(document.getElementById("advPaymentMethodChart"), { 
    type: 'bar', 
    data: { labels: ["Checkout 1", "Checkout 2"], datasets: data }, 
    options: { 
        legend: { display: false }, 
        scales: { 
            xAxes: [{ stacked: true, ticks: { beginAtZero: true, maxRotation: 0, minRotation: 0 } }], 
            yAxes: [{ stacked: true }] 
        }, 
        title: { display: false } 
    } 
});

细节说明 #

1. 分组归属调整：把Cash的stack值从"Three"改为"Two"，直接让它加入Checkout 2的堆叠分组
2. 数据位置匹配：
   • Checkout 1分组的三个数据集（Android、iOS、Web）补充了第二个数据项0，表示它们在Checkout 2下无数据
   • Checkout 2分组的三个数据集（Apple Pay、Google Pay、Cash）把第一个数据项设为0，表示它们在Checkout 1下无数据
   • 把Cash的数值4放到数组第二个位置，精准对应Checkout 2的标签位置

修改后，Cash就会完美堆叠在Checkout 2分组下，和Apple Pay、Google Pay组成该分组的堆叠柱状图，同时Checkout 1分组的原有堆叠效果也会保留。

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