时间戳

首页 > 解决方案 > 在 ngAfterViewInit 中启动的带有 CanvasJS 图表的 Angular

javascript - 在 ngAfterViewInit 中启动的带有 CanvasJS 图表的 Angular

问题描述

我有 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放入and 。在官方的 canvas.js 示例中，他们只是将此图表脚本放入其中，如果他们定义静态数据，它就可以工作，但是在我的情况下，我从中得到它，我认为这是不同的。有什么方法可以在不点击按钮的情况下修复它？ngOnInitngAfterViewInitngOnInitngOninitobervable

标签： javascriptangularcanvasjs

解决方案

您应该将图表呈现代码放在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();

  });

}

推荐阅读