Angular 在 ngAfterViewInit 中启动了 CanvasJS 图表

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 块内的 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();
  }
    });

Answer 2

您应该将图表呈现代码放在 subscribe 块中。

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

  });

}

Angular 在 ngAfterViewInit 中启动了 CanvasJS 图表

Angular with CanvasJS chart launched in ngAfterViewInit

javascript

angular

canvasjs