Angular 4 中的 Highcharts 中的异步向下钻取功能答案

【问题标题】：Async DrillDown functionality in Highcharts with Angular 4Angular 4 中的 Highcharts 中的异步向下钻取功能
【发布时间】：2018-05-02 00:33:41
【问题描述】：

我正在使用 Angular 4 应用程序。在这个应用程序中，我们需要显示不同的图表。我正在使用 highcharts 来显示不同的图表。

我想实现向下钻取图表。我想在用户点击时绑定下钻系列。

下面是我正在使用的代码：

我在图表对象中添加了如下向下钻取事件：

chart: {
      type: 'column',
      events: {
           drilldown: (e,e2) =>{
           if (!e.seriesOptions) {
            var chart = e.target.options.chart;
            chart.showLoading('Loading');
            var dataArr = [1, 2];
            chart.setTitle({
              text: 'Quarter wise Revenue Report'
            });
            var data = {
              name: e.point.name,
              data: dataArr
            }
            this.service.customDelay()
              .subscribe(heroes => {
                chart.hideLoading();
                chart.addSeriesAsDrilldown(e.point, data);
              });            
          }
    }
}

在上面的代码中 service 是我的服务的服务对象，customDelay 是为了测试目的添加一些延迟的方法。

我在上面的代码中遇到以下错误：

chart.showLoading 不是函数

为了解决这个问题，我在删除箭头函数后更新了上面的向下钻取函数：

drilldown:function (e){
 if (!e.seriesOptions) {
        var chart = e.target.options.chart;
        chart.showLoading('Loading');
        var dataArr = [1, 2];
        chart.setTitle({
          text: 'Quarter wise Revenue Report'
        });
        var data = {
          name: e.point.name,
          data: dataArr
        }
        this.service.customDelay()
          .subscribe(heroes => {
            chart.hideLoading();
            chart.addSeriesAsDrilldown(e.point, data);
          });            
      }
}

在这种情况下，chart.showLoading 和其他功能正在图表中工作，但 this.service 变得未定义。

【问题讨论】：

this.service.customDelay() 不是 highcharts 的一部分，所以它是未定义的
使用老派方法：让 self = this 然后使用 self.service
customDely 在我的服务中定义
@AlexanderPoshtaruk 似乎有道理。只需在使用图表构造函数之前创建service 变量并为其分配this。然后只需在您的drilldown 事件中使用service.customDelay。
我已将其解决为：

标签： javascript angular typescript highcharts drilldown

【解决方案1】：

我已经解决了这个问题，因为下面的代码在我的情况下是有效的：

events: {
      drilldown: (e) => {
        console.log('drill-down');
        if (!e.seriesOptions) {
          var chart = e.target;
          if (chart.options.lang.drillUpText !== ChartStyle.drillUpBackBtnText)
            chart.options.lang.drillUpText = ChartStyle.drillUpBackBtnText;
          if (this.drilldownsData[e.point.name]) {
            chart.addSeriesAsDrilldown(e.point, this.drilldownsData[e.point.name]);
          }
          else {
            chart.showLoading('');
            let months = CommonUtilityService.getPreviousNMonthYearString(3);
            this.chartDataService.getTenetMeasureDataMonthWise(e.point.tenetId, this.selectedTeam.TeamId, months)
              .subscribe(response => {
                let responseData = <IChartData>JSON.parse(response['_body']);
                let data = CommonUtilityService.createDrillDownData(responseData, "Rating", ChartStyle.ChartXAxisStyle, ChartStyle.MaxBarWidth);
                this.drilldownsData[e.point.name] = data;
                chart.hideLoading();
                chart.addSeriesAsDrilldown(e.point, data);
              });
          }

        }
      }
    }

【讨论】：

【解决方案2】：

尝试改变：

chart.showLoading('Loading');

收件人：

chart.ref.showLoading('Loading');

【讨论】：