如何利用Websocket数据在角度上动态更新Ngx-charts图表的柱状图

Question

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

BarchartGadget.component.ts

//这是websocket，从websocket服务类获取数据。通过抓取将数据转换为ngx批处理图数据格式所支持的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);
          }
        });

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

Answer 1

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