ngx-charts에서 동적 데이터를 렌더링합니다.

Question

새로운 기능 ngx-charts Bitstamp 서비스에서 데이터를 가져 와서 동적 비트 동전 데이터를 렌더링하려고합니다. 목표는 비트 코인 데이터 (가격 및 타임 스탬프)를 차트 (비트 값 및 날짜 (타임 스탬프 번호에서 실제 날짜로 변환))로 렌더링하는 것입니다. 비트 코인 데이터가 업데이트 될 때마다 데이터가 자동으로 차트로 푸시됩니다. 나는이 plunker에서 유사한 방법을 적용하려고 시도 : 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

나는 market-data-component.ts의 bitcoinData-array에서 타임 스탬프를 눌러 문제가 발생한다고 생각합니다. 이 라인 :

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