如何在无数据单元格显示HighCharts稀疏热力图Tooltip？

可行，无需添加值为0的空数据点，通过Highcharts的事件机制和坐标轴转换即可实现，具体步骤如下：

1. 调整Tooltip配置
   修改Tooltip的格式化函数，不再依赖this.point（无数据单元格无point对象），改为接收自定义上下文数据：

   tooltip: {
     formatter: function(context) {
       return "current date: " + context.date;
     },
     positioner: function () {
       return { x: 105, y: 55 };
     }
   },
   

2. 添加全局鼠标事件监听
   在Chart配置中添加mouseOver和mouseOut事件，手动计算鼠标所在位置对应的X轴日期，并触发Tooltip：

   chart: {
     type: 'heatmap',
     events: {
       mouseOver: function(e) {
         const xAxis = this.xAxis[0];
         // 将鼠标的像素坐标转换为X轴数值
         const xValue = xAxis.toValue(e.chartX);
         // 转换为目标日期格式
         const currentDate = new Date(0);
         currentDate.setUTCSeconds(xValue / 1000);
         // 手动刷新Tooltip，传入自定义日期数据
         this.tooltip.refresh({ date: currentDate }, e);
       },
       mouseOut: function() {
         // 鼠标移出绘图区时隐藏Tooltip
         this.tooltip.hide();
       }
     }
   },
   

3. 补充说明

   • 确保X轴的刻度分布均匀（比如设置tickPixelInterval），这样鼠标位置转换的X轴数值能准确对应到单元格的日期。
   • 若需要更精准的单元格定位，可结合热力图的colsize参数计算单元格的边界，确保鼠标在单元格范围内时才触发对应日期的Tooltip。

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