Chart.js/react-chartjs-2 堆叠柱状图如何实现分层而非数值累加

问题原因 #

当前同栈柱高累加为70的核心原因是：Chart.js默认开启stacked: true时，同栈数据集会沿y轴向上堆叠，后绘制的柱形以前一个柱形的顶部为起始点，总高度为同栈所有数据集数值之和，不符合分层重叠的需求。

实现方案 #

不需要依赖默认堆叠逻辑，通过3项配置即可实现「同x位置柱形分层重叠、柱高按各自数据集数值独立计算、总高取最高柱数值」的效果：

• 关闭x、y轴的stacked配置，同时将x轴的grouped设为false：前者禁用默认累加堆叠逻辑，后者关闭同类别柱并排排列的默认行为，让同x位置的所有柱形居中对齐
• 给两个数据集设置相同的barPercentage和categoryPercentage值为1，让两个柱形宽度完全一致，在同一x坐标位置完全重合
• 通过order属性控制绘制层级：order值越小的数据集越先绘制（处于下层），值越大越后绘制（处于上层）

修改后可直接运行的代码 #

<Bar
    options={{
        plugins: {
            legend: {
                display: false,
            },
        },
        responsive: true,
        scales: {
            x: {
                stacked: false,
                grouped: false,
                grid: {
                    display: false,
                },
                ticks: {
                    font: { size: 12 },
                },
            },
            y: {
                stacked: false,
                beginAtZero: true,
                grid: {
                    borderDash: [2, 2],
                    color: '#e8e8e8',
                },
                ticks: {
                    font: { size: 12 },
                    count: 3,
                },
            },
        },
    }}
    data={{
        labels: week.map(day => day.format('MMM D')),
        datasets: [
            {
                label: 'Test 3',
                data: [50, 50, 50, 50, 50],
                backgroundColor: 'blue',
                barPercentage: 1,
                categoryPercentage: 1,
                order: 2
            },
            {
                label: 'Test 4',
                data: [20, 24, 60, 90, 50],
                backgroundColor: 'green',
                barPercentage: 1,
                categoryPercentage: 1,
                order: 1
            },
        ],
    }}
/>

效果说明 #

• 第一列柱形：绿色Test4高度为20（从y=0到y=20），蓝色Test3高度为50（从y=0到y=50），总柱高为50，完全符合预期
• 当Test4数值大于Test3时（比如第三列60、第四列90），超出50的绿色部分会自动显示在蓝色柱上方，不需要额外处理
• 如果需要调整上下层顺序，只需要交换两个数据集的order值即可

如果需要上层柱不完全遮挡下层柱，可以给上层柱的backgroundColor设置透明度，比如backgroundColor: 'rgba(0,0,255,0.7)'，即可透出下层的绿色柱

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