ngx-charts rend les données dynamiques

Question

Je suis nouveau sur ngx-charts J'essaie de rendre les données dynamiques bitcoin en récupérant les données du service bitstamp. Le but est de rendre visuellement les données bitcoin (prix et horodatage) au graphique (valeur et date (convertir en date réelle du numéro d'horodatage)), et chaque fois que les données bitcoin sont mises à jour, les données sont automatiquement transmises au graphique. J'ai essayé d'appliquer une méthode similaire à partir de ce plunker: https://plnkr.co/edit/JSTcS4FnJ5dshAldLWPL?p=preview.

Cependant, je suis arrivé tons d'erreurs dans la composante des données du marché telles que:

attribut d: nombre attendu, « M0, Nanz ». attribut cy: longueur attendue, "NaN".

Je ne sais pas à quelle étape je me suis trompé. Voici les scripts pertinents:

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); 
    }); 
    } 
} 

marché-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(); 
    } 
} 

marché 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> 

Merci d'avance.

Answer 1

Je pense que vous rencontrez des problèmes en poussant l'horodatage dans le tableau de bits de données dans votre market-data-component.ts. Avec cette ligne:

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

Cela devrait fonctionner:

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