Highcharts实心仪表图：实现环形背景hover时显示Tooltip

解决方案 #

要实现hover环形灰色背景区域也显示对应系列的进度值（包括值为0的情况），核心是让每个系列的hover触发区域覆盖整个环形，而非仅填充部分。通过自定义Highcharts Solidgauge的tracker属性即可实现，同时配合tooltip格式化确保值为0时正确显示。

完整实现代码示例 #

Highcharts.chart('container', {
    chart: {
        type: 'solidgauge'
    },
    title: {
        text: '多环形进度仪表'
    },
    tooltip: {
        borderWidth: 0,
        backgroundColor: 'none',
        shadow: false,
        style: {
            fontSize: '16px'
        },
        formatter: function() {
            // 格式化tooltip，值为0时显示0%
            return `${this.series.name}: ${this.y}%`;
        },
        followPointer: true
    },
    pane: {
        startAngle: 0,
        endAngle: 360,
        background: [{
            outerRadius: '100%',
            innerRadius: '80%',
            backgroundColor: Highcharts.color(Highcharts.getOptions().colors[0])
                .setOpacity(0.1).get(),
            borderWidth: 0
        }, {
            outerRadius: '79%',
            innerRadius: '60%',
            backgroundColor: Highcharts.color(Highcharts.getOptions().colors[1])
                .setOpacity(0.1).get(),
            borderWidth: 0
        }, {
            outerRadius: '59%',
            innerRadius: '40%',
            backgroundColor: Highcharts.color(Highcharts.getOptions().colors[2])
                .setOpacity(0.1).get(),
            borderWidth: 0
        }]
    },
    yAxis: {
        min: 0,
        max: 100,
        lineWidth: 0,
        tickPositions: []
    },
    plotOptions: {
        solidgauge: {
            dataLabels: {
                enabled: false
            },
            // 自定义tracker，让hover触发区域覆盖整个环形
            tracker: {
                shape: 'circle',
                r: function() {
                    // 取当前系列对应的环形外半径
                    return this.series.yAxis.radius;
                },
                innerR: function() {
                    // 取当前系列对应的环形内半径
                    return this.series.yAxis.innerRadius;
                }
            }
        }
    },
    series: [{
        name: '系列1',
        data: [{
            y: 75,
            radius: '100%',
            innerRadius: '80%'
        }]
    }, {
        name: '系列2',
        data: [{
            y: 0, // 值为0的情况
            radius: '79%',
            innerRadius: '60%'
        }]
    }, {
        name: '系列3',
        data: [{
            y: 40,
            radius: '59%',
            innerRadius: '40%'
        }]
    }]
});

关键说明 #

• 自定义tracker：通过plotOptions.solidgauge.tracker将每个系列的hover触发区域设置为完整环形，覆盖灰色背景部分。r和innerR函数分别获取当前系列的外半径和内半径，确保tracker与环形区域完全匹配。
• Tooltip格式化：formatter函数直接返回系列名称和对应百分比，即使值为0也会显示「系列名称:0%」。
• 值为0的处理：即使系列值为0，tracker依然存在，hover对应环形的灰色背景时会正常触发tooltip。

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