Highcharts美国气泡地图：气泡悬停时Tooltip显示错误问题

环境版本 #

• @highcharts/map-collection: ^2.1.0
• highcharts: ^11.1.0
• highcharts-react-official: ^3.2.0
• proj4: ^2.9.0

问题现象 #

React项目中使用Highcharts制作美国气泡地图时，悬停气泡时Tooltip显示错误的区域信息，但点击气泡能正确打印对应区域的名称。

问题分析 #

1. 无效数据点干扰：数据中包含一个无经纬度的点（lat: null, lon: null），该点无法正确映射到地图坐标系，可能导致Highcharts内部的点匹配逻辑混乱，引发Tooltip显示错位。
2. Tooltip上下文访问方式错误：原代码中tooltip.formatter使用this.point.options.keyword获取数据，但Highcharts会将数据点的属性直接挂载到point对象本身，而非嵌套在options中；同时未区分底图系列与气泡系列的Tooltip触发，可能导致上下文混淆。

解决方案 #

方案1：移除无效数据点 #

删除无经纬度的Unassiged数据点，避免干扰地图点的匹配逻辑。

方案2：修正Tooltip数据访问方式 #

直接访问this.point.keyword和this.point.z，同时在formatter中判断当前点是否属于气泡系列，避免底图系列触发错误Tooltip：

tooltip: {
  formatter: function () {
    // 仅处理气泡系列的Tooltip
    if (this.series.name === 'Locations') {
      return `<b>${this.point.keyword}</b><br/>${this.point.z}`;
    }
    return '';
  },
  // 确保Tooltip仅跟随当前悬停的气泡
  stickOnContact: true
},

方案3：给气泡系列单独配置Tooltip #

将Tooltip配置直接写在气泡系列中，避免与底图系列冲突：

series: [
  // 底图系列...
  {
    type: 'mapbubble',
    name: 'Locations',
    // ...其他配置
    tooltip: {
      pointFormat: `<b>{point.keyword}</b><br/>{point.z}`
    }
  }
]

修改后完整代码示例 #

import React from 'react';
import Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';
import hcMap from 'highcharts/modules/map';
import proj4 from 'proj4';
import mapDataUSA from '@highcharts/map-collection/countries/us/us-all.geo.json';

hcMap(Highcharts);

if (typeof window !== 'undefined') {
  window.proj4 = window.proj4 || proj4;
}

function BubbleChart(props) {
  const chartOptions = {
    chart: {
      backgroundColor: 'transparent',
      type: 'map',
      map: 'countries/us/us-all',
    },
    title: {
      text: null,
    },
    credits: {
      enabled: false,
    },
    mapNavigation: {
      enabled: false,
      enableButtons: false,
    },
    navigation: {
      buttonOptions: {
        enabled: false,
      },
    },
    tooltip: {
      stickOnContact: true,
      formatter: function () {
        if (this.series.name === 'Locations') {
          return `<b>${this.point.keyword}</b><br/>${this.point.z}`;
        }
        return '';
      },
    },
    legend: {
      enabled: false,
    },
    series: [
      {
        name: 'US Map',
        mapData: mapDataUSA,
        borderColor: '#FFFFFF',
        nullColor: '#E4E7EC',
        showInLegend: false,
      },
      {
        type: 'mapbubble',
        name: 'Locations',
        color: '#2E90FA',
        data: [
          { z: 79, keyword: 'North East', lat: 43.29, lon: -74.21 },
          { z: 49, keyword: 'South East', lat: 63.96, lon: -143.62 },
          { z: 26, keyword: 'Mid West', lat: 37.93, lon: -90.17 },
          { z: 21, keyword: 'South West', lat: 32.31, lon: -110.92 },
          { z: 15, keyword: 'West Coast', lat: 47.75, lon: -121.09 },
          // 移除无效数据点
          // { z: 19, keyword: 'Unassiged', lat: null, lon: null },
        ],
        cursor: 'pointer',
        point: {
          events: {
            click: function () {
              console.log(this.keyword);
            },
          },
        },
      },
    ],
  };

  return (
    <HighchartsReact
      containerProps={{ style: { height: 'auto', width: '100%' } }}
      highcharts={Highcharts}
      constructorType={'mapChart'}
      options={chartOptions}
    />
  );
}

export default BubbleChart;

额外说明 #

当前Highcharts 11.1.0版本无已知的Tooltip渲染核心问题，此问题主要由无效数据点和Tooltip配置不当导致。若仍有问题，可尝试：

• 确保地图投影配置正确，确认proj4已正确挂载到全局
• 检查气泡数据的经纬度是否与美国地图坐标系匹配

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