如何在AngularJS页面加载时获取Highcharts饼图数据项的百分比值

直接利用Highcharts的chart.events.load事件，在图表渲染完成后即可获取所有数据项的百分比，无需等待鼠标悬停。具体实现步骤如下：

1. 修改Highcharts配置，添加加载完成事件
   在你的饼图配置中，新增chart.events.load回调，在这个回调里可以直接访问饼图的所有数据点及其计算好的percentage属性：

$scope.chartConfig = {
  // 其他饼图配置（比如title、series等）
  series: [{
    type: 'pie',
    data: [/* 你的数据源 */]
  }],
  tooltip: {
    // 保留你原有的tooltip配置
    valueDecimals: 0,
    valuePrefix: yAxisDataPrefix,
    valueSuffix: yAxisDataSuffix,
    pointFormatter: function () {
      // 原有的hover逻辑可保留
    }
  },
  chart: {
    events: {
      load: function() {
        // 当前图表实例
        const chart = this;
        // 遍历饼图系列的所有数据点，提取名称、数值和百分比
        const percentageList = chart.series[0].points.map(point => ({
          name: point.name,
          value: point.y,
          percentage: point.percentage.toFixed(2) // 按需格式化小数位数，比如toFixed(0)取整数
        }));
        // 将数据同步到AngularJS的scope中，注意用$apply触发视图更新
        $scope.$apply(() => {
          $scope.pieData = percentageList;
        });
      }
    }
  }
};

2. 在HTML中渲染表格
   通过AngularJS的ng-repeat指令，直接绑定pieData渲染表格：

<table border="1">
  <thead>
    <tr>
      <th>数据项</th>
      <th>数值</th>
      <th>占比</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="item in pieData">
      <td>{{item.name}}</td>
      <td>{{item.value}}</td>
      <td>{{item.percentage}}%</td>
    </tr>
  </tbody>
</table>

说明 #

• Highcharts在图表加载完成后，已经自动计算好每个数据点的percentage属性（值为0-100的小数），无需手动计算占比。
• 因为load回调是Highcharts的原生事件，不在AngularJS的消化周期内，所以需要用$scope.$apply()触发视图更新，确保表格能同步获取到数据。
• 如果你的饼图有多个系列，调整chart.series[0]的索引即可对应到目标系列。

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