javascript - 从 Highcharts 加载事件调用 Typescript 函数

Question

我正在尝试openDialog()从events.loadhighcharts 调用 typescript 函数，但我无法调用它。即使我正在使用箭头功能，我也无法获得它。这是我的代码：

events: {
    load: () => {
       var chart : any = this;
      for (var j in chart.series) {
        var series = chart.series[j];
        for (var i in series.data) {
          ((i) =>{
            var point = series.data[i];
            if (point.graphic) {
              point.graphic.on('click',(e)=>this.openDialog(point.options,'all')
            );
            }
          })(i)
        }
      }
    }
  },


  public openDialog(option,type){
       //Do Something
  }

编辑

我有一个与功能绑定的链接。this

有什么我想念的吗？

标签： javascriptangulartypescripthighcharts

Answer 1

检查更新代码替换箭头功能，

此处分配图表选项已移至函数，init(){}并var that = this;在其中声明，也将替换()=>{}为function().

您可以在此处查看 stackblitz 更新

import {  Component, OnInit, ElementRef, ViewChild} from '@angular/core';
import { Chart } from 'angular-highcharts';
import { HighchartsService } from './highcharts.service.ts'

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  @ViewChild('charts') public chartEl: ElementRef;
  myOptions={};
  constructor(private highcharts: HighchartsService) { }
  ngOnInit(){
    this.init();
    this.highcharts.createChart(this.chartEl.nativeElement, this.myOptions);
  }
  init(){
   var that = this;
   this.myOptions = {
    chart: {
      type: 'bar',
      events: {
      load: function(){
      var chart : any = this;
      for (var j in chart.series) {
        var series = chart.series[j];
        for (var i in series.data) {
          ((i) =>{
            var point = series.data[i];
            if (point.graphic) {
              point.graphic.on('click',(e)=>that.openDialog()
            );
            }
          })(i)
        }
      }
      }
    },
    },
    title: {
      text: 'Stacked bar chart'
    },
    xAxis: {
      categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
    },
    yAxis: {
      min: 0,
      title: {
        text: 'Total fruit consumption'
      }
    },
    legend: {
      reversed: true
    },
    plotOptions: {
      series: {
        stacking: 'normal'
      }
    },
    series: [{
      name: 'John',
      data: [5, 3, 4, 7, 2]
    }, {
      name: 'Jane',
      data: [2, 2, 3, 2, 1]
    }, {
      name: 'Joe',
      data: [3, 4, 4, 2, 5]
    }]
  };
      }

  public openDialog(){
       console.log('open dialog, hey this works here')
  }
}