如何为Highcharts实心仪表（Solid Gauge）添加背景边框阴影

针对多KPI实心仪表背景边框无阴影、轨迹辨识度低的问题，可以通过自定义SVG滤镜实现类似示例图的阴影效果，具体配置如下：

1. 定义SVG阴影滤镜 #

在图表的chart配置中添加defs，创建自定义阴影滤镜，可根据需求调整阴影的偏移、模糊度和透明度：

chart: {
    type: 'solidgauge',
    defs: {
        filter: [{
            id: 'gaugeShadow',
            tagName: 'filter',
            children: [{
                tagName: 'feDropShadow',
                attributes: {
                    dx: 0,          // 水平偏移
                    dy: 3,          // 垂直偏移
                    stdDeviation: 6,// 模糊程度
                    floodOpacity: 0.3, // 阴影透明度
                    floodColor: '#000' // 阴影颜色
                }
            }]
        }]
    }
}

2. 为背景轨迹绑定滤镜 #

在plotOptions.solidgauge.background中引用上述滤镜，同时设置背景基础样式：

plotOptions: {
    solidgauge: {
        background: {
            backgroundColor: '#e0e0e0',
            innerRadius: '80%',
            outerRadius: '100%',
            shape: 'arc',
            filter: 'url(#gaugeShadow)' // 绑定自定义阴影滤镜
        }
    }
}

3. 多KPI场景适配 #

如果是多系列实心仪表，可在每个系列的background配置中单独设置滤镜，或通过plotOptions统一配置，确保所有KPI的背景轨迹都带有阴影效果。

注：Highcharts自带的background.shadow: true属性生成的阴影效果较弱，自定义SVG滤镜能更精准匹配示例图的厚重阴影表现，解决背景过于透明的问题。

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