Highcharts饼图：为图例labelFormatter应用货币管道时无法访问自定义管道

嘿，我完全懂你碰到的这个坑——在Highcharts的图例格式化函数里，想调用Angular的自定义货币管道却拿不到curPipe，核心问题就是函数上下文的绑定不对！

问题根源 #

你之前用普通函数formatCurrency作为labelFormatter时，这个函数里的this指向的是Highcharts的图例对应点（point）对象，而不是你的组件实例，所以自然访问不到组件里注入的curPipe。你想改成箭头函数的思路完全正确，因为箭头函数会继承外部的上下文（也就是你的组件实例）。

正确的实现方式 #

这里有两种可行的写法，选你觉得顺手的就行：

写法1：直接在labelFormatter里用箭头函数

把格式化逻辑直接写在箭头函数里，这样this就指向组件实例，同时通过函数参数拿到Highcharts的point对象：

legend: {
  align: 'right',
  verticalAlign: 'middle',
  layout: 'vertical',
  symbolWidth: 15,
  symbolRadius: 7,
  labelFormatter: (point) => {
    // 这里的this是组件实例，能访问到curPipe；point是当前图例对应的点对象
    return this.curPipe.transform(point.y, "pipeFilter");
  },
  useHTML: true
}

写法2：把formatCurrency定义成箭头函数

如果想把逻辑抽成单独的方法，就把方法定义成箭头函数，确保它的this绑定到组件实例：

// 组件类里定义箭头函数形式的格式化方法
formatCurrency = (point) => {
  return this.curPipe.transform(point.y, "pipeFilter");
}

// 然后在legend配置里引用
legend: {
  align: 'right',
  verticalAlign: 'middle',
  layout: 'vertical',
  symbolWidth: 15,
  symbolRadius: 7,
  labelFormatter: this.formatCurrency,
  useHTML: true
}

关键提醒 #

别再用this['y']来获取数值啦！改成箭头函数后，this已经是组件实例了，要通过函数参数point来访问点的y值哦～

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