如何在Highcharts柱状图悬停时显示子图表并给X轴分类加信息图标

1. 鼠标悬停「To」柱状图时展示堆叠柱状图子组件 #

Highcharts 的 tooltip formatter 只支持返回字符串，直接传 JSX 会被转成 [Object, Object]——它本身不识别 React 元素。可以这么解决：

• 先在 tooltip 的 formatter 里返回一个空占位容器，同时判断当前 hover 的是否为「To」系列，比如写 <div id="tooltip-stack-container"></div>。
• 监听 Highcharts 的 tooltip.refresh 事件，触发时获取 tooltip 的 DOM 元素，定位到刚才的占位容器。
• 用 ReactDOM.createPortal 把你的堆叠柱状图组件渲染到这个容器里。
• 记得在 tooltip.hide 事件里清空容器，避免残留内容。

示例代码片段：

// 初始化图表时配置事件
chart: {
  events: {
    tooltipRefresh: function(e) {
      const tooltipEl = this.tooltip.label.element;
      const stackContainer = tooltipEl.querySelector('#tooltip-stack-container');
      if (stackContainer && e.point.series.name === 'To') {
        ReactDOM.createPortal(
          <YourStackedBarChart data={e.point.data} />,
          stackContainer
        );
      }
    },
    tooltipHide: function() {
      const stackContainer = document.querySelector('#tooltip-stack-container');
      if (stackContainer) {
        ReactDOM.unmountComponentAtNode(stackContainer);
      }
    }
  }
},
tooltip: {
  formatter: function() {
    if (this.point.series.name === 'To') {
      return `<div id="tooltip-stack-container"></div>`;
    }
    // 其他系列的默认提示内容
    return this.defaultTooltip();
  },
  useHTML: true // 必须开启，才能渲染自定义HTML
}

2. 给X轴分类添加JSX格式的信息图标 #

Highcharts X轴标签默认不支持JSX，同样用「占位符+React渲染」的思路：

• 配置X轴标签时，在分类名称后加一个带唯一标识的占位元素，比如 <span class="info-icon-placeholder" data-category="${this.value}"></span>，同时开启 labels.useHTML: true。
• 图表渲染完成后，用ref获取图表容器，遍历所有 .info-icon-placeholder 元素。
• 对每个占位元素，用 ReactDOM.createPortal 把你的JSX信息图标组件渲染进去。

示例代码片段：

xAxis: {
  categories: ['分类1', '分类2', '分类3'],
  labels: {
    useHTML: true,
    formatter: function() {
      return `${this.value} <span class="info-icon-placeholder" data-category="${this.value}"></span>`;
    }
  }
},
// 图表渲染完成后处理
useEffect(() => {
  if (chartRef.current) {
    const placeholders = chartRef.current.container.querySelectorAll('.info-icon-placeholder');
    placeholders.forEach(placeholder => {
      const category = placeholder.dataset.category;
      ReactDOM.createPortal(
        <InfoIcon category={category} onClick={() => handleInfoClick(category)} />,
        placeholder
      );
    });
  }
}, [chartRef.current]);

注意：不管是tooltip还是X轴标签，都必须开启对应的 useHTML: true，否则Highcharts会过滤掉自定义HTML。

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