Angular6 и ng2-диаграммы не отображают никаких диаграмм, когда я заполняю данные из веб-сервиса

Question

Мне нужно реализовать некоторые диаграммы в моем проекте, но когда я заполняю данные из веб-сервиса, он ничего не показывает, может ли какой-либо орган сказать мне, почему это произошло, и как я могу решить эту проблему ??

Мой компонентis:

import { ChartService } from './../../services/chart.service';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  public doughnutChartLabels: string[] = ['Download Sales', 'In-Store Sales', 'Mail-Order Sales'];
  public doughnutChartData: number[] = [350, 450, 100];

  public countriesLabel: string[] = new Array();
  public countriestData: number[] = new Array();

  doughnutChartType = 'doughnut';

  constructor(private chartService: ChartService) { }

  ngOnInit() {
    this.chartService.getCountryGroupBy().subscribe(data => {

        data.data.forEach(country => {
          this.countriestData.push(country.count);
          this.countriesLabel.push(country.country);
        });

    });
  }

View: home.component.html

  <div class="row">
    <div class="form-group col-md-6">
      <div style="display: block">
        <canvas baseChart
                    [data]="countriestData"
                    [labels]="countriesLabel"
                    [chartType]="doughnutChartType"></canvas>
      </div>
    </div>

    <div class="form-group col-md-6">
      <div style="display: block">
        <canvas baseChart
                    [data]="doughnutChartData"
                    [labels]="doughnutChartLabels"
                    [chartType]="doughnutChartType"></canvas>
      </div>
    </div>
  </div>

serive: ChartService.ts

import { HttpClient, HttpErrorResponse, HttpHeaders } from '@angular/common/http';
import { Config } from './../libs/config';
import { Injectable } from '@angular/core';
import { map, catchError } from 'rxjs/internal/operators';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class ChartService {

  baseUrl = `${this.config.baseUrl}/chart`;
  constructor(private config: Config, private http: HttpClient) { }

    get setHeader(): HttpHeaders {
      const headersConfig = {
          'Content-Type': 'application/json',
          'Accept': 'application/json'
      };
      return new HttpHeaders( headersConfig );
    }

  getCountryGroupBy() {
    return this.http.get<any>(`${this.baseUrl}/countries`, {
      headers: this.setHeader,
      withCredentials: true}).pipe(
        map(response => {
            return response;
          }),
        catchError(this.handleError)
      );
  }

  handleError(error: HttpErrorResponse) {
    console.error('server error:', error);
    if (error.error instanceof Error) {
      const errMessage = error.error.message;
      return Observable.throw(errMessage);
      // Use the following instead if using lite-server
      // return Observable.throw(err.text() || 'backend server error');
    }
    return Observable.throw(error || 'Server error');
  }

}

и возвращение моего веб-сервиса:

{"status": 200, "data": [{"count": 30, "country": "FR"}, {"count": 13, "country": "NL"}, {"count": 4, "country": "IR"}], "message": null}

в этом случае первый график ничего не показывает, а второй работает успешно !!!!некоторые идеи ?спасибо

Answer 1

Попробуйте:

public countriesLabel: string[] = [{ data: [] }];
public countriestData: number[] = [{ data: [] }];

или

public countriesLabel: any[] = [{ data: [] }];
public countriestData: any[] = [{ data: [] }];

Я мог бы решить аналогичную проблему, изменив определение моих данных на этот формат.

Answer 2

Сам график выглядит нормально, поэтому я думаю, проблема в том, как вы пытаетесь заполнить свои массивы.

Вы проверили содержимое countriestData и countriesLabel?

Вы не показали, что именно возвращает chartService.getCountryGroupBy(), но я предполагаю, что это только тело ответа на запрос, поэтому вам, вероятно, придется изменить код на

this.chartService.getCountryGroupBy().subscribe(data => {

    data.forEach(country => {
      this.countriestData.push(country.count);
      this.countriesLabel.push(country.country);
    });

});