Highstock与XRange图表工具提示异常问题求助

问题描述 #

使用Highstock和XRange绘制数据时，当两个条形图拥有相同起始时间戳，鼠标悬停上方条形（蓝色），工具提示却显示下方条形（绿色）的内容。需要实现：悬停对应条形时显示其对应的工具提示。

修复方案 #

这个问题源于Highcharts默认的点拾取逻辑——在处理同X轴起始点的XRange条形时，会优先匹配Y值更小的点（即下方的条形）。最直接的修复方式是给XRange系列添加trackByArea: true配置，让Highcharts根据鼠标所在的整个条形区域（而非仅X轴坐标）来匹配对应的数据点。

修改后的完整代码 #

Highcharts.stockChart('container', {
    chart: {
        type: 'xrange'
    },
    title: {
        text: 'Highcharts X-range'
    },
    xAxis: {
        type: 'datetime'
    },
    yAxis: {
        title: {
            text: ''
        },
        categories: ['Prototyping', 'Development', 'Testing'],
        reversed: true
    },
    tooltip: {
        crosshairs: false,
        useHTML: true,
        formatter: function () {
            return this.yCategory;
        }
    },
    series: [{
        name: 'Project 1',
        borderColor: 'gray',
        pointWidth: 20,
        // 新增配置：开启区域追踪，修复tooltip匹配问题
        trackByArea: true,
        data: [{
            x: '2014-11-21',
            x2: '2014-12-02',
            y: 0,
            partialFill: 0.25
        },
        {
            x: '2014-12-02',
            x2: '2014-12-05',
            y: 1
        },
        {
            x: '2014-12-07',
            x2: '2014-12-08',
            y: 2
        }, 
        {
            x: '2014-12-07',
            x2: '2014-12-08',
            y: 1
        },
        {
            x: '2014-12-09',
            x2: '2014-12-19',
            y: 1
        },
        {
            x: '2014-12-10',
            x2: '2014-12-23',
            y: 2
        }],
        dataLabels: {
            enabled: true
        }
    }]
});

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