Highcharts美国地图：实现鼠标悬停州列表时地图显示Tooltip

要实现鼠标悬停页面中的州列表表格时，同步在Highcharts美国地图上显示对应州的Tooltip，可以按照以下步骤操作：

1. 基础结构准备 #

先在页面中渲染出美国地图和州列表表格：

<!-- 地图容器 -->
<div id="container" style="height: 500px; min-width: 310px; max-width: 800px; margin: 0 auto"></div>

<!-- 州列表表格 -->
<table id="state-table">
  <thead>
    <tr><th>州名</th></tr>
  </thead>
  <tbody>
    <tr><td>Alabama</td></tr>
    <tr><td>Alaska</td></tr>
    <!-- 其他州依次添加 -->
  </tbody>
</table>

2. 初始化Highcharts地图 #

加载美国地图数据并初始化图表，确保每个州的数据点包含可匹配的名称字段：

// 假设已引入Highcharts及地图模块
Highcharts.mapChart('container', {
  chart: {
    map: 'countries/us/us-all'
  },
  title: {
    text: '美国地图'
  },
  tooltip: {
    formatter: function() {
      return `<b>${this.point.name}</b><br>自定义Tooltip内容`;
    }
  },
  series: [{
    name: '美国各州',
    data: [
      { code: 'AL', name: 'Alabama', value: 1 },
      { code: 'AK', name: 'Alaska', value: 2 },
      // 其他州数据依次添加，确保name字段和表格中的州名一致
    ],
    dataLabels: {
      enabled: true,
      format: '{point.postal-code}'
    }
  }]
});

3. 绑定表格悬停事件并联动Tooltip #

通过监听表格行的鼠标事件，找到地图中对应的州数据点，手动触发Tooltip的显示与隐藏：

document.addEventListener('DOMContentLoaded', function() {
  const chart = Highcharts.charts[0]; // 获取已初始化的地图实例
  const tableRows = document.querySelectorAll('#state-table tbody tr');

  tableRows.forEach(row => {
    const stateName = row.textContent.trim();
    
    // 鼠标悬停时显示对应州的Tooltip
    row.addEventListener('mouseover', function() {
      // 找到地图中匹配名称的数据点
      const targetPoint = chart.series[0].points.find(point => point.name === stateName);
      if (targetPoint) {
        // 手动刷新Tooltip到目标点
        chart.tooltip.refresh(targetPoint);
        // 可选：高亮目标州
        targetPoint.setState('hover');
      }
    });

    // 鼠标移出时隐藏Tooltip并取消高亮
    row.addEventListener('mouseout', function() {
      const targetPoint = chart.series[0].points.find(point => point.name === stateName);
      if (targetPoint) {
        chart.tooltip.hide();
        targetPoint.setState('');
      }
    });
  });
});

关键说明 #

• 确保表格中的州名和地图数据点的name字段完全匹配，否则无法找到对应点
• 使用chart.tooltip.refresh(point)方法可以直接将Tooltip定位到指定数据点
• 通过point.setState('hover')可以同步高亮地图上的州，增强交互体验
• 如果页面中有多个Highcharts实例，注意通过正确的方式获取地图图表实例（比如给地图容器加特定标识）

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