如何使用角度 4 动态渲染 ng2Chart（条形图）答案

【问题标题】：How to Render ng2Chart (Barchart ) dynamically using angular 4如何使用角度 4 动态渲染 ng2Chart（条形图）
【发布时间】：2018-01-12 18:38:45
【问题描述】：

我使用 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: Cannot read property 'data' of undefined

请参考我下面的代码。

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

【问题讨论】：

在哪里使用值property data？
data 是 barChartData 的对象。参见上面的虚拟数据并添加动态数据。

标签： angular angular2-forms ng2-charts angular4-forms

【解决方案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 = '';

【讨论】：

如果我在 ngIf 评论上方添加它总是显示空图表。请分享使用 ngchart 渲染动态条形图的示例代码
是的 data1 应该是一个数字数组。它工作正常。谢谢

【解决方案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[] = [ ]

【讨论】：

我已经试过了。但没有运气。我相信将对象添加到 barChartdata 的问题。但我找不到。
我已经在 loadkpiInfo 方法 ex 中初始化了数组。 chartData = new Array();这不是问题
是的，chartData 在您的onInit() 或之后分配给对象barChartdata。但是 DOM 在它被调用之前就被渲染了。因此，您面临undefined 错误

【解决方案3】：

首先你需要在 ngoninit() 之前初始化 barchart 数据属性确保您将 yuur 服务器数据呈现到正确的阵列 console.log 以验证然后为 eg:this.barChartData=[your array] 定义然后你会得到如果那不起作用在 html 中将 [datasets] 更改为 [data]

【讨论】：