Highcharts.js单图多饼图实现拆分提示框问题求助

嘿，我懂你想要的效果：三个数据点数量完全一致的饼图，悬停其中一个饼块时，另外两个饼图对应位置的提示框也同时弹出来。你之前试的split: true确实行不通——这个配置是给柱状图、折线图这类直角坐标系图表设计的，饼图属于极坐标，Highcharts压根没给饼图做split tooltip的适配，报错也就在情理之中了。修改renderSplit原型方法的思路方向没错，但饼图的tooltip渲染逻辑和直角坐标系差异太大，容易踩坑，不如换个更直接靠谱的方案：手动监听鼠标事件，同步触发所有对应点的tooltip。

下面是具体的实现步骤和代码：

核心思路 #

1. 把三个饼图的实例存进一个数组，方便统一遍历操作
2. 给每个饼图的所有数据点绑定mouseOver事件：当某个点被悬停时，找到另外两个饼图中相同索引的点，手动调用tooltip的refresh方法显示提示框
3. 同时绑定mouseOut事件：当鼠标离开时，统一关闭所有饼图的tooltip

代码示例 #

假设你已经初始化好了三个饼图，实例分别是chart1、chart2、chart3：

// 把三个图表实例放进数组统一管理
const pieCharts = [chart1, chart2, chart3];

// 遍历每个图表，给所有数据点绑定事件
pieCharts.forEach(chart => {
  chart.series[0].points.forEach((point, index) => {
    // 鼠标悬停时同步显示所有对应点的tooltip
    point.on('mouseOver', function() {
      pieCharts.forEach(targetChart => {
        // 找到目标图表中相同索引的点，刷新tooltip
        targetChart.tooltip.refresh(targetChart.series[0].points[index]);
      });
    });

    // 鼠标离开时关闭所有tooltip
    point.on('mouseOut', function() {
      pieCharts.forEach(targetChart => {
        targetChart.tooltip.hide();
      });
    });
  });
});

额外说明 #

• 这个方案完全依赖“三个饼图数据点数量完全一致”的前提，我们是通过索引位置来匹配对应饼块的，只要你的数据结构符合要求，就能精准同步
• 如果需要调整tooltip的样式，直接在每个饼图的tooltip配置里设置就行，比如修改背景色、字体大小等，不会影响同步逻辑
• 相比修改Highcharts原型方法，这种方式更直观，也不容易破坏原有的渲染逻辑，后续维护起来更省心

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