Как динамически обновлять граф Barchart из Ngx-диаграмм по данным Websocket - PullRequest
0 голосов
/ 09 июля 2019

Я создаю угловую приборную панель, и приборная панель содержит график NGX.я хочу динамически обновлять гистограмму с веб-сокетом.Здесь, выборка данных через веб-сокет.и нужно динамически обновлять гистограмму. Если на панель инструментов добавлена ​​одиночная гистограмма, я могу обновить гистограмму данными веб-сокета.но не может обновить гистограмму, если на панель инструментов добавлено более одной гистограммы.Как всегда, это обновление последней добавленной гистограммы.например: - если на приборной панели добавлено три гистограммы.тогда он всегда обновляет последнюю гистограмму, добавленную через веб-сокет.пожалуйста, помогите мне.Я застрял в этом.

BarchartGadget.component.ts

// Это веб-сокет, извлекающий данные из класса обслуживания веб-сокета.с извлечением, преобразовывающим данные в поддерживаемые данные Json для формата данных пакетной обработки ngx.и отправка форматированных данных 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 enter image description here

        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.// Как и на рисунке, только 2-й график (он указан в последней очереди) динамически обновляется с данными веб-сокета.

1 Ответ

0 голосов
/ 09 июля 2019

В случае трех гистограмм вам необходимо создать 3 объекта из используемой вами библиотеки гистограмм, а затем передать данные каждому объекту. Это покажет различные гистограммы с предоставленными данными.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...