Highcharts：悬停数据缺失间隙时显示提示框

嘿，这个需求我之前也遇到过，给你两个实用的解决方案，都能实现悬停数据间隙时显示tooltip的效果：

方法1：添加隐藏辅助系列 #

这个方法是通过添加一个覆盖所有x轴位置的隐藏系列，让它帮我们触发tooltip，然后自定义tooltip内容来匹配原系列的数据状态。

var currChart = Highcharts.chart('container', {
    yAxis: [{
        title: { text: 'Cost' }
    }],
    plotOptions: {
        series: {
            label: { connectorAllowed: false },
            pointStart: 2010
        }
    },
    tooltip: {
        shared: true,
        formatter: function() {
            // 获取当前鼠标对应的年份
            var currentYear = this.x;
            // 从原系列里找到对应年份的数据点
            var targetPoint = currChart.series[0].data.find(point => point.x === currentYear);
            
            // 构建tooltip内容
            var tooltipContent = `<b>${currentYear}</b><br/>`;
            tooltipContent += `<span style="color:${currChart.series[0].color}">●</span> Installation: `;
            
            if (targetPoint) {
                if (targetPoint.y === null) {
                    tooltipContent += 'No data available';
                } else if (targetPoint.y === 0) {
                    tooltipContent += '0';
                } else {
                    tooltipContent += targetPoint.y;
                }
            }
            return tooltipContent;
        }
    },
    series: [
        {
            name: 'Installation',
            data: [43934, 52503, null, 69658, 0, null, 137133, 154175]
        },
        {
            name: 'Helper Series',
            // 生成和原系列长度一致的空数据点，保证每个x位置都能触发tooltip
            data: new Array(8).fill(0),
            visible: false, // 隐藏这个系列，不让它显示在图表上
            enableMouseTracking: true, // 允许鼠标追踪，触发tooltip
            marker: { enabled: false } // 隐藏标记点
        }
    ]
});

方法说明： #

• 辅助系列完全不可见，但它的每个点对应原系列的x轴位置，鼠标移到任何x位置时都会触发tooltip
• 在tooltip.formatter里，我们根据当前x值找到原系列的对应数据，区分显示有效值、0或者无数据的提示

方法2：监听鼠标事件手动触发tooltip #

如果不想加辅助系列，也可以通过监听鼠标移动事件，手动计算当前x轴位置，然后强制显示tooltip内容。

var currChart = Highcharts.chart('container', {
    yAxis: [{
        title: { text: 'Cost' }
    }],
    plotOptions: {
        series: {
            label: { connectorAllowed: false },
            pointStart: 2010
        }
    },
    tooltip: {
        enabled: false, // 关闭默认的tooltip触发逻辑
        formatter: function() {
            var currentYear = this.x;
            var targetPoint = currChart.series[0].data.find(point => point.x === currentYear);
            
            var tooltipContent = `<b>${currentYear}</b><br/>`;
            tooltipContent += `<span style="color:${currChart.series[0].color}">●</span> Installation: `;
            
            if (targetPoint) {
                if (targetPoint.y === null) {
                    tooltipContent += 'No data available';
                } else if (targetPoint.y === 0) {
                    tooltipContent += '0';
                } else {
                    tooltipContent += targetPoint.y;
                }
            }
            return tooltipContent;
        }
    },
    series: [{
        name: 'Installation',
        data: [43934, 52503, null, 69658, 0, null, 137133, 154175]
    }]
});

// 监听图表容器的鼠标移动事件
currChart.container.addEventListener('mousemove', function(e) {
    var pointerPosition = currChart.pointer.normalize(e);
    var xAxis = currChart.xAxis[0];
    // 计算当前鼠标对应的x轴值（年份）
    var rawYear = xAxis.toValue(pointerPosition.chartX);
    // 取整，匹配我们的整数年份
    var currentYear = Math.round(rawYear);
    
    // 只在数据范围内触发tooltip
    var minYear = currChart.series[0].data[0].x;
    var maxYear = currChart.series[0].data[currChart.series[0].data.length - 1].x;
    
    if (currentYear >= minYear && currentYear <= maxYear) {
        // 创建虚拟点来触发tooltip
        var fakePoint = { x: currentYear, series: currChart.series[0] };
        currChart.tooltip.refresh(fakePoint);
    } else {
        // 超出数据范围时隐藏tooltip
        currChart.tooltip.hide();
    }
});

方法说明： #

• 关闭默认tooltip，完全通过自定义逻辑控制显示
• 通过chart.pointer.normalize获取鼠标在图表中的位置，转换为对应的x轴年份
• 手动调用tooltip.refresh显示自定义内容，不管该位置有没有真实数据点

你可以根据自己的代码场景选其中一种方法，两种都能实现你要的效果~

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