如何在Highcharts气泡图中为X轴与Y轴添加注释文本？

• 分割线注释（即SEC Avg、SEC Average这类标注）直接通过plotLines.label配置实现，完全不需要自定义逻辑
• 你当前代码里X轴分割线的label被注释，同时zIndex设为-1会导致线和标注被网格遮挡，直接修正即可
• 如需添加轴两端的自定义说明文字（比如X轴的低/高干扰注释、Y轴的需求变化说明），用原生annotations模块配置即可，无需手动计算像素坐标

修正后的核心配置 #

let chart = Highcharts.chart('bubble_chart', {
    chart: {
        type: 'bubble',
        zoomType: 'xy'
    },
    title: { text: "" },
    xAxis: {
        title: {
            text: "106. How disruptive has the COVID-19 pandemic been to your ability to do your work?"
        },
        plotLines: [{
            value: 4,
            color: 'darkgray',
            dashStyle: 'shortdash',
            width: 2,
            valueDecimals: 2,
            // 放开并调整X轴分割线注释样式
            label: {
                text: 'SEC Avg',
                verticalAlign: 'top',
                y: -10 // 微调上下偏移，避免和轴标题重叠
            },
            zIndex: 2 // 修正原-1的层级问题，避免被网格遮挡
        }],
    },
    yAxis: {
        title: {
            text: "107. How has your work demands changed because of the COVID-19 pandemic?"
        },
        plotLines: [{
            value: 2.5,
            color: 'darkgray',
            dashStyle: 'shortdash',
            width: 2,
            label: {
                text: 'SEC Average',
                verticalAlign: 'bottom',
                y: 10 // 微调偏移，和X轴注释对齐
            },
            zIndex: 2
        }]
    },
    // 自定义轴注释配置，按需增删label即可
    annotations: [{
        labels: [
            // X轴左侧低干扰注释
            {
                point: { x: 1, y: 1 },
                text: "低干扰",
                style: { color: '#666' }
            },
            // X轴右侧高干扰注释
            {
                point: { x: 5, y: 1 },
                text: "高干扰",
                style: { color: '#666' }
            },
            // Y轴竖排注释示例
            {
                point: { x: 0.5, y: 5 },
                text: "高需求上涨",
                style: { color: '#666', rotation: 90 }
            }
        ]
    }],
    credits: {enabled: false},
    tooltip: {
        useHTML: true,
        headerFormat: '',
        pointFormat:  '<strong>{point.org}</strong><br/>' +
                      'Respondents: <b>{point.z}</b><br/>' +
                      'X-Question Avg: <b>{point.x}</b><br/>' +
                      'Y-Question Avg: <b>{point.y}</b>',
        footerFormat: '',
        valueDecimals: 1
    },
    
    series: [{
        name: groups[0],
        color: Highcharts.getOptions().colors[0],
        data: []
    }, {
        name: groups[1],
        color: Highcharts.getOptions().colors[1],
        data: []
    }, {
        name: groups[2],
        color: Highcharts.getOptions().colors[2],
        data: []
    }]
});

微调说明 #

• 所有注释的位置偏移可通过x/y参数调整，单位为px
• 若注释被气泡遮挡，给对应label加zIndex: 10即可拉高层级
• 以上配置均为Highcharts原生支持，无需额外引入插件

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