Question

我使用ng2charts模块来渲染图表。如果我尝试使用以下虚拟数据，条形图渲染正确。

打字稿

  public barChartOptions: any = {
    scaleShowVerticalLines: false,
    responsive: true
  };
  public barChartLabels: string[] = ['Label1', 'Label2', 'Label3'];
  public barChartType: string = 'bar';
  public barChartLegend: boolean = true;

  public barChartData: any[] = [
    { data: [65, 59, 80], label: 'Data1' },
    { data: [28, 48, 40], label: 'Data2' },
    { data: [30, 28, 80], label: 'Data3' }
  ];

组件Html：

<canvas style="height:230px" baseChart [datasets]="barChartData" [labels]="barChartLabels" [options]="barChartOptions" [legend]="barChartLegend" [chartType]="barChartType" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)"></canvas>

但是如果我试图从服务器获取数据并动态设置数据不能按预期工作。

我低于错误

HomeComponent.html：73 ERROR TypeError：无法读取未定义的属性“数据”

请参阅我的以下代码。

export class HomeComponent implements OnInit {

  serverData: any;

  public barChartOptions: any = {
    scaleShowVerticalLines: false,
    responsive: true
  };


  public barChartLabels: string[];
  public barChartType: string = 'bar';
  public barChartLegend: boolean = true;

  public barChartData: any[];


  constructor(private fb: FormBuilder, private Service: Service,
    private route: ActivatedRoute, private router: Router, private _configService: ConfigService) {
    this.getApis();
  }

  ngOnInit() {
    const loggedInUser = new LoggedInUser();
    const user = loggedInUser.getLoggedUser();
    if (user != null) {
      this.loggedInUserId = loggedInUser.getLoggedUser().UserId;
    }

  }

  getApis() {
    this._configService.get()
      .subscribe(c => {
        this.apiEndpoints = c;
        this.loadDashBoardDetails();
      },
      error => { this.msg = <any>error; });
  }

  loadDashBoardDetails() {
    this.indLoading = true;
    this.Service.get("APIENDPOINT")
      .subscribe(c => {
        this.serverData = c[0];
        this.loadserverData();
        this.indLoading = false;
      },
      error => {
        this.msg = <any>error;
      }

      );
  }
  loadserverData() {
    let chartData: any[];
    let data1 = '';
    let data2 = '';
    let data3 = '';
    this.barChartLabels = new Array<string>();
    chartData = new Array<any>();
    for (let _i = 0; _i < this.serverData.length; _i++) {
      this.barChartLabels.push(this.serverData[_i].Code);
      if (data1 === '') {
        data1 = this.serverData[_i].Target;
      } else {
        data1 = data1 + ',' + this.serverData[_i].data1;
      }

      if (data2 === '') {
        data2 = this.serverData[_i].data2;
      } else {
        data2 = data2 + ',' + this.serverData[_i].data2;
      }

      if (data3 === '') {
        data3 = this.serverData[_i].data3;
      } else {
        data3 = data3 + ',' + this.serverData[_i].data3;
      }
    }

    chartData.push({
      data: data1,
      label: 'data1 label'

    });

    chartData.push({
      data: data2,
      label: 'data2 label'

    });

    chartData.push({
      data: data3,
      label: 'data3 label'

    });

    this.barChartData = chartData;
  }
 }

Answer 1

您收到该错误，因为在呈现图表时数据未定义。您可以在图表上使用*ngIf来避免这种情况

<canvas
    *ngIf="barChartData"
    baseChart
    style="height:230px" 
    [datasets]="barChartData" 
    [labels]="barChartLabels" 
    [options]="barChartOptions" 
    [legend]="barChartLegend" 
    [chartType]="barChartType" 
    (chartHover)="chartHovered($event)" 
    (chartClick)="chartClicked($event)">
</canvas>

在解析数据之前，不会呈现上述HTML。一旦数据被重新调整并且barChartData不再未定义，将呈现图表。

编辑：

如果继续向barChartData数组添加数据，图表将不会重新呈现。获取数据后，不要将其推送到barChartData数组，而是创建一个本地数组来构建数据。然后在本地数组中填充所有数据时将本地数组分配给barChartData。 Ng2Charts不会重新渲染，直到对数组的引用发生更改或您手动调用它才能重新呈现。

EDIT2

您的数据也应该是number类型。你有data1 = '';

Answer 2

将ngIf的条件修改为barchartData.length > 0

<div *ngIf="barChartData.length > 0"
    <canvas
        baseChart
        style="height:230px" 
        [datasets]="barChartData" 
        [labels]="barChartLabels" 
        [options]="barChartOptions" 
        [legend]="barChartLegend" 
        [chartType]="barChartType" 
        (chartHover)="chartHovered($event)" 
        (chartClick)="chartClicked($event)">
    </canvas>
</div>

更新1：

是的，你没有初始化数组。

public barChartData: any[] = [ ]

Answer 3

首先，您需要在ngoninit（）之前初始化barchart数据属性。确保已将yuur服务器数据呈现到适当的阵列控制台。将其记录以进行验证然后为例如：this.barChartData = [your array]定义，那么如果不起作用，您将得到将[datasets]更改为html中的[data]

如何使用角度4

3 个答案: