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 (将#修改为@)