Highcharts多Y轴系列点击时如何识别被点击的对应系列？

在多Y轴的Highcharts图表中，直接使用chart的click事件无法准确识别点击的是哪个系列的数据点，推荐通过以下两种方式解决：

方案一：监听系列数据点的点击事件（推荐） #

直接为所有系列的点绑定点击事件，点击时可直接获取对应的数据点和所属系列，精准度更高。

修改后的完整代码：

// 创建图表
Highcharts.chart('container', {
    chart: {
        type: 'line'
    },
    yAxis: [
        { min: 1, max: 3, height: '40%' },
        { height: '60%', top: '40%' }
    ],
    plotOptions: {
        series: {
            point: {
                events: {
                    click: function() {
                        // 当前点击的数据点对象
                        const currentPoint = this;
                        // 所属系列
                        const targetSeries = currentPoint.series;
                        // 绑定的Y轴
                        const targetYAxis = currentPoint.yAxis;

                        // 创建提示标签
                        const label = currentPoint.chart.renderer.label(
                            `系列: ${targetSeries.name || '系列' + targetSeries.index}, x: ${Highcharts.numberFormat(currentPoint.x, 2)}, y: ${Highcharts.numberFormat(currentPoint.y, 2)}`,
                            currentPoint.plotX + currentPoint.chart.plotLeft,
                            currentPoint.plotY + currentPoint.chart.plotTop
                        )
                        .attr({
                            fill: targetSeries.color,
                            padding: 10,
                            r: 5,
                            zIndex: 8
                        })
                        .css({
                            color: '#FFFFFF'
                        })
                        .add();

                        // 1秒后隐藏标签
                        setTimeout(() => {
                            label.fadeOut();
                        }, 1000);
                    }
                }
            }
        }
    },
    series: [
        {
            yAxis: 0,
            name: '顶部系列',
            data: [2,2,2,2,2,2,2,2]
        },
        {
            yAxis: 1,
            name: '底部系列',
            data: [2.9, 3.5, 106.4, 129.2, 1.0, 4.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
        }
    ]
});

关键说明： #

• 通过plotOptions.series.point.events.click统一配置所有系列的点点击事件，无需逐个系列设置。
• 事件回调中，this直接指向当前点击的数据点，可通过this.series获取所属系列，this.yAxis获取绑定的Y轴。
• 用this.plotX + this.chart.plotLeft和this.plotY + this.chart.plotTop定位标签，确保标签显示在点击的点附近。
• 标签背景色使用对应系列的颜色，视觉上更统一。

方案二：监听图表点击事件（兼容空白区域点击场景） #

如果需要处理图表空白区域的点击，可保留chart的click事件，通过event.point判断是否点击到数据点：

// 创建图表
Highcharts.chart('container', {
    chart: {
        type: 'line',
        events: {
            click: function(event) {
                // 仅当点击到数据点时处理
                if (event.point) {
                    const targetSeries = event.point.series;
                    const label = this.renderer.label(
                        `系列: ${targetSeries.name || '系列' + targetSeries.index}, x: ${Highcharts.numberFormat(event.point.x, 2)}, y: ${Highcharts.numberFormat(event.point.y, 2)}`,
                        event.point.plotX + this.plotLeft,
                        event.point.plotY + this.plotTop
                    )
                    .attr({
                        fill: targetSeries.color,
                        padding: 10,
                        r: 5,
                        zIndex: 8
                    })
                    .css({
                        color: '#FFFFFF'
                    })
                    .add();

                    setTimeout(() => {
                        label.fadeOut();
                    }, 1000);
                }
            }
        }
    },
    yAxis: [
        { min: 1, max: 3, height: '40%' },
        { height: '60%', top: '40%' }
    ],
    series: [
        {
            yAxis: 0,
            name: '顶部系列',
            data: [2,2,2,2,2,2,2,2]
        },
        {
            yAxis: 1,
            name: '底部系列',
            data: [2.9, 3.5, 106.4, 129.2, 1.0, 4.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
        }
    ]
});

关键说明： #

• 点击图表空白区域时event.point为undefined，仅当点击到数据点时才会触发后续逻辑。
• 通过event.point.series获取点击点所属的系列，同样能实现多Y轴系列的识别。

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