javascript - Angular 与 CanvasJS 图表在 ngAfterViewInit 中启动

Question

我有 CanvasJS 脚本来绘制一些图表，该脚本在 ngAfterViewInit 中启动，对于此脚本，我获取了基于在 this.timeChartData 中绘制的图表的数据，该数据是从 obervable 加载的。 。问题是此脚本未完全加载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", {
      zoomEnabled: true,
      animationEnabled: true,
      exportEnabled: true,

      title: {
        text: "Distribution of all events over time"
      },
      data: [
      {
        type: "line",
        xValueType: "dateTime",
        dataPoints: this.timeChartData
      }]
    });

    chart.render();
  }

我还尝试在 ngAfterViewChecked 中实现脚本启动但这会减慢应用程序的速度。推杆this.apiService.getTimeChart().subscribe进入ngOnInit也没有帮助，我还尝试将它们都放在 ngAfterViewInit 中和ngOnInit 。在官方的 canvas.js 示例中，他们只是将此图表脚本放入 ngOninit如果他们定义静态数据，它就可以工作，但就我而言，我是从 obervable 获取它的我认为这是有区别的。有什么方法可以在不点击按钮的情况下修复它吗？

Answer 1

创建图表的部分，如果将​​其放入 subscribe block 内的 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();
  }
    });