Graphique en courbes avec axes personnalisés et étiquettes de graduation

Voici un exemple de graphique en courbes avec un axe personnalisé et des étiquettes de graduation.

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 en courbes avec un axe personnalisé et des étiquettes de graduation.

Configurations

Nous avons utilisé textStyle configuration pour changer l'axe et cocher les styles d'étiquette.

options = {   
   hAxis: {
      title: 'Month',
      textStyle:{
         color:'#01579b',
         fontSize:16,
         fontName:'Arial',
         bold:false,
         italic:true
      }
   },
   vAxis:{
      title: 'Temperature',
      textStyle:{
         color:'#01579b',
         fontSize:16,
         fontName:'Arial',
         bold:false,
         italic:true
      }
   },  
};

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 = 'Average Temperatures of Cities';
   type = 'LineChart';
   data = [
      ["Jan",  7.0, -0.2, -0.9, 3.9],
      ["Feb",  6.9, 0.8, 0.6, 4.2],
      ["Mar",  9.5,  5.7, 3.5, 5.7],
      ["Apr",  14.5, 11.3, 8.4, 8.5],
      ["May",  18.2, 17.0, 13.5, 11.9],
      ["Jun",  21.5, 22.0, 17.0, 15.2],
      ["Jul",  25.2, 24.8, 18.6, 17.0],
      ["Aug",  26.5, 24.1, 17.9, 16.6],
      ["Sep",  23.3, 20.1, 14.3, 14.2],
      ["Oct",  18.3, 14.1, 9.0, 10.3],
      ["Nov",  13.9,  8.6, 3.9, 6.6],
      ["Dec",  9.6,  2.5,  1.0, 4.8]
   ];
   columnNames = ["Month", "Tokyo", "New York","Berlin", "Paris"];
   options = {   
      hAxis: {
         title: 'Month',
         textStyle:{
            color:'#01579b',
            fontSize:16,
            fontName:'Arial',
            bold:false,
            italic:true
         }
      },
      vAxis:{
         title: 'Temperature', textStyle:{
            color:'#01579b',
            fontSize:16,
            fontName:'Arial',
            bold:false,
            italic:true
         }
      },  
   };
   width = 550;
   height = 400;
}

Résultat

Vérifiez le résultat.