首页 > 解决方案 > 如何在highcharts树图点击事件中调用外部方法?

问题描述

我正在使用 highcharts 树图。我想在树形图单击事件中调用其他方法(this.callOutsidemethod )。但是我的代码不起作用,并在下面添加了我的代码。我想知道如何在打字稿中的树形图单击函数中调用外部方法。

export class AppComponent implements OnInit {
  name = `Angular! v${VERSION.full}`;
  @ViewChild("container", { read: ElementRef }) container: ElementRef;

  constructor() {
  }
  ngOnInit() {
    Highcharts.chart(this.container.nativeElement, {
          colorAxis: {
        minColor: '#FFFFFF',
        maxColor: Highcharts.getOptions().colors[0]
    },

    plotOptions: {
        series: {
            cursor: 'pointer',
            events: {
                click: function (event) {
                   this.callOutsidemethod();
                }
            }
        }
    },
    series: [{
        type: 'treemap',
        //layoutAlgorithm: 'squarified',
        data: [{
            name: 'A',
            value: 6,
            colorValue: 1
        }, {
            name: 'B',
            value: 6,
            colorValue: 2
        }, {
            name: 'C',
            value: 4,
            colorValue: 3
        }, {
            name: 'D',
            value: 3,
            colorValue: 4
        }, {
            name: 'E',
            value: 2,
            colorValue: 5
        }, {
            name: 'F',
            value: 2,
            colorValue: 6
        }, {
            name: 'G',
            value: 1,
            colorValue: 7
        }]
    }],
    title: {
        text: 'Highcharts Treemap'
    }
    })
  }

  callOutsidemethod(){
     alert("hii")
  }

}```

标签: angulartypescripthighcharts

解决方案


this您可以使用箭头函数表示法来使用关键字来引用成员变量。尝试以下

events: {
  click: (event) => {
    // do something
    this.callOutsidemethod();
  }
}

推荐阅读