我在一个React应用程序中使用Highcharts来创建一个US Bubble Map。相关库的版本详细信息如下：
“@highcharts/map-collection”：“^2.1.0”“highcharts”：“^11.1.0”“highcharts-react-official”：“^3.2.0”“proj4”：“^2.9.0”
我遇到的问题是，当我将鼠标悬停在Map上的一个气泡上时，工具提示显示的是另一个气泡的信息。然而，气泡上的单击事件正确地记录了该区域的名称。
下面是我的组件的链接：BubbleChart.js on StackBlitz
相关代码：

import React, { useEffect, useState } 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,
      },
    },
    credits: {
      enabled: false,
    },
    tooltip: {
      //   headerFormat: "",
      //   pointFormat: "lat: {point.lat}, lon: {point.lon}",
      formatter: function () {
        return (
          '<b>' +
          this.point.options.keyword +
          '</b><br/>' +
          this.point.options.z
        );
      },
    },
    legend: {
      enabled: false,
    },
    series: [
      {
        // Use the gb-all map with no data as a basemap
        name: 'US Map',
        mapData: mapDataUSA,
        borderColor: '#FFFFFF',
        nullColor: '#E4E7EC',
        showInLegend: false,
      },
      {
        // Specify points using lat/lon
        type: 'mapbubble',
        name: 'Locations',
        color: '#2E90FA',
        data: [
          // { z: 10, keyword: "Massachusetts", lat: 42.40, lon: -71.38},
          // { z: 20, keyword: "Washington", lat: 47.48, lon: -120.36},
          // { z: 30, keyword: "California", lat: 36.74, lon: -119.59},
          // { z: 40, keyword: "Oregon", lat: 43.83, lon: -120.38},
          { 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和相关库。我感谢您对解决此工具提示问题的任何见解或建议。谢谢！
enter image description here的
我目前正在一个React应用程序中使用Highcharts库进行数据可视化。我实现了一个Bubble Map来显示地理数据。相关库的版本详细信息如下：
“@highcharts/map-collection”：“^2.1.0”“highcharts”：“^11.1.0”“highcharts-react-official”：“^3.2.0”“proj4”：“^2.9.0”
在实现这一点时，我遇到了气泡上的工具提示问题。当我将鼠标悬停在Map上的气泡上时，工具提示显示的是另一个气泡的信息。然而，气泡上的单击事件正确记录了该区域的名称。
具体问题：
在当前版本的Highcharts中，是否存在已知的工具提示渲染问题？在气泡Map场景中，是否需要对工具提示进行任何特定的配置或调整？我正在寻求有关如何解决此工具提示问题的见解或建议，并确保它在悬停在气泡上时准确显示信息。
感谢您提供的任何帮助或指导！