从Highcharts加载事件中调用Typescript函数

Question

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

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
  }

编辑

我有一个link，其中有绑定this与功能。

我有什么想念的吗？

Answer 1

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

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

您可以检查stackblitz更新Here

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

Answer 2

我不确定这是否行得通，但据我了解，您的内容不指向myOptions对象，而myOptions对象中存在序列键，

为了完成这项工作，您应该在myOptions对象之外声明series

seriesData = [{
  name: 'John',
  data: [5, 3, 4, 7, 2]
}, {
  name: 'Jane',
  data: [2, 2, 3, 2, 1]
}, {
  name: 'Joe',
  data: [3, 4, 4, 2, 5]
}];

 myOptions = {
    chart: {
        type: 'bar',
        events: {
           load: () => {
              for (var j in this.seriesData) {
                  var series = this.seriesData[j];
                  for (var i in series.data) {
                   .
                   .
                  }
              }
            }
        }
    },

    series: this.seriesData
 }

Answer 3

使用Highcharts.Chart类创建图表。

尝试一下：

import * as Highcharts from 'highcharts';
import { Injectable } from '@angular/core';

@Injectable()
export class HighchartsService {
    constructor() {
    }

    createChart(el, cfg) {
     new Highcharts.Chart(el, cfg);
    }
}

Answer 4

最后通过简单的更改使它起作用

events: {
  load: function(e) {
   var chart : any = e.target; // to get the chart details
  for (var j in chart.series) {
    console.log(j)
    var series = chart.series[j];
    for (var i in series.data) {

      ((i) =>{
        console.log(i)
        var point = series.data[i];
        if (point.graphic) {
          point.graphic.on('click',(e)=>this.openDialog()
        );
        }
      })(i)
    }
  }
  }.bind(this) //binding the parent this to access openDialog function
},


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

在这里，我必须绑定这不是来自图表的。因此，我必须使用this将.bint(this)绑定到加载函数。为了获得图表详细信息，我正在使用e.target。这样我就可以工作了。

Stackblitz Demo