如何为Highcharts堆叠条形图添加背景阴影？

嘿，刚好之前做过类似的需求，给你分享几个亲测有效的实现方法，帮你给Highcharts堆叠条形图加上背景阴影：

这个方法适合给每个分类的条形区域统一加阴影，不用动系列配置，直接在y轴上设置就行：

yAxis: {
    categories: ['分类A', '分类B', '分类C'],
    plotBands: [
        // 给第一个分类加阴影背景
        {
            from: -0.5, // 对应分类的起始位置（每个分类的中心是整数，范围是n-0.5到n+0.5）
            to: 0.5,
            color: 'rgba(0,0,0,0.03)', // 浅灰色背景，可选
            shadow: {
                color: 'rgba(0,0,0,0.2)',
                offsetX: 3,
                offsetY: 3,
                opacity: 0.5,
                width: 5
            }
        },
        // 第二个分类
        {
            from: 0.5,
            to: 1.5,
            color: 'rgba(0,0,0,0.03)',
            shadow: {
                color: 'rgba(0,0,0,0.2)',
                offsetX: 3,
                offsetY: 3,
                opacity: 0.5,
                width: 5
            }
        },
        // 第三个分类同理
        {
            from: 1.5,
            to: 2.5,
            color: 'rgba(0,0,0,0.03)',
            shadow: {
                color: 'rgba(0,0,0,0.2)',
                offsetX: 3,
                offsetY: 3,
                opacity: 0.5,
                width: 5
            }
        }
    ]
}

优点是配置简单，不需要额外的事件监听，缺点是阴影是固定宽度的，不会跟着堆叠条的实际长度变化。

如果想要阴影完美匹配每个堆叠条的实际宽度，推荐用Highcharts的renderer来绘制自定义阴影，步骤如下：

chart: {
    type: 'bar',
    events: {
        render: function() {
            const chart = this;
            // 先清除之前的阴影，避免重复绘制
            if (chart.customShadow) {
                chart.customShadow.destroy();
            }
            // 遍历第一个系列的点（因为堆叠组是绑定在第一个系列的点上的）
            chart.series[0].points.forEach(point => {
                const stackGroup = point.dataGroup;
                if (stackGroup) {
                    // 获取堆叠条的位置和尺寸
                    const bbox = stackGroup.getBBox();
                    // 绘制带阴影的矩形
                    chart.customShadow = chart.renderer.rect(bbox.x, bbox.y, bbox.width, bbox.height)
                        .attr({
                            fill: 'transparent', // 只留阴影，背景透明
                            stroke: 'none',
                            shadow: {
                                color: 'rgba(0,0,0,0.3)',
                                offsetX: 4,
                                offsetY: 4,
                                width: 6,
                                opacity: 0.6
                            }
                        })
                        .add()
                        .toBack(); // 把阴影放到所有条形的后面，避免遮挡
                }
            });
        }
    }
}

这个方法会在图表每次渲染（比如缩放、数据更新）时重新绘制阴影，完全贴合堆叠条的形状，视觉效果最好。

如果每个堆叠分段都需要自己的阴影，可以直接在系列配置里开启shadow：

series: [{
    name: '系列1',
    data: [12, 34, 56],
    stack: 'total',
    shadow: {
        color: 'rgba(0,0,0,0.2)',
        offsetX: 2,
        offsetY: 2,
        width: 3
    }
}, {
    name: '系列2',
    data: [23, 45, 67],
    stack: 'total',
    shadow: {
        color: 'rgba(0,0,0,0.2)',
        offsetX: 2,
        offsetY: 2,
        width: 3
    }
}]

不过这种方式的阴影会互相重叠，视觉上可能有点乱，适合分段颜色差异大、需要单独突出每个部分的场景。

你可以根据自己的需求选对应的方法，要是调整阴影样式的话，直接修改shadow配置里的color、offsetX/Y、width、opacity这些参数就行~

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