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呈现动态数据

回答

相关问题