Je construis un graphique bitcoin par Angular 4 universel intégré avec le noyau asp.net. J'ai fait des requêtes http à partir des points d'extrémité api (https://www.coindesk.com/api/) qui ont retourné les données pour visualiser un graphique. Chaque fois que je recharge la page, l'affichage du graphique est toujours retardé d'environ 1-2 secondes car il extrait les données du serveur. Je veux demander d'autres solutions pour éviter cela, le but principal est de faire en sorte que le pré-rendu rapide du tableau soit le même que celui des textes en clair sur le modèle. Par conséquent, je pense à stocker les données API dans le stockage local, de sorte que le rechargement de la page extrait les données du stockage local qui rend le rendu rapide. Est-il possible de faire ça?Stockez et mettez à jour les données API dans le stockage local pour les pages de préchargement rapide
Voici mes codes actuels:
-bpi.service.ts historique:
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());
}
}
ts composants:
import { Component, OnInit, Inject, PLATFORM_ID } from '@angular/core';
import { HistoricalBpiService } from '../../services/historical-bpi.service';
import { isPlatformBrowser, isPlatformServer } from '@angular/common';
import * as moment from 'moment';
@Component({
selector: 'app-banner',
templateUrl: './banner.component.html',
styleUrls: ['./banner.component.scss']
})
export class BannerComponent implements OnInit {
private isDataAvailable: boolean;
// Define date options
private today: string = moment().format('YYYY-MM-DD');
private oneYearAgo: string = moment().subtract(1,'years').format('YYYY-MM-DD');
private nineMonthsAgo: string = moment().subtract(9,'months').format('YYYY-MM-DD');
private oneYearData: string = 'historical/close.json?start=' + this.oneYearAgo + '&end=' + this.today;
private nineMonthsData: string = 'historical/close.json?start=' + this.nineMonthsAgo + '&end=' + this.today;
// API calls for the date options
oneYear() {
this.historicalBpiService.getBpiData(this.oneYearData)
.subscribe(
res => {
this.lineChartData[0].data = Object.keys(res.bpi).map(function (key) { return res.bpi[key]; });
this.lineChartLabels = Object.keys(res.bpi);
this.isDataAvailable = true;
}
)
}
nineMonths() {
this.historicalBpiService.getBpiData(this.nineMonthsData)
.subscribe(
res => {
this.lineChartData[0].data = Object.keys(res.bpi).map(function (key) { return res.bpi[key]; });
this.lineChartLabels = Object.keys(res.bpi);
}
)
}
constructor(
private historicalBpiService:HistoricalBpiService,
@Inject(PLATFORM_ID) private platformId: Object
) {}
// lineChart
public lineChartData:any = [
{ data:[], label: 'BTC' }
];
public lineChartLabels:Array<any> = [];
public lineChartOptions:any = {
responsive: true,
maintainAspectRatio: false,
layout: {
padding: 0
},
scales: {
yAxes: [{
display: false,
scaleLabel: {
display: false,
labelString: 'USD'
},
gridLines: {
display: true,
tickMarkLength: 0
}
}],
xAxes: [{
ticks: {
display: false,
mirror: true
}
}]
},
elements: {
point: {
radius: 0
},
line: {
tension: 0, // 0 disables bezier curves
}
},
hover: {
mode: 'label',
intersect: false
},
tooltips: {
mode: 'label',
intersect: false,
backgroundColor: 'rgb(95,22,21)'
}
};
public lineChartColors:Array<any> = [
{
backgroundColor: 'rgba(199,32,48,1)',
//borderColor: 'rgb(95,22,21)',
pointHoverBackgroundColor: 'rgba(218,208,163,1)',
steppedLine: false
}
];
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(){
if (isPlatformBrowser(this.platformId)) {
// Default chart
this.oneYear();
}
}
}
html composant:
<div class="chart">
<canvas baseChart height="360px"
[datasets]="lineChartData"
[labels]="lineChartLabels"
[options]="lineChartOptions"
[colors]="lineChartColors"
[legend]="lineChartLegend"
[chartType]="lineChartType"
(chartHover)="chartHovered($event)"
(chartClick)="chartClicked($event)">
</canvas>
</div>
<div class="d-flex justify-content-end dateOptions" *ngIf="isDataAvailable">
<input type="radio" name="Button" class="ButtonState" checked id="9months"/>
<label class="Button" for="9months" (click)="nineMonths()">9 Months</label>
<input type="radio" name="Button" class="ButtonState" checked id="1year"/>
<label class="Button" for="1year" (click)="oneYear()">1 Year</label>
</div>