如何解决Ngx-charts 仅在悬停时更新
以下代码设法更新结果数组,但只有当我将鼠标悬停在图表上时,更改才会变得可见,就好像它只在 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 举报,一经查实,本站将立刻删除。