问题描述
以下代码设法更新结果数组,但只有当我将鼠标悬停在图表上时,更改才会变得可见,就好像它只在 onFocus 事件上更新一样。有没有办法让图表元素与结果数组一起更新?
<ngx-charts-bar-vertical
[results]="chartdata"
xAxis=true
yAxis=true
>
</ngx-charts-bar-vertical>
ngOnInit() {
this.chartdata = [
{
"name": "entry1","value": 500
},{
"name": "entry2","value": 700
},{
"name": "entry3","value": 20
},{
"name": "entry4","value": 100
}
];
this.ngzone.runOutsideAngular(() => {
this.interval = setInterval(() => {
this.chartdata.push({name: "entry " + Date.Now().toString(),value: 150});
this.chartdata = [...this.chartdata];
},3000); //3 seconds
});
}
角度版本:11 "@swimlane/ngx-charts": "^18.0.1",
*编辑
正如 Michael D 指出的,问题在于我对 ngzone 的实现。
可以通过以下方式构建循环
this.ngzone.runOutsideAngular(() => {
this.ngzone.run(()=> {
this.interval = setInterval(() => {
console.log("refreshing");
this.chartdata.push({name: "entry" + Date.Now().toString(),value: 150});
this.chartdata = [...this.chartdata];
},3000); //3 seconds
});
}); // One minute
或
this.interval = setInterval(() => {
console.log("refreshing");
this.chartdata.push({name: "entry" + Date.Now().toString(),3000); //3 seconds
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)