Highcharts 美国气泡地图：将鼠标悬停在气泡上时出现工具提示问题

Question

我在 React 应用程序中使用 Highcharts 来创建美国气泡图。相关库的版本详情如下：

“@highcharts/map-collection”：“^2.1.0” “highcharts”：“^11.1.0” “highcharts-react-official”：“^3.2.0” “proj4”：“^2.9.0”

我遇到的问题是，当我将鼠标悬停在地图上的气泡上时，工具提示显示不同气泡的信息。但是，气泡上的单击事件正确记录了该区域的名称。

这是我的组件的链接：StackBlitz 上的 BubbleChart.js

相关代码：

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 和相关库。 我感谢任何有关解决此工具提示问题的见解或建议。谢谢！

我目前正在使用 React 应用程序中的 Highcharts 库来可视化数据。我已经实现了一个气泡图来显示地理数据。相关库的版本详情如下：

“@highcharts/map-collection”：“^2.1.0” “highcharts”：“^11.1.0” “highcharts-react-official”：“^3.2.0” “proj4”：“^2.9.0”

在实现此操作时，我遇到了气泡上的工具提示问题。当我将鼠标悬停在地图上的气泡上时，工具提示会显示不同气泡的信息。但是，气泡上的单击事件正确记录了该区域的名称。

具体问题：

当前版本的 Highcharts 中的工具提示渲染是否存在已知问题？ 气泡图场景中的工具提示是否需要做一些具体的配置或调整？ 我正在寻求有关如何解决此工具提示问题并确保其将鼠标悬停在气泡上时准确显示信息的见解或建议。

感谢您提供的任何帮助或指导！

Answer 1

我遇到了类似的问题并进行了一些研究，发现该问题与 v11.2.0 版本有关。

在您的情况下，您似乎正在使用脱字符号 (^) 符号来安装 Highcharts 版本，这会导致安装最新的可用版本，即 11.2.0。要专门安装版本 11.1.0，您应该从 Highcharts 依赖版本规范中删除插入符号 (^)。