角度4折线图数据不显示来自http的数据获取
我正在尝试使用Angular 4和chart.js使用由http get方法提供的数据库中的数据创建折线图。 现状是奇怪:角度4折线图数据不显示来自http的数据获取
export class ValvesComponent implements OnInit { valves: Valve[];
ignitions: number[] = [8, 5, 8, 9, 5, 3];
dates: Date[];
selectedValve: Valve;
lineChartData: Array<any>;
constructor(private dataService: DataService) {
this.dataService.getIgnitions().then(ignitions => this.ignitions = ignitions);
this.lineChartData = [{data: this.ignitions, label: 'Series Z'}];
}
我声明阵列点火:使用随机值数[]。然后在构造函数中,我为这个折线图数据设置了新的值,但它不起作用。 当我在html文件中列出所有点火值时,一切正常,数据与我的get方法返回一样。但图表仍显示旧的。 这是我如何得到这些数据:
getIgnitions(): Promise<number[]> { return this.http.get(this.ignitionsUrl)
.toPromise()
.then(response => response.json() as number[])
.catch(this.handleError);
}
,并在从控制器端的Java方法。
@GetMapping("/valve/findallignitions") public Integer [] findAllIgnitions() {
Iterable<Valve> valvess = valveRepository.findAll();
List<Integer> valves = new ArrayList<>();
Integer [] valvesArray = {1};
for (Valve v : valvess) {
valvesArray = addElement(valvesArray, v.getIgnition());
}
return valvesArray;
}
我应该怎么做,使工作正常,获取数据FRM HTTP GET在我的折线图?
在此先感谢您的帮助!
回答:
这与NG2-图表的一个常见问题,你将不得不调用再拉法这样NG2,图表知道更新chart.Because它不看数据的变化,你必须手动告诉它更新。
您的组件内部
@ViewChild(BaseChartDirective) private _chart;
参考,并刷新图表如下,
forceChartRefresh() { setTimeout(() => {
this._chart.refresh();
}, 10);
}
constructor(private dataService: DataService) {
this.dataService.getIgnitions().then(ignitions => this.ignitions = ignitions);
this.lineChartData = [{data: this.ignitions, label: 'Series Z'}];
this.forceChartRefresh();
}
以上是 角度4折线图数据不显示来自http的数据获取 的全部内容, 来源链接: utcz.com/qa/259125.html