HighCharts饼图Tooltip如何调用另一API数据？

这个问题我之前也碰到过，核心思路是先把Tooltip需要的额外数据预加载好（或者做缓存），然后在HighCharts的Tooltip格式化函数里关联饼图数据和额外数据就行，给你一步步拆解：

1. 预加载Tooltip所需的API数据 #

首先，你需要提前请求另一个API的数据，把它存在一个以用户ID为键的对象里（因为你的饼图数据里有ID字段，刚好用来关联），这样后面悬停时可以快速查找，避免每次悬停都发请求导致延迟。

比如用Angular的$http请求实现：

// 存储额外数据的对象，键是用户ID，方便快速查找
$scope.extraUserData = {};

// 请求第二个API获取Tooltip需要的额外信息
$http.get('/api/user-extra-details')
  .then(function(response) {
    // 把返回的数据整理成ID为键的结构
    response.data.forEach(function(user) {
      $scope.extraUserData[user.ID] = user;
    });
    // 确保额外数据加载完成后再渲染饼图，避免数据未就绪
    renderPieChart();
  })
  .catch(function(error) {
    console.error('加载用户额外信息失败:', error);
    // 即使请求失败，也可以正常渲染饼图，Tooltip只展示现有数据即可
    renderPieChart();
  });

2. 渲染饼图并配置Tooltip #

接下来写渲染饼图的函数，重点在Tooltip的formatter函数里——通过当前数据点的ID去预加载的extraUserData里匹配对应信息，然后拼接成你要展示的Tooltip内容。

function renderPieChart() {
  Highcharts.chart('pieChartContainer', {
    chart: {
      type: 'pie'
    },
    title: {
      text: 'Top 用户模块点击量统计'
    },
    series: [{
      name: '模块点击量',
      data: $scope.topUsersList.map(function(item) {
        // 把原始数据转换成HighCharts需要的格式，同时在custom属性里保留原始字段
        return {
          name: `${item.Display_Name} - ${item.Module}`,
          y: parseInt(item.Module_Hits),
          custom: {
            userId: item.ID,
            displayName: item.Display_Name,
            module: item.Module,
            totalHits: item.Total_Hits_by_User
          }
        };
      })
    }],
    tooltip: {
      formatter: function() {
        // 获取当前数据点的自定义信息
        const customData = this.point.custom;
        // 通过用户ID查找预加载的额外数据，没有的话返回空对象
        const extraInfo = $scope.extraUserData[customData.userId] || {};
        
        // 拼接Tooltip内容，根据你的需求调整字段
        let tooltipContent = `<strong>${customData.displayName}</strong><br/>`;
        tooltipContent += `所属模块: ${customData.module}<br/>`;
        tooltipContent += `模块点击量: ${this.y}<br/>`;
        tooltipContent += `用户总点击量: ${customData.totalHits}<br/>`;
        // 如果存在额外数据，就添加到Tooltip里
        if (extraInfo.email) tooltipContent += `邮箱: ${extraInfo.email}<br/>`;
        if (extraInfo.department) tooltipContent += `部门: ${extraInfo.department}`;
        
        return tooltipContent;
      }
    }
  });
}

3. 特殊场景处理：无法一次性预加载所有数据 #

如果第二个API只能根据单个用户ID请求（不能批量获取），可以用缓存机制优化：第一次悬停某个用户时发起请求，把结果存在extraUserData里，后续再悬停同一个用户就直接用缓存：

tooltip: {
  formatter: function() {
    const customData = this.point.custom;
    const extraInfo = $scope.extraUserData[customData.userId];
    
    // 如果没有缓存，发起请求并显示加载提示
    if (!extraInfo) {
      $http.get(`/api/user-extra-details/${customData.userId}`)
        .then(function(response) {
          $scope.extraUserData[customData.userId] = response.data;
          // 重绘图表，让Tooltip重新渲染最新数据
          this.chart.redraw();
        }.bind(this));
      return '加载中...';
    }
    
    // 拼接Tooltip内容，和之前逻辑一致
    let tooltipContent = `<strong>${customData.displayName}</strong><br/>`;
    // ... 其他字段拼接
    return tooltipContent;
  }
}

不过这种方式第一次悬停会有延迟，体验不如批量预加载，所以优先推荐一次性获取所有需要的额外数据。

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