Highcharts如何扩大散点标记hover检测半径且不使用stickyTracking

方案1：调整Tooltip触发阈值（最简实现） #

关闭stickyTracking后，直接修改tooltip.snap配置项即可调整全局hover触发的检测半径，参数单位为像素，值越大触发范围越大。
示例代码：

Highcharts.chart('container', {
  chart: {
    type: 'scatter'
  },
  tooltip: {
    // 自定义触发检测半径，可根据需求调整数值
    snap: 30
  },
  plotOptions: {
    scatter: {
      stickyTracking: false,
      marker: {
        // 实际显示的散点尺寸
        radius: 5,
        states: {
          hover: {
            radius: 7
          }
        }
      }
    }
  },
  series: [{
    data: [[1, 2], [3, 4], [5, 6]]
  }]
  // 其余配置按需补充
});

方案2：自定义透明触发层（支持单点位独立设置触发范围） #

如果需要给不同散点设置不同的触发半径，可以叠加一层透明的大尺寸marker专门捕获鼠标事件，上层渲染实际可见的散点样式即可：

Highcharts.chart('container', {
  chart: {
    type: 'scatter'
  },
  plotOptions: {
    scatter: {
      stickyTracking: false,
      marker: {
        // 透明marker的尺寸，即触发范围半径
        radius: 30,
        fillColor: 'rgba(0,0,0,0)',
        lineWidth: 0,
        states: {
          hover: {
            enabled: false
          }
        }
      },
      // 用dataLabels渲染实际可见的散点
      dataLabels: {
        enabled: true,
        shape: 'circle',
        backgroundColor: '#7cb5ec',
        width: 10,
        height: 10,
        x: -5,
        y: -5,
        formatter: () => ''
      }
    }
  },
  series: [{
    data: [
      // 也可以给单个点单独设置marker.radius实现不同触发范围
      [1, 2], [3, 4, {marker: {radius: 50}}], [5, 6]
    ]
  }]
});

也可以用两个数据完全一致的重叠散点系列实现：第一个系列配置透明大marker负责事件捕获，第二个系列配置可见小marker只负责展示。

方案3：重写搜索逻辑（进阶自定义） #

如果需要更灵活的触发规则，可以通过重写Highcharts内置的searchPoint方法自定义距离判断逻辑：

// 全局重写散点图的点搜索逻辑
Highcharts.wrap(Highcharts.seriesTypes.scatter.prototype, 'searchPoint', function (proceed, event) {
  const originalResult = proceed.call(this, event);
  if (originalResult) return originalResult;
  // 自定义触发半径
  const triggerRadius = 30;
  for (const point of this.points) {
    const distance = Math.sqrt(
      Math.pow(event.chartX - point.plotX - this.chart.plotLeft, 2) + 
      Math.pow(event.chartY - point.plotY - this.chart.plotTop, 2)
    );
    if (distance < triggerRadius) {
      return point;
    }
  }
  return null;
});

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