Question

我需要在项目中实现一些图表，但是当我从Web服务填充数据时它什么也没显示，请问有谁可以告诉我它为什么发生以及如何解决这个问题？

我的组件是：

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);
        });

    });
  }

视图：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');
  }

}

和我的网络服务返回：

{“状态”：200，“数据”：[ { “计数”：30， “ country”：“ FR” }， { “ count”：13， “国家”：“ NL” }， { “ count”：4， “ country”：“ IR” }]，“ message”：null}

在这种情况下，第一个图表未显示任何内容，第二个图表成功显示！一些想法？谢谢

Answer 1

图表本身看起来不错，所以我想问题在于您尝试填充数组的方式。

您是否已检查countriestData和countriesLabel的内容？

您没有显示确切的chartService.getCountryGroupBy()返回的内容，但是我想它只是请求的响应主体，因此您可能必须将代码更改为

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

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

});

Answer 2

尝试一下：

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

或

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

我可以通过将数据的定义更改为这种格式来解决类似的问题。

当我从Web服务填充数据时，Angular6和ng2-charts不显示任何图表

2 个答案: