ngx-диаграммы отображают динамические данные

Question

Я новичок в ngx-чартах. Я пытаюсь визуализировать динамические данные биткойнов, получая данные из сервиса битовых меток. Цель состоит в том, чтобы визуально визуализировать данные биткойна (цена и временная метка) на графике (значение и дата (преобразовать в фактическую дату из номера временной метки)), и всякий раз, когда данные биткойна обновляются, данные автоматически помещаются на график. Я пытался применить подобный метод из этого плункера: https://plnkr.co/edit/JSTcS4FnJ5dshAldLWPL?p=preview.

Тем не менее, я получил тонны ошибок в компоненте рыночных данных, таких как:

атрибут d: ожидаемое число, "M0,NaNZ". атрибут cy: ожидаемая длина, "NaN".

Я не знаю, на каком шаге я поступил неправильно. Вот соответствующие сценарии:

bitstamp.service.ts:

import Pusher from 'pusher-js';
import { Injectable, Output, EventEmitter } from '@angular/core';
import { Observable } from 'rxjs/Observable'
import { BehaviorSubject } from "rxjs/Rx";
import { List } from 'immutable';

@Injectable()
export class BitstampService {
  private pusher: any;

  private _messages: BehaviorSubject<any> = new BehaviorSubject(null);
  public messages: Observable<any> = this._messages.asObservable();

  constructor() {
    this.pusher = new Pusher('de504dc5763aeef9ff52');
    this.pusher.logToConsole = true;

    let channel = this.pusher.subscribe('live_trades');
    channel.bind('trade', (data) => {
      this._messages.next(data);
    });
  }
}

маркет-data.component.ts:

import { Component, OnInit } from '@angular/core';
import { BitstampService } from '../../services/bitstamp.service';
import { Subject } from "rxjs/Subject";

@Component({
  selector: 'app-market-data',
  templateUrl: './market-data.component.html',
  styleUrls: ['./market-data.component.scss']
})
export class MarketDataComponent implements OnInit {

  private ngUnsubscribe: Subject<void> = new Subject<void>();

  bitcoinData: any = [
    {
      name: 'Bitcoin',
      series: [
        {
          "name": new Date,
          "value": Number
        }
      ]
    }
  ];

  view: any[] = [960, 500];

  // options
  showXAxis = true;
  showYAxis = true;
  gradient = false;
  showLegend = true;
  showXAxisLabel = true;
  xAxisLabel = 'Year';
  showYAxisLabel = true;
  yAxisLabel = 'USD';
  intervalId:any;

  colorScheme = {
    domain: ['#DC143C', '#A10A28', '#C7B42C', '#AAAAAA']
  };

  // line, area
  autoScale = true;

  constructor(private bitstamp: BitstampService) {
  }

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

  ngOnInit() {
      this.bitstamp.messages.takeUntil(this.ngUnsubscribe).subscribe(data => {
        if (data != null) {
          this.bitcoinData[0].series.push({"name": new Date(parseInt(data.timestamp)*1000), "value": Math.floor(data.price)});
        }
        this.bitcoinData = [...this.bitcoinData];
      }, (err) => {
        console.log(err);
      });
  }

  ngOnDestroy() {
    this.ngUnsubscribe.next();
    this.ngUnsubscribe.complete();
  }
}

рынок data.component.html:

<ngx-charts-line-chart
        [view]="view"
        [scheme]="colorScheme"
        [results]="bitcoinData"
        [gradient]="gradient"
        [xAxis]="showXAxis"
        [yAxis]="showYAxis"
        [legend]="showLegend"
        [showXAxisLabel]="showXAxisLabel"
        [showYAxisLabel]="showYAxisLabel"
        [xAxisLabel]="xAxisLabel"
        [yAxisLabel]="yAxisLabel"
        [autoScale]="autoScale"
        (select)="onSelect($event)">
      </ngx-charts-line-chart>

Заранее спасибо.

Answer 1

Я думаю, что вы сталкиваетесь с проблемами, нажимая метку времени в массиве bitcoinData в вашем market-data-component.ts. С этой строкой:

this.bitcoinData[0].series.push({"name": new Date(parseInt(data.timestamp)*1000), "value": Math.floor(data.price)});

Это должно работать:

this.bitcoinData[0].series.push({"name": String( new Date()), "value": Math.floor(data.price)});

Answer 2

Вы пытаетесь изменить данные не распознается обнаружением изменений.

this.bitcoinData[0].series.push({"name": new Date(parseInt(data.timestamp)*1000), "value": Math.floor(data.price)});

вместо этого попробуйте распределить данные, чтобы обнаружить изменения. У меня это сработало.

this.bitcoinData[0].series = [...this.bitcoinData[0].series, ...[{"name": new Date(parseInt(data.timestamp)*1000), "value": Math.floor(data.price)}];