Angular 6服务数据未填充ngx图表

时间:2019-02-24 05:50:26

标签: angular ngx-charts

我正在从Angular服务中提取数据,并尝试填充和ngx条形图。

export class CustomersComponent implements OnInit {

  customers: Customer[];

  single: any = [
    {
      "name": [],
      "value": []
    }      
  ];

  view: any[] = [700, 400];

  // options for the chart
  showXAxis = true;
  showYAxis = true;
  .......

我正在遍历数据以获取单个结果,然后将其传递给图表。

ngOnInit(): void {
this.getCustomers();
this.customerService.getCustomers().subscribe(res => res.forEach((item, i , res) => {this.single.push({name:(item.firstname), value: (item.age) }) }));
this.single = [...this.single];
console.log(this.single),
(err) => {console.log(err)};
}

我可以在控制台中看到数据,但它不会填充图表。我还注意到我的第一个对象为空,而下一个对象已填充。

enter image description here

这就是为什么图表中没有填充数据的原因吗?任何帮助是极大的赞赏。

1 个答案:

答案 0 :(得分:1)

这是我面临的类似问题,

该解决方案将如下所述手动刷新,

按如下所示声明变量_chart,

@ViewChild(BaseChartDirective) private _chart;

您可以使用以下功能刷新

 forceChartRefresh() {
    setTimeout(() => {
      this._chart.refresh();
    }, 10);
  }

并在更新数据后致电

 this.forceChartRefresh();