Angular2中如何配置Highcharts提示框格式化器以显示额外数据

没问题，我来帮你实现这个提示框格式的需求！根据你的数据结构和现有配置，只需要修改tooltip.formatter函数，直接从当前数据点中提取percentage和machine属性，然后拼接成你要的格式即可。

完整的Tooltip配置代码 #

tooltip: {
  crosshairs: [true, true],
  formatter: function() {
    // 获取当前hover点的百分比和机器数量
    const percentage = this.point.percentage;
    const machineCount = this.point.machine;
    // 处理机器数量的单复数显示
    const machineLabel = machineCount === 1 ? 'machine' : 'machines';
    // 返回拼接好的提示文本（支持HTML格式）
    return `<strong>${this.series.name}</strong><br>Percentage: ${percentage}% (${machineCount} ${machineLabel})`;
  }
}

代码说明 #

1. 上下文访问：在Highcharts的formatter函数中，this指向当前的提示框上下文，this.point就是你hover到的数据点，对应你传入series.data数组中的每个对象（也就是后端返回的high_usage/normal_usage里的元素），所以可以直接访问percentage和machine属性。
2. 单复数优化：判断机器数量是否为1，动态切换machine/machines，让提示文本更符合语言习惯。
3. HTML格式支持：用<strong>标签突出显示系列名称，<br>换行，让提示框排版更清晰。

可选优化：控制百分比小数位数 #

如果需要固定百分比的小数位数（比如保留1位小数），可以用toFixed()方法处理：

const percentage = this.point.percentage.toFixed(1);

这样配置后，当你hover到图表上的点时，提示框就会显示类似High usage<br>Percentage: 77.9% (3 machines)的内容啦！

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