如何在Highcharts中实现鼠标悬停时获取折线数据并展示

实现步骤 #

1. 在HTML中新增一个数据展示容器，放置在图表容器下方
2. 通过Highcharts的系列事件配置，监听鼠标悬停和离开动作，动态更新展示容器的内容

完整代码示例 #

HTML部分

<div id="container"></div>
<div id="data-display" style="margin-top:10px; padding:8px; background:#f5f5f5; border-radius:4px;"></div>

JavaScript部分

$(function () {
    const dataDisplay = $('#data-display');

    $('#container').highcharts({
        title: {
            text: '月平均气温',
            x: -20 // 居中
        },
        subtitle: {
            text: '数据来源: WorldClimate.com',
            x: -20
        },
        xAxis: {
            categories: ['1月', '2月', '3月', '4月', '5月', '6月',
                '7月', '8月', '9月', '10月', '11月', '12月']
        },
        yAxis: {
            title: {
                text: '气温 (°C)'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        plotOptions: {
            series: {
                mouseOver: function(e) {
                    const point = e.point;
                    const seriesName = this.name || `系列${this.index + 1}`;
                    const displayText = `${seriesName} - ${this.xAxis.categories[point.x]}: ${point.y} °C`;
                    dataDisplay.text(displayText);
                },
                mouseOut: function() {
                    dataDisplay.text('');
                }
            }
        },
        series: [{
            name: '东京',
            data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
        }, {
            name: '纽约',
            data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
        }, {
            name: '柏林',
            data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
        }, {
            name: '伦敦',
            lineColor: 'red',
            data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
        }]
    });
});

核心说明 #

• 鼠标悬停折线时，通过mouseOver事件获取当前数据点的系列名称、对应月份和气温值，拼接成文本后更新展示容器
• 鼠标离开折线时，通过mouseOut事件清空展示容器内容
• 为每个系列设置name属性可提升展示的可读性，未设置时自动用系列索引生成默认名称

内容的提问来源于stack exchange，提问作者Алексей Корж