ng2-charts Bitcoin 라이브 차트

Question

나는 초보자이고 ng2 차트 라이브러리를 사용하여 라이브 Bitcoin 차트를 렌더링하려고하는데 데이터를 가져 왔지만 어떻게 든 차트로 데이터를 시각화하는 방법을 알지 못했습니다. 이 같은 데이터의 구조는 무엇인가 :

"BPI": { "2017년 8월 11일": 3679.6074, "2017년 8월 12일": 3917.6487, "2017년 8월 13일": 4111.1963 https://api.coindesk.com/v1/bpi/historical/close.json

이 내가 그것을 만들고 싶어 모델 차트는 다음과 같습니다 :}

이것은 API입니다

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

템플릿 :

다음

33,210 내 코드입니다

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

미리 감사드립니다.

편집 : 차트에 데이터가 있지만 어떻게 든 시각화되지 않습니다.

Answer 1

당신은해야한다 :

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

이 내가 오류없이 얻은 차트 :

이

내가 (나머지는 동일)에 component.ts 파일의 코드를 변경하는 방법입니다 다음과 같이 데이터 및 라벨 배열을 채 웁니다.

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