Карта JSON для Chartjs с Angular 7 - PullRequest
Новая
       25

Карта JSON для Chartjs с Angular 7

0 голосов
/ 03 декабря 2018

Я пытаюсь отобразить данные JSON, чтобы отобразить их в гистограмме.Конечный массив, который мне нужен, должен выглядеть следующим образом: [883, 5925, 17119, 27114, 2758].На самом деле, массив, который я хочу использовать для установки barChartData (dringlichkeitenValues ​​[]), кажется пустым.Извините за мои плохие навыки кодирования.Может кто-нибудь показать мне, как решить эту проблему?

JSON: 

[{
    "id": 1,
    "value": 883
},
{
    "id": 2,
    "value": 5925
},
{
    "id": 3,
    "value": 17119
},
{
    "id": 4,
    "value": 27144
},
{
    "id": 5,
    "value": 2758
}]

api.service.ts 

getDringlichkeiten(): Observable<IDringlichkeit[]> {
    return this.http.get<IDringlichkeit[]>(this.ROOT_URL + '/aufenthalte/dringlichkeit');}

dringlichkeit.ts 

  export interface IDringlichkeit {
  id: number;
  value: number;
}

bar-chart.component.ts 

   export class BarChartComponent implements OnInit {

  public dringlichkeitValues:number[] = [];
  public dringlichkeiten: IDringlichkeit[];
  public barChartLabels:String[] = ["1", "2", "3", "4", "5"];
  public barChartData:number[] = this.dringlichkeitValues;
  public barChartType:string = 'bar';

  constructor(private aufenthaltService: AufenthaltService) {

  }

  ngOnInit() {
    this.loadData();
    this.getDringlichkeitValues();
  }

  loadData(){

    this.aufenthaltService.getDringlichkeiten()
    .subscribe( data => this.dringlichkeiten = data);
  }

  getDringlichkeitValues(){
    let dringlichkeitValues:number[]=[];
    this.dringlichkeiten.forEach(dringlichkeit=>{
      dringlichkeitValues.push(dringlichkeit.value)
      this.dringlichkeitValues = dringlichkeitValues;
    });
    return this.dringlichkeitValues;
  }

}

ОБНОВЛЕНИЕ: Я обновил свой компонент, но теперь мой массив все еще пуст после подписки на Observable.

bar-chart.component.ts 

chart: Chart;
  dringlichkeiten: IDringlichkeit[] = [];


  constructor(private aufenthaltService: AufenthaltService) {
  }

  ngOnInit() {

    this.aufenthaltService.getDringlichkeiten()
    .subscribe( data => {
      this.dringlichkeiten = data;

      //dringlichkeiten-Array full
      console.log(this.dringlichkeiten);
    });

    //dringlichkeiten-Array empty
    console.log(this.dringlichkeiten);


    this.chart = new Chart('canvas', {
      type: 'bar',
      data: {
        labels: this.dringlichkeiten.map(x => x.id),
        datasets: [
          {
            label: 'Dringlichkeiten',
            data: this.dringlichkeiten.map(x => x.value),
            backgroundColor: ['#FF6384', '#4BC0C0', '#FFCE56', '#E7E9ED', '#36A2EB']
          }
        ]
      },
    });


  }

1 Ответ

0 голосов
/ 03 декабря 2018

Чтобы получить «значения» из вашего массива JSON, вы можете использовать: 

dringlichkeiten.map(x => x.value)

Это даст вам требуемый массив, то есть: 

[883, 5925, 17119, 27114, 2758]

Затем вы можетепередайте этот массив в chartJS, чтобы он представлял вам диаграмму следующим образом: 

this.chart = new Chart('canvas', {
  type: 'bar',
  data: {
    labels: dringlichkeiten.map(x => x.id),
    datasets: [
      {
        label: 'My Bar Chart',
        data: dringlichkeiten.map(x => x.value),
        backgroundColor: ['red', 'green', 'yellow', 'blue', 'orange']
      }
    ]
  },
});

Взгляните на этот упрощенный рабочий пример SlackBlitz.

Надеюсь, это поможет!

...