json - Angular/ng2-图表 : Fetching json data in chart object showing: Cannot read property 'length' of undefined

Question

我正在获取以下形式的 json 数据:

[2193,3635,8417,0]

来自本地主机:8080。我希望这个数据集以饼图的形式充当 Canvas 数据。

这是一个.html代码:

<div>
  <canvas
      baseChart
      [chartType]="'pie'"
      [datasets]="pieChartData"
      [labels]="pieChartLabels"
      [options]="pieChartOptions"
      [legend]="true"
      [colors]="pieChartColor"
      (chartClick)="onChartClick($event)">
  </canvas>
</div>

这是一个.ts代码:

constructor(private router: Router, private userService: UserService,private http: HttpClient) { }

      pieChartOptions = {
        responsive: true
    }

    pieChartLabels =  ['PENDING', 'SUCCESS', 'FAIL', 'CREATED'];

    // CHART COLOR.
    pieChartColor:any = [
        {
            backgroundColor: ['rgba(30, 169, 224, 0.8)',
            'rgba(255,165,0,0.9)',
            'rgba(139, 136, 136, 0.9)',
            'rgba(255, 161, 181, 0.9)',
            ]
        }
    ]

    pieChartData:any = [
        { 
            data: []
        }
    ];

  ngOnInit() {

      this.http.get('http://localhost:8080/Graph', {responseType: 'json'}).subscribe(
        data => {
            this.pieChartData = data as any [];  // FILL THE CHART ARRAY WITH DATA.
        },
        (err: HttpErrorResponse) => {
            console.log (err.message);
        }
    );
  }


  onChartClick(event: any) {
    console.log(event);
}

但是在运行代码时，我看不到饼图，标签被删除线并出现此控制台错误:

ListUserComponent.html:25 ERROR TypeError: Cannot read property 'length' of undefined
    at ng2-charts.js:382
    at Array.filter (<anonymous>)
    at BaseChartDirective.push../node_modules/ng2-charts/fesm5/ng2-charts.js.BaseChartDirective.ngDoCheck (ng2-charts.js:377)
    at checkAndUpdateDirectiveInline (core.js:10100)
    at checkAndUpdateNodeInline (core.js:11363)
    at checkAndUpdateNode (core.js:11325)
    at debugCheckAndUpdateNode (core.js:11962)
    at debugCheckDirectivesFn (core.js:11922)
    at Object.eval [as updateDirectives] (ListUserComponent.html:25)
    at Object.debugUpdateDirectives [as updateDirectives] (core.js:11914)

代码有没有错误？我不确定 pieChartData 是否正确地获取了 json 对象，或者是否有任何其他方法来获取 json 数据？

请问，我能得到帮助吗？

Answer 1

当我试图复制你的代码时，我遇到了同样的问题，传说中有一个罢工......原因是 pieChartData:any 对象和数据的格式 [2193,3635,8417, 0] 被送入其中!!

您已将 pieChartData 定义为具有单个对象的数组，该对象具有由数组组成的数据属性。

pieChartData:any = [ { data: [] } ];

同时，这些值被设置为数字数组 [2193,3635,8417,0]，这意味着:

pieChartData:any = [];

要复制由您的 HTTP 调用引起的延迟...我使用了 setTimeout 并使表单按预期工作...

相关TS:

import { Component } from '@angular/core';
import { ChartType, ChartOptions } from 'chart.js';
import { Label } from 'ng2-charts';
import * as pluginDataLabels from 'chartjs-plugin-datalabels';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  name = 'Angular';
  someData: any[] = [];

  public pieChartOptions: ChartOptions = {
    responsive: true,
    legend: {
      position: 'top',
    },
    plugins: {
      datalabels: {
        formatter: (value, ctx) => {
          const label = ctx.chart.data.labels[ctx.dataIndex];
          return label;
        },
      },
    }
  };
  public pieChartLabels: Label[] = ['PENDING', 'SUCCESS', 'FAIL', 'CREATED'];
  public pieChartType: ChartType = 'pie';
  public pieChartLegend = true;
  public pieChartPlugins = [pluginDataLabels];
  public pieChartColors = [
    {
      backgroundColor: ['rgba(30, 169, 224, 0.8)',
        'rgba(255,165,0,0.9)',
        'rgba(139, 136, 136, 0.9)',
        'rgba(255, 161, 181, 0.9)',
      ]
    },
  ];
  //public pieChartData: number[] = [2193,3635,8417,0];
  public pieChartData: number[] = [];

  constructor() { }

  ngOnInit() {
    setTimeout(() => {
      this.someData = [300, 500, 100];
      this.pieChartData = this.someData;
    }, 5000);
  }

}

相关HTML:

<hello name="{{ name }}"></hello>

<div *ngIf='this.someData.length <=0'>
  Please wait while the latest data is fetched
</div>

<div *ngIf='this.someData.length >0'>
  We got data: {{this.someData.length}}

<div class="chart">
      <canvas baseChart
        [data]="pieChartData"
        [labels]="pieChartLabels"
        [chartType]="pieChartType"
        [options]="pieChartOptions"
        [plugins]="pieChartPlugins"
        [colors]="pieChartColors"
        [legend]="pieChartLegend">
      </canvas>
    </div>
</div>

工作 stackblitz available here