Angular / ng2-charts: выборка данных json в объекте диаграммы с указанием: не удается прочитать свойство 'length' из неопределенного

Question

Я получаю данные json в форме:

[2193,3635,8417,0]

с локального хоста: 8080.Я хочу, чтобы этот набор данных действовал как данные холста в виде круговой диаграммы.

Вот код one.html:

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

Вот код one.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: любой объект и данные [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>

рабочий стек-блиц доступен здесь