Graphiques Google angulaires - Graphique par étapes de base

Voici un exemple de graphique échelonné.

Nous avons déjà vu les configurations utilisées pour dessiner un graphique dans le chapitre Syntaxe de configuration de Google Charts . Voyons maintenant un exemple de graphique échelonné.

Configurations

Nous avons utilisé SteppedAreaChart classe pour afficher un graphique en escalier.

type = 'SteppedAreaChart';

Exemple

app.component.ts

import { Component } from '@angular/core';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = "'The decline of 'The 39 Steps'";
   type = 'SteppedAreaChart';
   data = [
      ["Alfred Hitchcock (1935)", 8.4, 7.9],
      ["Ralph Thomas (1959)",     6.9,         6.5],
      ["Don Sharp (1978)",        6.5,         6.4],
      ["James Hawes (2008)",      4.4,         6.2]
   ];
   columnNames = ['Director (Year)', 'Rotten Tomatoes','IMDB'];
   options = { 
      vAxis:{
         title:'Accumulated Rating'
      }  
   };
   width = 550;
   height = 400;
}

Résultat

Vérifiez le résultat.