微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

Ngx-charts 仅在悬停时更新

如何解决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 举报,一经查实,本站将立刻删除。