angular - 实时图表 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 中使用相同的方法对数据进行充电,直到组件开始,但是当我添加一些东西并且通道返回它并进行推送以添加到数组并将新长度分配给变量时,这不起作用, 启动组件时保持相同的值
解决方案
推荐阅读
- php-7 - 在 PHP7.0 中将数组作为函数参数传递
- git - 在 git log 中从 git commit 正文中删除换行符
- javascript - 为什么我的 await 功能立即完成?
- java - 我有问题 java.lang.IndexOutOfBoundsException:索引:1,大小:1
- java - 春季 JPA。更新数据库值的正确方法
- c# - 无法匹配任何路由。URL 段:ANGULAR/MAIN
- javascript - 需要更改标题颜色甜甜圈高图
- c++ - 从字符串的末尾开始获取反向子字符串
- node.js - 根据定义的模式在集合中进行比较时,Mongoose 是否隐式转换字段的类型?
- java - Spring boot @Async 注解抛出 LazyInitializationException