使用 ng2-charts 显示实时数据
Show realtime data with ng2-charts
我在使用 ng2 图表显示实时数据时遇到了一些问题,它总是随时显示 0。我在下面粘贴了我的代码片段。谁能帮我检查一下,告诉我哪里做错了?
temps: Array<number> = [];
public lineChartData: Array<any> = [[]];
custom: boolean = false;
report: boolean = false;
errMess: any;
keys: any[] = []
constructor(public dialog: MatDialog,
private dishService: DishService,){}
public lineChartLabels: Array<any> = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
public lineChartType: string = 'line';
ngOnInit() {
this.dishService.getTemp()
.subscribe(temps => {
for (let key in temps[0]) {
for (var _i = 0; _i < temps.length; _i++) {
this.keys.push(temps[_i][key]);
}
}
console.log(this.keys);
this.lineChartData.push(this.keys);
});
}
这是 ng2-charts 的已知问题,您需要手动让 angular 知道您已更新数据,
在下面一行之后做这样的事情,
this.lineChartData.push(this.keys);
this.forceChartRefresh();
函数变为,
forceChartRefresh() {
setTimeout(() => {
this._chart.refresh();
}, 10);
}
并且您需要在组件内部添加一个变量,
@ViewChild(BaseChartDirective) private _chart;
编辑
要查看每 5 分钟更新一次的图表,您可以使用
this.interval = setInterval(() => {
callyour function();
}, 5000);
我在使用 ng2 图表显示实时数据时遇到了一些问题,它总是随时显示 0。我在下面粘贴了我的代码片段。谁能帮我检查一下,告诉我哪里做错了?
temps: Array<number> = [];
public lineChartData: Array<any> = [[]];
custom: boolean = false;
report: boolean = false;
errMess: any;
keys: any[] = []
constructor(public dialog: MatDialog,
private dishService: DishService,){}
public lineChartLabels: Array<any> = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
public lineChartType: string = 'line';
ngOnInit() {
this.dishService.getTemp()
.subscribe(temps => {
for (let key in temps[0]) {
for (var _i = 0; _i < temps.length; _i++) {
this.keys.push(temps[_i][key]);
}
}
console.log(this.keys);
this.lineChartData.push(this.keys);
});
}
这是 ng2-charts 的已知问题,您需要手动让 angular 知道您已更新数据,
在下面一行之后做这样的事情,
this.lineChartData.push(this.keys);
this.forceChartRefresh();
函数变为,
forceChartRefresh() {
setTimeout(() => {
this._chart.refresh();
}, 10);
}
并且您需要在组件内部添加一个变量,
@ViewChild(BaseChartDirective) private _chart;
编辑
要查看每 5 分钟更新一次的图表,您可以使用
this.interval = setInterval(() => {
callyour function();
}, 5000);