我有CanvasJS脚本来绘制一些图表，并且此脚本在ngAfterViewInit中启动，为此脚本我获得的数据基于将从obervable加载的this.timeChartData中绘制的图表。问题是该脚本在此ngAfterViewInit生命周期中未完全加载，基本上图表为空。

    ngAfterViewInit(){
    this.apiService.getTimeChart().subscribe( logsFromApi => {
      this.timeChartData = logsFromApi;
    });

    let chart = new CanvasJS.Chart("chartContainer",{
      zoomEnabled: true,animationEnabled: true,exportEnabled: true,title: {
        text: "Distribution of all events over time"
      },data: [
      {
        type: "line",xValueType: "dateTime",dataPoints: this.timeChartData
      }]
    });

      chart.render();
  }

相应的服务电话

timeChartUrl = 'http://127.0.0.1:5000/api/time_chart';

  getTimeChart(): Observable<any> {
    console.log(this.timeChartUrl)
    return this.http.get<any>(this.timeChartUrl);
  }

如果我按如下所示调用按钮来调用图表，则图表可以工作并绘制数据：

HTML

<button (click)="timeChart()" >butt</button>


Type script
  timeChart(){  
    let chart = new CanvasJS.Chart("chartContainer",dataPoints: this.timeChartData
      }]
    });

    chart.render();
  }

我还尝试在ngAfterViewChecked中实现脚本启动，但这会使应用程序变慢。将this.apiService.getTimeChart().subscribe放入ngOnInit也无济于事，我也尝试将它们都放入ngAfterViewInit和ngOnInit中。在canvas.js官方示例中，他们只是将此图表脚本放到ngOninit中，并且如果他们定义了静态数据就可以使用，但是就我而言，我是从obervable中获取它的，我认为这是有区别的。有什么方法可以解决该问题，而无需单击按钮？