0

I used ng2charts module to render charts. If i try with below dummy data, bar chart rendering properly.

Typescript

  public barChartOptions: any = {
    scaleShowVerticalLines: false,
    responsive: true
  };
  public barChartLabels: string[] = ['Label1', 'Label2', 'Label3'];
  public barChartType: string = 'bar';
  public barChartLegend: boolean = true;

  public barChartData: any[] = [
    { data: [65, 59, 80], label: 'Data1' },
    { data: [28, 48, 40], label: 'Data2' },
    { data: [30, 28, 80], label: 'Data3' }
  ];

Component Html :

<canvas style="height:230px" baseChart [datasets]="barChartData" [labels]="barChartLabels" [options]="barChartOptions" [legend]="barChartLegend" [chartType]="barChartType" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)"></canvas>

But If i tried to get data from server and set data dynamically not working as expected.

I'm Getting below error

HomeComponent.html:73 ERROR TypeError: Cannot read property 'data' of undefined

Please refer my below code.

export class HomeComponent implements OnInit {

  serverData: any;

  public barChartOptions: any = {
    scaleShowVerticalLines: false,
    responsive: true
  };


  public barChartLabels: string[];
  public barChartType: string = 'bar';
  public barChartLegend: boolean = true;

  public barChartData: any[];


  constructor(private fb: FormBuilder, private Service: Service,
    private route: ActivatedRoute, private router: Router, private _configService: ConfigService) {
    this.getApis();
  }

  ngOnInit() {
    const loggedInUser = new LoggedInUser();
    const user = loggedInUser.getLoggedUser();
    if (user != null) {
      this.loggedInUserId = loggedInUser.getLoggedUser().UserId;
    }

  }

  getApis() {
    this._configService.get()
      .subscribe(c => {
        this.apiEndpoints = c;
        this.loadDashBoardDetails();
      },
      error => { this.msg = <any>error; });
  }

  loadDashBoardDetails() {
    this.indLoading = true;
    this.Service.get("APIENDPOINT")
      .subscribe(c => {
        this.serverData = c[0];
        this.loadserverData();
        this.indLoading = false;
      },
      error => {
        this.msg = <any>error;
      }

      );
  }
  loadserverData() {
    let chartData: any[];
    let data1 = '';
    let data2 = '';
    let data3 = '';
    this.barChartLabels = new Array<string>();
    chartData = new Array<any>();
    for (let _i = 0; _i < this.serverData.length; _i++) {
      this.barChartLabels.push(this.serverData[_i].Code);
      if (data1 === '') {
        data1 = this.serverData[_i].Target;
      } else {
        data1 = data1 + ',' + this.serverData[_i].data1;
      }

      if (data2 === '') {
        data2 = this.serverData[_i].data2;
      } else {
        data2 = data2 + ',' + this.serverData[_i].data2;
      }

      if (data3 === '') {
        data3 = this.serverData[_i].data3;
      } else {
        data3 = data3 + ',' + this.serverData[_i].data3;
      }
    }

    chartData.push({
      data: data1,
      label: 'data1 label'

    });

    chartData.push({
      data: data2,
      label: 'data2 label'

    });

    chartData.push({
      data: data3,
      label: 'data3 label'

    });

    this.barChartData = chartData;
  }
 }
4

3 に答える 3

2

グラフがレンダリングされるときにデータが定義されていないため、このエラーが発生しています。*ngIfチャートで使用することでこれを回避できます

<canvas
    *ngIf="barChartData"
    baseChart
    style="height:230px" 
    [datasets]="barChartData" 
    [labels]="barChartLabels" 
    [options]="barChartOptions" 
    [legend]="barChartLegend" 
    [chartType]="barChartType" 
    (chartHover)="chartHovered($event)" 
    (chartClick)="chartClicked($event)">
</canvas>

上記の HTML は、データが解決されるまでレンダリングされません。データが解決され、barChartData が未定義でなくなると、チャートがレンダリングされます。

編集：

barChartData配列にデータを追加し続けると、チャートは再レンダリングされません。データを取得したら、配列にプッシュするのではなくbarChartData、ローカル配列を作成してデータを構築します。barChartData次に、ローカル配列にすべてのデータが入力されたら、ローカル配列を割り当てます。Ng2Charts は、配列への参照が変更されるか、手動で再レンダリングを呼び出すまで再レンダリングしません。

EDIT2

データのタイプもnumber. あなたが持っているdata1 = '';

于 2017-08-04T18:38:41.083 に答える