Comment transmettre des valeurs dynamiques en tant qu'objets dans les données d'un graphique linéaire?

Question

J'utilise un graphique linéaire pour afficher les valeurs de temps en abscisse et de vitesse du véhicule en ordonnée et ces deux valeurs doivent provenir de l'api. A partir de maintenant je suis en utilisant des valeurs statiques comme,

playback.component.ts:

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'app-play-back', 
    templateUrl: './play-back.component.html' 
}) 
export class PlayBackComponent { 
    // lineChart 
    public lineChartData:Array<any> = [ 
    {data: [65, 59, 80, 81, 56, 55], label: 'travelled details'} 
    ]; 
    public lineChartLabels:Array<any> = ['12:00 AM', '4:00 AM', '8:00 AM', '12:00 PM', '4:00 PM', '8:00 PM']; 
    public lineChartOptions:any = { 
    responsive: true 
    }; 
    public lineChartLegend:boolean = true; 
    public lineChartType:string = 'line'; 
} 

Au lieu de ces valeurs statiques dans les données et l'étiquette, je dois transmettre les valeurs dynamiques de api qui est dans la forme d'objets. Ces valeurs sont stockées dans les détails de tableau comme dans l'image,

Je suis entier repassais en tant que valeurs de données maintenant en statique mais en fait, je dois passer l'objet de api à l'intérieur des données, des détails de l'objet de graphique Valeurs fixTime dans l'axe des abscisses et valeur de la vitesse dans l'axe des y. Veuillez m'aider à résoudre cela.

Answer 1

Utilisation du formatAMPM comme aide, vous pouvez faire quelque chose comme:

data = objects.map(item => { return item.speed; }) 
labels = objects.map(item => { return formatAMPM(item.fixTime); })