首页 > 解决方案 > 实时图表 Angular Laravel

问题描述

我想知道如何使用 angular anda laravel 制作实时图表,后端和通道正在工作,并且我在前面接收数据但是当我需要重新渲染或更改变量的值时图表这不起作用。

在后端我使用 pusher 和 laravel-websockets 在前面我使用 pusher 和 Laravel Echo

我有一个条形图,我正在对后面发送给我的所有内容进行过滤以将其分开。在我的尝试中我有这个

this.echo.private('channel-count')

      .listen('CountEvent', (resp: any) => {

        this.piezasContadasUno.push(resp.count);

        this.piezasContadasUnoLenght = this.piezasContadasUno.length;

        var listFilter = ['Juno A'];

        var JunoACounted = this.piezasContadasUno.filter(function(itm){
          return listFilter.indexOf(itm.linea) > -1
        })

        this.JUNOACounted = JunoACounted.length

        this.barChartData = [
                
          { data: [this.JUNOACounted, this.JUNOBCounted, this.JUNOCCounted, this.ZEUZBCounted, this.SECounted, this.ICEMAKERCounted, this.PRCounted], label: 'Conteo', stack: 'a' },
          { data: [this.JUNOATotal, this.JUNOBTotal, this.JUNOCTotal, this.ZEUZBTotal, this.SETotal, this.ICEMAKERTotal, this.PRTotal], label: 'Piezas', stack: 'a' }
    
        ]

      })

我在 onInit 中使用相同的方法对数据进行充电,直到组件开始,但是当我添加一些东西并且通道返回它并进行推送以添加到数组并将新长度分配给变量时,这不起作用, 启动组件时保持相同的值

标签: angularlaravelchartspusher

解决方案


推荐阅读