Question

我是新手，我试图使用ng2-chart库渲染实时比特币图表，我获取了数据但不知何故我不知道如何将数据可视化到图表中由于结构这样的数据：

＆＃34; bpi＆＃34;：{ ＆＃34; 2017-08-11＆＃34;：3679.6074，＆＃34; 2017-08-12＆＃34;：3917.6487，＆＃34; 2017-08-13＆＃34;：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比特币实时图表

1 个答案: