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

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

ngx-charts呈现动态数据

2 个答案: