1


我想在 ngx-chart-gauge 中可视化一些实时数据。
我用这个演示建立了这个： https
: //swimlane.gitbooks.io/ngx-charts/content/v/6.0.2/charts/gauge.html 我从服务中获取我的实时数据并希望在ngx 图表仪表。我从 Service ClassdataproviderService获取数据，它将对象保存在数组“单个”中。
这是我的ngx-chart-gauge 组件：

import {Component, OnInit, OnChanges, AfterViewInit, AfterViewChecked, AfterContentChecked, AfterContentInit, NgModule} from '@angular/core';
import {NgxChartsModule} from '@swimlane/ngx-charts';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {BrowserModule} from '@angular/platform-browser';
import {TempdatagiaService} from '../paho/tempdatagia.service';
import {ClassdataproviderService} from '../mqtt/classdataprovider.service';
import * as d3 from 'd3';

@Component({
  selector: 'app-mqtt',
  templateUrl: './mqtt.component.html',
  styleUrls: ['./mqtt.component.css']
})
export class MqttComponent implements OnChanges {

  view: any[] = [700, 400];
  data: any[];
  multi: any[];
  autoScale = true;

  constructor(private classdataproviderServie: ClassdataproviderService) {
  }


  ngOnChanges() {

      this.data = this.classdataproviderServie.single;

  }



  colorScheme = {
    domain: ['#5AA454', '#A10A28', '#C7B42C']
  };

  onSelect(event) {
    console.log(event);
  }
}

这是ngx-chart-gauge.html

<ngx-charts-gauge
  [view]="view"
  [scheme]="colorScheme"
  [results]="data"
  [min]="0"
  [max]="100"
  [angleSpan]="240"
  [startAngle]="-120"
  [units]="'Temperature'"
  [bigSegments]="10"
  [smallSegments]="5"
  (select)="onSelect($event)">
</ngx-charts-gauge>

这是我的服务，我从中获取数据：

import { Injectable } from '@angular/core';
import { Component, OnInit } from '@angular/core';
import {Paho} from '../../../node_modules/ng2-mqtt/mqttws31';




@Injectable()
export class ClassdataproviderService {

  public name: string;
  public value: string;

  single = [
    {
      name: '1',
      value: '15'
    },
    {
      name: '2',
      value: '20'
    }/*,
    {
      name: '3',
      value: '73'
    }*/
  ];



// Create a client instance
  client: any;
  packet: any;

  constructor() {



    // this.client = new Paho.MQTT.Client('broker.mqttdashboard.com', 8000,  'clientId-FUp9rr6sZS');
    this.client = new Paho.MQTT.Client('wpsdemo.gia.rwth-aachen.de', 8080, 'Steffen');

    this.onMessage();
    this.onConnectionLost();
    // connect the client
    this.client.connect({onSuccess: this.onConnected.bind(this)});
  }

  // called when the client connects
  onConnected() {
    console.log('Connected');
    this.client.subscribe('node/m1/temperature');
    //this.sendMessage('HelloWorld');
  }

  sendMessage(message: string) {
    const packet = new Paho.MQTT.Message(message);
    packet.destinationName = 'node/m1/temperature';
    this.client.send(packet);
  }

  // called when a message arrives
  onMessage() {
    this.client.onMessageArrived = (message: Paho.MQTT.Message) => {
      console.log('Message arrived : ' + message.payloadString);
      this.single.push({name: 'test', value: message.payloadString});
      console.log(this.single);
    };
  }

  // called when the client loses its connection
  onConnectionLost() {
    this.client.onConnectionLost = (responseObject: Object) => {
      console.log('Connection lost : ' + JSON.stringify(responseObject));
    };
  }

当我尝试使用OnInit在仪表中注入数据时，仪表没有更新。为了解决这个问题，我尝试了 OnChanges，但现在我得到ERROR TypeError: Cannot read property 'big' of undefined...
我不知道是否可以在没有 OnChanges 的情况下自动更新仪表或如何避免使用 OnChanges 生命周期的 ERR钩？

4

2 回答 2

2

现在我尝试了许多解决方案，最有效的是使用可观察对象来观察我从中获取数据的服务。该服务将数据注入到 ngx-chart-component 中，并带有 observable，如下所示：

import { Injectable } from '@angular/core';
import { Component, OnInit } from '@angular/core';
import {Paho} from '../../../node_modules/ng2-mqtt/mqttws31';
import 'rxjs/add/observable/interval';
import {AddDataService} from './datawindow/addmqtt/formmqtt/addmqtt.service';

@Injectable()
export class ClassdataproviderService {
  public name: string;
  public value: string;

  single = [
    {
      name: '',
      value: ''
    }
  ];

// Create a client instance
  client: any;
  packet: any;

  constructor() {

   this.addDataService.componentMethodCalled$.subscribe(
  () => {
    this.client = new Paho.MQTT.Client('wpsdemo.gia.rwth-aachen.de', 8080, 'Steffen');
    this.onMessage();
    this.onConnectionLost();
    // connect the client
    this.client.connect({onSuccess: this.onConnected.bind(this)});
  }}

  // called when the client connects
  onConnected() {
    console.log('Connected');
    this.client.subscribe('node/m1/temperature');
    //this.sendMessage('HelloWorld');
  }

  sendMessage(message: string) {
    const packet = new Paho.MQTT.Message(message);
    packet.destinationName = 'node/m1/temperature';
    this.client.send(packet);
  }

  // called when a message arrives
  onMessage() {
    this.client.onMessageArrived = (message: Paho.MQTT.Message) => {
      console.log('Message arrived : ' + message.payloadString);
      this.single.push({name: 'test', value: message.payloadString});
      console.log(this.single);
    };
  }

  // called when the client loses its connection
  onConnectionLost() {
    this.client.onConnectionLost = (responseObject: Object) => {
      console.log('Connection lost : ' + JSON.stringify(responseObject));
    };
  }

现在，每次我获得新数据时都会更新单个数组，并且它与 ngx-charts 完美配合。并在仪表组件中使用 ngOnInit 作为生命周期钩子。

于 2017-12-04T09:58:22.790 回答
1

更改检测无法识别您尝试修改数据。

 this.data = this.classdataproviderServie.single;

而是尝试传播数据，这将检测到变化。它对我有用。

 this.data = [...this.classdataproviderServie.single];
于 2020-03-18T10:01:27.727 回答