解决Highcharts热力图转百分比时的TypeScript类型报错

类型错误修复及百分比实现方案 #

1. 定义自定义点类型 #

TypeScript报错是因为默认无法识别formatter函数中this的上下文，以及你自定义的percentValue属性。首先扩展Highcharts的点类型：

import * as Highcharts from 'highcharts';

// 自定义热力图点类型，添加percentValue属性
interface CustomHeatmapPoint extends Highcharts.PointOptionsObject {
  percentValue?: number;
}

2. 指定集合类型 #

将collection的类型设置为自定义点数组：

collection: CustomHeatmapPoint[] = [
    {
        "x": 0,
        "y": 0,
        "value": 428
    },
    // 其余数据...
];

3. 修正Formatter函数 #

显式指定formatter函数的this类型，并对point做类型断言，同时实现百分比格式化：

dataLabels: {
  enabled: true,
  formatter: function(this: Highcharts.DataLabelsFormatterContextObject): string {
    const point = this.point as CustomHeatmapPoint;
    // 可通过toFixed控制百分比小数位数，这里保留2位
    return point.percentValue ? `${(point.percentValue * 100).toFixed(2)}%` : point.value?.toString() || '';
  }
},

4. 优化数据处理逻辑（可选） #

原代码中if (p.x >= 0)会处理所有点，包括基准点（x=0），导致基准点的value被错误计算为原值平方。建议调整条件：

data: (() => {
  this.collection.forEach((p: CustomHeatmapPoint) => {
    if (p.x !== 0) { // 仅处理非基准点
      const basePoint = this.collection.find(
        (p_: CustomHeatmapPoint) => p_.x === 0 && p_.y === p.y
      );
      if (basePoint) {
        p.percentValue = p.value;
        p.value = p.value * basePoint.value;
      }
    } else {
      // 基准点设置为100%
      p.percentValue = 1;
    }
  });
  return this.collection;
})(),

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