Диаграмма JS создает несколько наборов данных и меток динамически - PullRequest
Новая
       13

Диаграмма JS создает несколько наборов данных и меток динамически

0 голосов
/ 10 марта 2020

Я использую Angular 8 с диаграммами ng2

У меня есть JSON проанализированная полезная нагрузка, которая выглядит следующим образом

... device_id: "abcdef" mqtttime: 1583865244943 sequence : 110 долгота: -88 широта: 42 станция: 9455 ie_load: 7 темп: 21,86 пре: 100140 фото: 0,712 ускорение: 262,136 ускорение: 0,04 ускорение: 1,008 ускорение: 262.13794109208993 ...

Полезная нагрузка может содержать переменный набор параметров.

относительно полезной нагрузки. Я знаю параметры (ключ), связанные с этой JSON полезной нагрузкой, из которой я хочу извлечь значения, которые выглядят как

keys = ["temp "," photo "," pres "] могут быть сделаны в случае необходимости

Идея состоит в том, чтобы использовать информацию в (ключах) для

  1. create al oop который будет использоваться для анализа полезной нагрузки JSON
  2. и извлечения значения, относящегося к этому ключу
  3. создать соответствующую комбинацию набора данных / метки
  4. pu sh данных и обновите диаграмму.

Диаграмма в этом se может быть многоосевой линейной / столбчатой ​​диаграммой.

То, что я до сих пор пробовал, это 

...@Input() keys: any[];  <-- this is where I get the keys to be looked into the myObject below

 @ViewChild(BaseChartDirective, { static: true }) chart: BaseChartDirective;

  public ChartLabels: string = "temp"; //

  public lineChartData: Array<number> = [];

  public lineChartLabels: Array<any> = [];

  // XAxis - Time Series
  public ChartData: Array<any> = [
    { data: this.lineChartData, label: this.ChartLabels },
  ];


  SubscribeToTopic(): void {

        this.subscription = this.mqttService
      .observe(this.ULtopicname)
      .subscribe((message: IMqttMessage) => {
        var _myObject = JSON.parse(message.payload.toString());
        var variable_names = {};

        /****** Push data to Chart ******/
        const _lineChartData = this.lineChartData;
        const _lineChartLabels = this.lineChartLabels;
        const _ChartLabels = this.ChartLabels;
        _lineChartData.push(_myObject.temp); // extract key values
        _lineChartLabels.push(Date.now()); //
        if (this.lineChartData.length > 20) {
          this.lineChartData.splice(0, 1);
          this.lineChartLabels.splice(0, 1);
        }
        this.lineChartData = _lineChartData;
        this.lineChartLabels = _lineChartLabels;
        console.log(this.lineChartData);
        this.chart.update();
      });
}
...