在Angular中使用Highcharts时，如何在绑定this的formatter函数中同时访问组件属性与point.y值

这个问题我之前也碰到过，核心原因是bind(this)把formatter函数内部的this指向改成了Angular组件实例，覆盖了Highcharts原本提供的包含point信息的上下文对象。不过有两种简单的方法可以解决：

方案1：利用Highcharts formatter的上下文参数 #

Highcharts的formatter函数会自动传入一个上下文对象作为第一个参数，这个对象里包含了point、series等你需要的图表数据。绑定组件this之后，直接通过这个参数就能访问point.y：

dataLabels: [{ 
  enabled: true, 
  formatter: function (context) { 
    // 这里的this已经是Angular组件实例，可直接访问组件属性
    console.log(this.yourComponentProperty);
    
    // 通过context参数获取Highcharts的point数据
    return Math.round(context.point.y * 10000) / 100 + "%"; 
  }.bind(this)
}]

方案2：使用箭头函数（更简洁） #

箭头函数的this会继承自外层作用域（也就是你的Angular组件实例），所以不需要额外用bind(this)。同样，我们还是通过传入的上下文参数获取point：

dataLabels: [{ 
  enabled: true, 
  formatter: (context) => { 
    // 箭头函数的this直接指向组件实例
    console.log(this.yourComponentProperty);
    
    // 访问point数据
    return Math.round(context.point.y * 10000) / 100 + "%"; 
  }
}]

两种方法都能同时满足访问组件属性和图表point数据的需求，看你个人习惯选哪种就行~

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