Chart.js混合阶梯线堆叠柱图 阶梯线对齐柱首配置方法

直接修改3处配置即可实现需求，同时规避柱体半显、阶梯线首尾截断的问题：

• 将折线数据集的stepped参数从'middle'改为true（即before模式，阶梯跳变触发在数据点前方位置）
• 为阶梯线单独绑定一个隐藏的线性x轴，关闭轴偏移让点位对齐刻度线，手动设置轴范围匹配柱体整体宽度
• 阶梯线数据改用带x/y坐标的对象格式，将每个点位对齐到对应柱体的左起始边缘，补充末尾点位让最后一段阶梯覆盖完整柱宽

修改后完整代码 #

function createBarChart() {
        const ctx = document.getElementById('myChart');
        const labels = ['1', '2', '3', '4', '5', '6'];
        const lineRawData = [18, 19, 16, 12, 13, 11];
        // 构造对齐柱左边缘的折线点位：单柱宽度占1个坐标单位，柱左边缘坐标为「分类索引-0.5」
        const linePoints = lineRawData.map((yVal, idx) => ({x: idx - 0.5, y: yVal}));
        // 追加末尾点位，保证最后一段阶梯覆盖最后一个柱的完整宽度
        linePoints.push({x: labels.length - 0.5, y: lineRawData.at(-1)});

        const myChart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: labels,
                datasets: [
                    {
                        type: 'line',
                        label: 'Dataset 1',
                        data: linePoints,
                        borderColor: 'rgb(54, 162, 235)',
                        fill: false,
                        radius: 0,
                        stepped: true,
                        xAxisID: 'xLine'
                    },
                    {
                        type: 'bar',
                        label: 'Label 2',
                        data: [9.35, 8.35, 8.56, 6.46, 5.04, 3.15],
                        barPercentage: 1.0,
                        categoryPercentage: 1.0,
                        backgroundColor: ['#71797E'],
                        borderColor: ['#000000'],
                        borderWidth: 1
                    },
                    {
                        type: 'bar',
                        label: 'Label 3',
                        data: [20.34, 17.31, 16.39, 13.48, 11.29, 11.23],
                        barPercentage: 1.0,
                        categoryPercentage: 1.0,
                        backgroundColor: ['#A9A9A9'],
                        borderColor: ['#000000'],
                        borderWidth: 1
                    },
                    {
                        type: 'bar',
                        label: 'Label 4',
                        data: [20.40, 18.57, 16.96, 14.19, 12.68, 11.98],
                        barPercentage: 1.0,
                        categoryPercentage: 1.0,
                        backgroundColor: ['rgba(46, 142, 201, 0.2)'],
                        borderColor: ['rgba(61, 61, 60, 1)'],
                        borderWidth: 1
                    },
                ]
            },
            options: {
                scales: {
                    x: {
                        stacked: true,
                        // 柱体使用的主x轴保持默认offset:true，禁止修改，避免柱体偏移半显
                    },
                    xLine: {
                        type: 'linear',
                        position: 'bottom',
                        offset: false,
                        display: false,
                        min: -0.5,
                        max: labels.length - 0.5,
                        grid: {
                            drawOnChartArea: false
                        }
                    },
                    y: {
                        stacked: false
                    }   
                }
            }
        })
    }

实现效果说明 #

• 堆叠柱保持无间隙排布，首尾柱体完整显示，无半切问题
• 阶梯线的垂直跳变位置刚好对齐两个柱体的交界线，每段水平阶梯完全覆盖对应柱体的整个宽度
• 阶梯线首尾完整展示，无画布边缘截断问题

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