ng2-charts 比特币实时图表

Question

我是新手，我正在尝试使用 ng2-charts 库呈现实时比特币图表，我获取了数据，但不知何故，由于数据结构，我不知道如何将数据可视化到图表中像这样的东西：

"bpi": { “2017-08-11”：3679.6074， “2017-08-12”：3917.6487， “2017-08-13”：4111.1963}

这是api：https://api.coindesk.com/v1/bpi/historical/close.json

这是我要制作的模型图：https://www.coindesk.com/price/

这是我的代码：

历史-bpi.service.ts:

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';

@Injectable()
export class HistoricalBpiService {

  private JsonBaseUrl: string = 'https://api.coindesk.com/v1/bpi/';

  constructor(private http:Http) { }

  getBpiData(url: string){
    return this.http.get(this.JsonBaseUrl+url)
      .map(res => res.json());
  }
}

市场-data.component.ts:

import { Component, OnInit } from '@angular/core';
import { HistoricalBpiService } from '../../services/historical-bpi.service';

@Component({
  selector: 'app-market-data',
  templateUrl: './market-data.component.html',
  styleUrls: ['./market-data.component.scss']
})
export class MarketDataComponent implements OnInit {

  private dataUrl: string = 'historical/close.json';

  constructor(private historicalBpiService:HistoricalBpiService){}

  // lineChart
  public lineChartData:Array<any> = [
    {data:[]} 
  ];

  public lineChartLabels:Array<any> = [];
  public lineChartOptions:any = {
    responsive: true
  };
  public lineChartColors:Array<any> = [
    { // grey
      backgroundColor: 'rgba(148,159,177,0.2)',
      borderColor: 'rgba(148,159,177,1)',
      pointBackgroundColor: 'rgba(148,159,177,1)',
      pointBorderColor: '#fff',
      pointHoverBackgroundColor: '#fff',
      pointHoverBorderColor: 'rgba(148,159,177,0.8)'
    },
    { // dark grey
      backgroundColor: 'rgba(77,83,96,0.2)',
      borderColor: 'rgba(77,83,96,1)',
      pointBackgroundColor: 'rgba(77,83,96,1)',
      pointBorderColor: '#fff',
      pointHoverBackgroundColor: '#fff',
      pointHoverBorderColor: 'rgba(77,83,96,1)'
    },
    { // grey
      backgroundColor: 'rgba(148,159,177,0.2)',
      borderColor: 'rgba(148,159,177,1)',
      pointBackgroundColor: 'rgba(148,159,177,1)',
      pointBorderColor: '#fff',
      pointHoverBackgroundColor: '#fff',
      pointHoverBorderColor: 'rgba(148,159,177,0.8)'
    }
  ];
  public lineChartLegend:boolean = false;
  public lineChartType:string = 'line'; 

  // events
  public chartClicked(e:any):void {
    console.log(e);
  }

  public chartHovered(e:any):void {
    console.log(e);
  }

  ngOnInit(){
    this.historicalBpiService.getBpiData(this.dataUrl)
      .subscribe(
        res => {
          this.lineChartData[0].data.push(res.bpi);
          this.lineChartLabels.push(res.bpi);
          this.lineChartData = [...this.lineChartData];
          this.lineChartLabels = [...this.lineChartLabels];
          console.log(this.lineChartData);
        }
      )
  }
}

模板：

<div class="container">
  <div style="display: block;">
    <canvas baseChart
      [datasets]="lineChartData"
      [labels]="lineChartLabels"
      [options]="lineChartOptions"
      [colors]="lineChartColors"
      [legend]="lineChartLegend"
      [chartType]="lineChartType"
      (chartHover)="chartHovered($event)"
      (chartClick)="chartClicked($event)"></canvas>
  </div>  
</div>

提前致谢。

编辑：我将数据放入图表中，但不知何故它仍然没有可视化。

这是我在component.ts文件中修改代码的方式（其余相同）：

ngOnInit(){
    this.historicalBpiService.getBpiData(this.dataUrl)
      .subscribe(
        res => {
          this.lineChartData.push(Object.values(res.bpi));
          this.lineChartLabels.push(Object.keys(res.bpi));
          this.lineChartData = [...this.lineChartData];
          this.lineChartLabels = [...this.lineChartLabels];
          console.log(this.lineChartData,this.lineChartLabels);
        }
      )
  }

这是我得到的没有任何错误的图表：

Answer 1

您应该像这样填充数据和标签数组：

...
ngOnInit() {
  this.historicalBpiService.getBpiData(this.dataUrl)
    .subscribe(
      res => {
        this.lineChartData[0].data.push(...Object.values(res.bpi));
        this.lineChartLabels.push(...Object.keys(res.bpi));
        //console.log(this.lineChartData,this.lineChartLabels);
      }
    )
}
...

ng2-charts 比特币实时图表

ng2-charts Bitcoin live chart

bitcoin

angular-cli

ng2-charts