React中Highcharts Treemap自定义Tooltip渲染React组件方案问询

方案1：开启useHTML，结合React渲染组件 #

Highcharts允许通过tooltip.useHTML: true强制使用HTML元素渲染Tooltip，此时可以让React接管Tooltip的内容渲染，分两种场景处理：

子方案1.1：静态无交互组件（用renderToString生成HTML） #

适合不需要交互的静态Tooltip组件，通过react-dom/server的renderToString把React组件转为HTML字符串，直接返回给Tooltip的formatter：

import { renderToString } from 'react-dom/server';
import Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';
import CustomStaticTooltip from './CustomStaticTooltip';

const chartOptions = {
  series: [{
    type: 'treemap',
    data: [...] // 你的树形数据
  }],
  tooltip: {
    useHTML: true,
    formatter() {
      // 将当前节点数据传入自定义组件
      return renderToString(<CustomStaticTooltip data={this.point} />);
    }
  }
};

export default function TreemapChart() {
  return <HighchartsReact highcharts={Highcharts} options={chartOptions} />;
}

子方案1.2：带交互的动态组件（手动挂载React根） #

如果Tooltip需要按钮、输入框这类交互元素，可借助Highcharts的节点事件，手动挂载/卸载React组件到Tooltip容器：

import { createRoot } from 'react-dom/client';
import Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';
import CustomInteractiveTooltip from './CustomInteractiveTooltip';

let tooltipRootInstance = null;

const chartOptions = {
  series: [{
    type: 'treemap',
    data: [...],
    point: {
      events: {
        mouseOver(e) {
          const tooltipContainer = document.querySelector('.highcharts-tooltip');
          if (tooltipContainer && !tooltipRootInstance) {
            tooltipRootInstance = createRoot(tooltipContainer);
            tooltipRootInstance.render(<CustomInteractiveTooltip data={e.point} />);
          }
        },
        mouseOut() {
          if (tooltipRootInstance) {
            tooltipRootInstance.unmount();
            tooltipRootInstance = null;
          }
        }
      }
    }
  }],
  tooltip: {
    useHTML: true,
    formatter() { return ''; } // 返回空字符串占位
  }
};

export default function TreemapChart() {
  return <HighchartsReact highcharts={Highcharts} options={chartOptions} />;
}

方案2：完全自定义独立Tooltip容器 #

彻底脱离Highcharts自带的Tooltip系统，自己在React组件中实现Tooltip逻辑，自由度最高：

1. 在图表外层套一个相对定位容器，内部添加绝对定位的自定义Tooltip组件，初始隐藏。
2. 监听Treemap节点的鼠标事件，控制Tooltip的显示、隐藏和位置：

import { useState, useRef } from 'react';
import Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';
import CustomTooltip from './CustomTooltip';

export default function TreemapChart() {
  const [tooltipState, setTooltipState] = useState({
    visible: false,
    data: null,
    position: { x: 0, y: 0 }
  });
  const chartRef = useRef(null);

  const chartOptions = {
    series: [{
      type: 'treemap',
      data: [...],
      point: {
        events: {
          mouseOver(e) {
            setTooltipState(prev => ({
              ...prev,
              visible: true,
              data: e.point
            }));
          },
          mouseOut() {
            setTooltipState(prev => ({ ...prev, visible: false, data: null }));
          },
          mousemove(e) {
            const chart = chartRef.current?.chart;
            if (chart) {
              // 转换鼠标坐标为页面绝对位置
              const pageX = e.chartX + chart.container.offsetLeft + 10;
              const pageY = e.chartY + chart.container.offsetTop + 10;
              setTooltipState(prev => ({ ...prev, position: { x: pageX, y: pageY } }));
            }
          }
        }
      }
    }],
    tooltip: { enabled: false } // 禁用原生Tooltip
  };

  return (
    <div style={{ position: 'relative', width: '100%', height: '400px' }}>
      <HighchartsReact 
        highcharts={Highcharts} 
        options={chartOptions} 
        ref={chartRef} 
      />
      {tooltipState.visible && tooltipState.data && (
        <div
          style={{
            position: 'absolute',
            left: tooltipState.position.x,
            top: tooltipState.position.y,
            background: '#fff',
            border: '1px solid #ddd',
            borderRadius: '4px',
            padding: '10px',
            zIndex: 9999,
            pointerEvents: 'auto' // 确保Tooltip内交互有效
          }}
        >
          <CustomTooltip data={tooltipState.data} />
        </div>
      )}
    </div>
  );
}

注意事项 #

• 开启useHTML后，Tooltip的样式需通过CSS直接控制.highcharts-tooltip类，Highcharts的SVG样式配置不再生效。
• 动态挂载React组件时，务必在mouseOut事件中卸载根实例，避免内存泄漏。
• 自定义独立Tooltip时，可额外添加视口溢出判断，调整Tooltip位置防止超出页面范围。

内容的提问来源于stack exchange，提问作者B. Grossman