具有通过类参考的角度范围问题中的高图表

问题描述 投票:0回答:1

我有一个呈现图表的组件,我想在格式化程序的帮助下用看起来像这样的数据覆盖初始工具提示:

tooltip: {
  formatter: function () {
    console.log(this);
    // logs data described aboved code snippet
    console.log(this.filterService.getFilters());
    // logs undefined as its component method
  }
}

console.log(this)在图表上记录有关悬停项目的数据,如下所示:

{
  x: "xxxxx",
  y: 94,
  color: "#58a310",
  colorIndex: 0,
  key: "xxxxx",
  series: e {proceed: null, chart: a.Chart, userOptions: {…}, tooltipOptions: {…}, 
  stickyTracking: false, …},
  point: C {series: e, color: "#58a310", y: 94, options: {…}, isNull: false, …},
  percentage: 60.256410256410255,
  total: 156,
  ...
}

而且我需要来自服务的一些数据,该组件使用该数据,因此我可以通过使用箭头func进行格式化来访问它:

tooltip: {
  formatter: () => {
    // here `this` refers to component class
    console.log(this.filterService.getFilters());
    // logs filters data, which I need 
  }
}

因此,我需要这两个(图表项目数据和过滤器)来执行我想要的操作,但看不到同时获得它们的方法,只有一个或另一个取决于我声明func的方式。

javascript angular highcharts
1个回答
1
投票

您可以使用IIFE函数来存储组件引用:

tooltip: {
  formatter: (function(component) {
    return function() {
      console.log(component, this);
    }
  })(this)
}

实时演示: http://jsfiddle.net/BlackLabel/6m4e8x0y/4808/

© www.soinside.com 2019 - 2024. All rights reserved.