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

Question

我是 Ionic 的新手，并为图形集成了一个 Highchart SDK。但是我无法点击 highchart 事件。

我的打字稿文件是：

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 系列事件点击功能时，出现以下运行时错误，

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() 中，那么它可以工作但无法获得确切的月份。月份值显示未定义。

Answer 1

此问题与 Highcharts 回调函数有关。在 click 回调中，this 指向图表系列，而不是组件对象。

试试这个解决方案：

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)
  }
}

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

Highchart event click runtime error in Ionic

highcharts

typescript

ionic3

angular