高图表-单击元素时启动Sweetalert2

Question

我想在我Sweetalert2的时候做一个系列祝酒词。在High图表中，文档显示了如何在元素中显示一个简单的JS警报。我想给大家看一杯Sweetalert2祝酒词。

Sweetalert2

 private toast = Swal.mixin({
    toast: true,
    position: "top-end",
    showConfirmButton: false,
    timer: 5000
  });

High图表 serie

events: {
     click: function (event) {   
          this.toast.fire({
               icon: "info",
               title: element.name
           });
      },
},

问题:当我单击返回时

无法读取未定义的属性“火”

我认为.fire()函数在试图通过单击函数启动它时丢失了。那么:当我点击图表意境元素时，我如何启动sweetalert2呢？

Answer 1

在该系列中，单击回调函数this引用单击的系列，因此this.toast是undefined。如果只需要外部this，请使用箭头函数：

events: {
    click: () => {
        ...
    }
}

如果您还需要参考已单击的系列，请使用IIFE：

events: {
  click: (function(outerThis) {
    return function() {
      console.log(this, outherThis)
    }
  })(this)
}

实况示例： http://jsfiddle.net/BlackLabel/Lrt6ajn9/

API参考： https://api.highcharts.com/highcharts/series.column.events.click