Chart.js绘制反向柱状图：如何实现堆叠并设置Y轴两端为正数？

嘿，我来帮你搞定这两个问题！下面是针对你需求的具体调整方案，直接套用就能解决：

1. 开启蓝色与红色柱状图的堆叠模式 #

因为你用的是反向柱状图（横向），所以堆叠设置要对应到数值轴（也就是X轴），同时给每个数据集指定同一个堆叠组：

• 在options.scales.x里设置stacked: true，同时Y轴也需要开启stacked: true保证类别对齐
• 给两个数据集都加上stack: 'combined'（名字随便取，只要一致就行），让它们归到同一个堆叠组

2. 让X轴（你说的Y轴两端）显示正数 #

这里应该是指横向柱状图的左右两侧都显示正数，而不是一边正一边负。我们可以通过两个步骤实现：

• 把其中一个数据集的数值转为负数（比如红色系列），这样它会向左侧延伸
• 在X轴的刻度回调里，把所有刻度值转为绝对值，这样不管正负都显示正数

完整代码示例 #

const ctx = document.getElementById('yourChartId').getContext('2d');
const myReverseStackedChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['类别A', '类别B', '类别C'], // 你的Y轴类别标签
        datasets: [
            {
                label: '红色系列',
                data: [-12, -28, -19], // 转成负数，向左堆叠
                backgroundColor: '#e74c3c',
                stack: 'main-stack' // 统一堆叠组名
            },
            {
                label: '蓝色系列',
                data: [18, 32, 25], // 正数向右堆叠
                backgroundColor: '#3498db',
                stack: 'main-stack'
            }
        ]
    },
    options: {
        indexAxis: 'y', // 开启反向（横向）柱状图
        scales: {
            x: {
                stacked: true, // 启用X轴堆叠
                ticks: {
                    // 回调函数：把刻度值转为绝对值，只显示正数
                    callback: function(value) {
                        return Math.abs(value);
                    }
                },
                // 可选：手动设置X轴范围，确保正负方向都有足够空间
                min: -35,
                max: 35
            },
            y: {
                stacked: true // Y轴开启堆叠，保证类别对齐
            }
        }
    }
});

额外小提示 #

如果你的原始数据都是正数，不想手动改负数，可以用数组映射自动转换：

// 假设originalRedData是你的红色系列原始正数数组
data: originalRedData.map(num => -num)

这样调整后，你就能得到堆叠的反向柱状图，而且左右两侧的刻度都是正数啦！

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