React中Highcharts环形图点击自定义图例触发对应区域Tooltip显示的实现问题

我明白你遇到的问题了——在React环境里直接操作chartOptions里的data对象是行不通的，因为chartOptions只是初始配置，Highcharts渲染完成后，实际的图表状态和数据都保存在chart实例里，而不是配置对象里。下面给你一套可行的解决方案：

步骤1：获取Highcharts的Chart实例 #

首先你需要拿到渲染后的Chart实例，推荐用React的ref来实现（假设你用的是官方的highcharts-react-official组件）：

import { useRef } from 'react';
import Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';

function YourChartComponent() {
  // 创建ref用于存储Chart实例
  const chartRef = useRef(null);

  // 你的chartOptions定义...
  let chartOptions = {
    chart: {
        plotBackgroundColor: null,
        plotBorderWidth: 0,
        plotShadow: false,
    },
    title: {
        text: `Title`,
    },
    plotOptions: {
        pie: {
            dataLabels: {
                enabled: false,
                distance: -125,
                y: -5,
                format: "{y}%",
                style: {
                    fontWeight: "bold",
                    color: "black",
                    fontSize: "12px",
                },
            },
            borderWidth: 3,
        },
        series: {
            animation: false,
        },
    },
    tooltip: {
        shared: true,
    },
    series: [
        {
            type: "pie",
            name: "",
            tooltip: {
                valueDecimals: 2,
                valueSuffix: " USD",
            },
            innerSize: "60%",
            data: data_array,
        },
    ],
  };

  // 处理自定义图例点击的函数
  const handleSimulateMouseOver = (index) => {
    // 从ref中获取Chart实例
    const chart = chartRef.current?.chart;
    if (!chart) return;

    // 获取目标数据点
    const targetPoint = chart.series[0].points[index];
    if (!targetPoint) return;

    // 重置所有点的状态为正常，避免多个点同时高亮
    chart.series[0].points.forEach(point => point.setState('normal'));
    
    // 设置目标点为hover状态
    targetPoint.setState('hover');
    // 刷新Tooltip显示目标点信息
    chart.tooltip.refresh(targetPoint);
  };

  return (
    <>
      {/* 你的自定义图例 */}
      <div className='mb_3px mt_3px cursor_pointer color_blue' onClick={() => {
          handleSimulateMouseOver(item.index);
      }} >
          {truncate(object[item.index].name, 39)}
      </div>

      {/* Highcharts组件，绑定ref */}
      <HighchartsReact
        highcharts={Highcharts}
        options={chartOptions}
        ref={chartRef}
      />
    </>
  );
}

关键说明： #

• 为什么之前的方法失效？：chartOptions.series[0].data只是你传入的初始数据数组，不是Highcharts内部维护的实际数据点对象。只有从Chart实例的series[0].points中获取的点，才拥有setState等可操作的方法。
• 重置状态：添加forEach循环重置所有点的状态，是为了避免用户点击多个图例后，多个图表区域同时处于高亮状态。
• Tooltip刷新：调用chart.tooltip.refresh(targetPoint)可以手动触发Tooltip显示，传入目标点即可展示对应的数据信息。

如果你的项目用的是类组件，获取ref的方式会略有不同，但核心逻辑是一致的——先拿到Chart实例，再操作实例内的points对象。

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