具有角4的高级图表中的异步DrillDown功能

Question

我的工作是角4应用程序。在这个应用程序中，我们需要显示不同的图表。我用高级图表来显示不同的图表。

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

下面是我使用的代码：

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

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

在上面的代码中，服务是我的服务的服务对象，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变得没有定义。

Answer 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);
              });
          }

        }
      }
    }

Answer 2

试着改变：

chart.showLoading('Loading');

至：

chart.ref.showLoading('Loading');