Question

我正在使用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);
              });            
          }
    }
}

在上面的代码中，服务是我服务的服务对象，而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

尝试更改：

chart.showLoading('Loading');

致：

chart.ref.showLoading('Loading');

Answer 2

我已经解决了这个问题，如下面的代码在我的情况下工作：

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

        }
      }
    }

具有Angular 4

2 个答案: