1

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

市场数据.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();
  }
}

市场数据.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>

这是图表图像，它推送数据但空白图表，日期可能只是分钟和秒，不包括我想要的实时日期

先感谢您。

4

2 回答 2

2

我认为您通过在 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-16T15:31:53.847 回答
1

更改检测无法识别您尝试修改数据。

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)}];
于 2020-03-18T10:08:26.803 回答