Angular Ionic中的Highchart事件单击运行时错误

Angular Ionic中的Highchart事件单击运行时错误,angular,typescript,highcharts,ionic3,Angular,Typescript,Highcharts,Ionic3,我是《爱奥尼亚》杂志的新手,为graph集成了Highchart sdk。但我无法单击highchart事件 我的typescript文件是: import * as HighCharts from 'highcharts'; HighCharts.chart('hzdTypeTrend', { chart: { margin: [30, 0, 85, 30], spacingTop: 0, spacingBottom: 0,

我是《爱奥尼亚》杂志的新手,为graph集成了Highchart sdk。但我无法单击highchart事件

我的typescript文件是:

import * as HighCharts from 'highcharts';

HighCharts.chart('hzdTypeTrend', {
      chart: {
        margin: [30, 0, 85, 30],
        spacingTop: 0,
        spacingBottom: 0,
        spacingLeft: 0,
        spacingRight: 0,
        type: 'line'
      },
      title: {
        text: 'Type of Hazard Trend'
      },
      legend: {
        layout: 'horizontal',
        //align: 'right',
        x: 0,
        verticalAlign: 'buttom',
        y: 90,
        floating: true,
        backgroundColor: '#FFFFFF'
      },
      credits: {
        enabled: false
      },
      xAxis: {
        categories: [this.beforeMonth, this.previousMonth, this.currentMonth]
      },
      plotOptions: {
        line: {
          dataLabels: {
            enabled: true
          },
        }
      },
      colors: [
        '#5B9BD5',
        '#5CB85C',
        '#A5A5A5',
        '#CCA300',
      ],

      series: [{
        name: 'Physical',
        data: this.haztypetrend.physical,
        cursor: 'pointer',
        point: {
          events: {
            click: function () {
              var month = this.category;
              this.filterHzdlisting('hzrdtrend', month, 66);

            }
          }
        }
      },{
        name: 'Human Factor',
        data: this.haztypetrend.humanfactor,
        cursor: 'pointer',
        point: {
          events: {
            click: function () {
            }
          }
        }
      }]
    });

public filterHzdlisting(obsGraphType: string, mnth: any, statusId_: string) {
    this.showChartView = false;
    this.showListView = true;
    console.log("statusId====== " + statusId_);
  }
当我单击highchart series events click函数时,我得到以下运行时错误

ERROR
TypeError: this.filterHzdlisting is not a function. (In 'this.filterHzdlisting('hzrdtrend', month, 66)', 'this.filterHzdlisting' is undefined)
click — main.js:6539
(anonymous function) — vendor.js:57714:449
forEach
each — vendor.js:57712
fireEvent — vendor.js:57714:250
firePointEvent — vendor.js:57971:495
onContainerClick — vendor.js:57898:237
onclick — vendor.js:57899
H — polyfills.js:3:23956
onInvokeTask — vendor.js:5114
runTask — polyfills.js:3:10845
invokeTask — polyfills.js:3:16802
p — polyfills.js:2:27655
v — polyfills.js:2:27895

如果我将函数绑定到click()中,那么它可以工作,但无法获得确切的月份。月份值显示为未定义。

该问题与Highcharts回调函数有关。在
内部,单击
回调,该回调指向图表系列,而不是组件对象

尝试以下解决方案:

point: {
  events: {
    click: (function(self) {
      return function() {
        // this as Highcharts series
        var month = this.category;

        // self - reference to the component object
        self.filterHzdlisting('hzrdtrend', month, 66);
      }
    })(this)
  }
}

谢谢你的完美逻辑…很好,伙计