如何通过Websocket的数据动态更新Ngx图表的条形图

Posted 2023-02-16

【中文标题】如何通过Websocket的数据动态更新Ngx图表的条形图

【英文标题】：How to update Barchart of Ngx-charts graph dynamically in angular through the Websocket's data

【发布时间】：2019-07-09 08:18:03

【问题描述】：

我正在创建基于角度的仪表板，仪表板包含 NGX 图表。我想动态更新条形图 wrt web socket。 在这里，通过 web socket 获取数据。并且需要动态更新条形图。如果将单个条形图添加到仪表板，那么我可以使用 Web 套接字的数据更新条形图。但无法更新条形图，如果将多个条形图添加到仪表板。与往常一样，它正在更新最后添加的条形图。例如：- 如果在仪表板中添加了三个条形图。然后它总是更新通过网络套接字添加的最后一个条形图。请帮帮我。我坚持下去。

BarchartGadget.component.ts

// 这是websocket，从websocket服务类获取数据。通过获取将数据转换为 ngx batchart 数据格式支持的 Json 数据。并将格式化的json数据推送到条形图数据中。

     this.websocket = this.observableWebSocketService.createObservableWebSocket(this.CHAT_URL + this.token).subscribe(data=> 
          this.dataPointData = JSON.parse(data);
          console.log("web soket data received"+JSON.stringify(data));
          var date = new Date(this.dataPointData.payload.value.timestamp);
          this.webSocketData =
          
            "name": date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds(),
            "series": [
              
                "name": this.dataPointData.payload.value.dataType,
                "value": this.dataPointData.payload.value.value
              
            ]
          


          this.JsonData.push(this.webSocketData);
          this._barChartService.getData(this.endpointObject.address)
            .subscribe(data => 
               Object.assign(this, data);
              if (this.JsonData.length > 6) 
                this.JsonData.shift();
              
              for (var i = 0; i < this.JsonData.length; i++) 
                this.data.push(this.JsonData[i]);
              
            ,
              error => this.handleError(error));
        );

// 这里创建连接需要一些等待时间。并调用 sendmessage 与 websocket 建立连接

        const _timer = timer(this.waitForConnectionDelay);
        _timer.subscribe(t => 
          for(var i=0;i<this.dpXId.length;i++) 
            this.message = 
              "xid": this.dpXId[i],
              "eventTypes": ["CHANGE", "UPDATE"]
            ;
            this.observableWebSocketService.sendMessage(this.message);
          
        );

我希望更新所有添加到从 websocket 获取的数据中的条形图。 // 如图所示，只有第二个图表（它列在队列的最后一个）正在使用 websocket 数据动态更新。

【参考方案1】：

如果是三个条形图，您需要创建您正在使用的条形图库的 3 个对象，然后将数据传递给每个对象。这将显示不同的条形图 w.r.t 提供的数据。

【讨论】：

感谢您的回复。你能解释一下吗？因为每 5 秒 websocket 会抛出三个图表的数据。但我不知道如何将这些数据推送到各自的条形图。@waqas