0

我使用 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 错误类型错误：无法读取未定义的属性“数据”

请参考我下面的代码。

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

3 回答 3

2

您收到该错误是因为在呈现图表时数据未定义。您可以通过*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 不会重新渲染，直到对数组的引用发生更改或您手动调用它重新渲染。

编辑2

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

于 2017-08-04T18:38:41.083 回答
1

修改条件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[] = [ ]
于 2017-08-04T18:53:00.133 回答
0

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

于 2020-05-27T04:22:56.893 回答