ngx-charts呈現動態數據

我是ngx-charts的新手我試圖通過從bitstamp服務獲取數據來呈現動態比特幣數據。目標是在視覺上渲染比特幣數據（價格和時間戳）到圖表（價值和日期（從時間戳編號轉換爲實際日期）），並且只要比特幣數據更新，數據就會自動推送到圖表。我試圖從這個掠奪者申請類似的方法：https://plnkr.co/edit/JSTcS4FnJ5dshAldLWPL?p=preview。ngx-charts呈現動態數據

不過，我在市場上數據分量誤差，例如音調：

屬性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>

預先感謝您。

來源

2017-09-04 Hoàng Nguyễn

我想你會遇到問題，通過在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)});

來源

2017-11-16 15:31:53 Steffn

ngx-charts呈現動態數據

回答

相關問題