Graphiques Google angulaires - Guide rapide

Google Chartsest une bibliothèque de graphiques purement basée sur JavaScript destinée à améliorer les applications Web en ajoutant des fonctionnalités de création de graphiques interactives. Il prend en charge un large éventail de graphiques. Les graphiques sont dessinés à l'aide de SVG dans les navigateurs standard tels que Chrome, Firefox, Safari, Internet Explorer (IE). Dans l'ancien IE 6, VML est utilisé pour dessiner les graphiques.

angular-google-chartsest un wrapper angulaire open source pour Google Charts qui fournit des visualisations Google Charts élégantes et riches en fonctionnalités dans une application angulaire et peut être utilisé avec des composants angulaires de manière transparente. Il existe des chapitres traitant de tous les composants de base de Google Charts avec des exemples appropriés dans une application Angular.

traits

Voici les principales caractéristiques de la bibliothèque Google Charts.

Compatability - Fonctionne parfaitement sur tous les principaux navigateurs et plates-formes mobiles comme Android et iOS.
Multitouch Support- Prend en charge le multitouch sur les plates-formes basées sur écran tactile comme Android et iOS. Idéal pour les smartphones / tablettes iPhone / iPad et Android.
Free to Use - Open source et est gratuit à utiliser à des fins non commerciales.
Lightweight - La bibliothèque principale loader.js, est une bibliothèque extrêmement légère.
Simple Configurations - Utilise json pour définir diverses configurations des graphiques et très facile à apprendre et à utiliser.
Dynamic - Permet de modifier le graphique même après la génération du graphique.
Multiple axes- Non limité aux axes x, y. Prend en charge plusieurs axes sur les graphiques.
Configurable tooltips- L'info-bulle survient lorsqu'un utilisateur survole n'importe quel point d'un graphique. googlecharts fournit un formateur intégré d'info-bulle ou un formateur de rappel pour contrôler l'info-bulle par programme.
DateTime support- Manipulez la date et l'heure spécialement. Fournit de nombreux contrôles intégrés sur les catégories par date.
Print - Imprimer le graphique en utilisant la page Web.
External data- Prend en charge le chargement dynamique des données à partir du serveur. Fournit un contrôle sur les données à l'aide des fonctions de rappel.
Text Rotation - Prend en charge la rotation des étiquettes dans n'importe quelle direction.

Types de graphiques pris en charge

La bibliothèque Google Charts fournit les types de graphiques suivants:

N ° Sr.	Type de graphique / description
1	Line Charts Utilisé pour dessiner des graphiques basés sur des lignes / splines.
2	Area Charts Utilisé pour dessiner des graphiques par zone.
3	Pie Charts Utilisé pour dessiner des graphiques à secteurs.
4	Sankey Charts, Scatter Charts, Stepped area charts, Table, Timelines, TreeMap, Trendlines Utilisé pour dessiner des graphiques dispersés.
5	Bubble Charts Utilisé pour dessiner des graphiques à bulles.
6	Dynamic Charts Utilisé pour dessiner des graphiques dynamiques où l'utilisateur peut modifier les graphiques.
sept	Combinations Utilisé pour dessiner des combinaisons de divers graphiques.
8	3D Charts Utilisé pour dessiner des graphiques 3D.
9	Angular Gauges Utilisé pour dessiner des graphiques de type de compteur de vitesse.
dix	Heat Maps Utilisé pour dessiner des cartes thermiques.
11	Tree Maps Utilisé pour dessiner des cartes d'arbre.

Dans les prochains chapitres, nous allons discuter de chaque type de graphiques mentionnés ci-dessus en détail avec des exemples.

Licence

Google Charts est open source et est gratuit. Suivez le lien - Conditions d'utilisation .

Ce didacticiel vous expliquera comment préparer un environnement de développement pour commencer votre travail avec Google Charts et Angular Framework. Dans ce chapitre, nous aborderons la configuration de l'environnement requise pour Angular 6. Pour installer Angular 6, nous avons besoin des éléments suivants:

Nodejs
Npm
CLI angulaire
IDE pour écrire votre code

Nodejs doit être supérieur à 8,11 et npm doit être supérieur à 5,6.

Nodejs

Pour vérifier si nodejs est installé sur votre système, tapez node -vdans le terminal. Cela vous aidera à voir la version de nodejs actuellement installée sur votre système.

C:\>node -v
v8.11.3

S'il n'imprime rien, installez nodejs sur votre système. Pour installer nodejs, allez sur la page d'accueilhttps://nodejs.org/en/download/ de nodejs et installez le package en fonction de votre système d'exploitation.

En fonction de votre système d'exploitation, installez le package requis. Une fois nodejs installé, npm sera également installé avec lui. Pour vérifier si npm est installé ou non, tapez npm -v dans le terminal. Il devrait afficher la version du npm.

C:\>npm -v
5.6.0

Les installations angulaires 6 sont très simples à l'aide de la CLI angulaire. Visitez la page d'accueilhttps://cli.angular.io/ d'angle pour obtenir la référence de la commande.

Type npm install -g @angular/cli, pour installer angular cli sur votre système.

Vous obtiendrez l'installation ci-dessus dans votre terminal, une fois Angular CLI installé. Vous pouvez utiliser n'importe quel IDE de votre choix, c'est-à-dire WebStorm, Atom, Visual Studio Code, etc.

Installez Google Charts Wrapper

Exécutez la commande suivante pour installer le module Google Charts Wrapper dans le projet créé.

googleChartsApp> npm angular-google-charts

+ [email protected]
added 2 packages in 20.526s

Ajoutez l'entrée suivante dans le fichier app.module.ts

import { GoogleChartsModule } from 'angular-google-charts';

imports: [
   ...
   GoogleChartsModule
],

Dans ce chapitre, nous présenterons la configuration requise pour dessiner un graphique à l'aide de l'API Google Chart dans Angular.

Étape 1 - Créer une application angulaire

Suivez les étapes suivantes pour mettre à jour l'application Angular que nous avons créée dans Angular 6 - Chapitre Configuration du projet -

Étape	La description
1	Créez un projet avec un nom googleChartsApp comme expliqué dans le chapitre Angular 6 - Configuration du projet .
2	Modifiez app.module.ts , app.component.ts et app.component.html comme expliqué ci-dessous. Gardez le reste des fichiers inchangé.
3	Compilez et exécutez l'application pour vérifier le résultat de la logique implémentée.

Voici le contenu du descripteur de module modifié app.module.ts.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { GoogleChartsModule } from 'angular-google-charts';
@NgModule({
   declarations: [
      AppComponent   
   ],
   imports: [
      BrowserModule,GoogleChartsModule
   ],
   providers: [], bootstrap: [AppComponent]
})
export class AppModule { }

Voici le contenu du fichier hôte HTML modifié app.component.html.

<google-chart #chart
   [title]="title"
   [type]="type"
   [data]="data"
   [columnNames]="columnNames"
   [options]="options"
   [width]="width"
   [height]="height">
</google-chart>

Nous verrons le app.component.ts mis à jour à la fin après avoir compris les configurations.

Étape 2 - Utiliser les configurations

Définir le titre

title = 'Browser market shares at a specific website, 2014';

Définir le type de graphique

type='PieChart';

Les données

Configurez les données à afficher sur le graphique.

data = [
   ['Firefox', 45.0],
   ['IE', 26.8],
   ['Chrome', 12.8],
   ['Safari', 8.5],
   ['Opera', 6.2],
   ['Others', 0.7] 
];

noms de colonnes

Configurez les noms de colonne à afficher.

columnNames = ['Browser', 'Percentage'];

options

Configurez les autres options.

options = {
   colors: ['#e0440e', '#e6693e', '#ec8f6e', '#f3b49f', '#f6c7b6'], is3D: true
};

Exemple

Prenons l'exemple suivant pour mieux comprendre la syntaxe de configuration -

app.component.ts

import { Component } from '@angular/core';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'Browser market shares at a specific website, 2014';
   type = 'PieChart';
   data = [
      ['Firefox', 45.0],
      ['IE', 26.8],
      ['Chrome', 12.8],
      ['Safari', 8.5],
      ['Opera', 6.2],
      ['Others', 0.7] 
   ];
   columnNames = ['Browser', 'Percentage'];
   options = {    
   };
   width = 550;
   height = 400;
}

Résultat

Vérifiez le résultat.

Les graphiques en aires sont utilisés pour dessiner des graphiques en zones. Dans cette section, nous allons discuter des types suivants de graphiques basés sur des zones.

Sr. Non	Type de graphique / description
1	Zone de base Graphique à aires de base
2	Zone avec des valeurs négatives Graphique en aires ayant des valeurs négatives.
3	Zone empilée Graphique ayant des zones empilées les unes sur les autres.
4	Zone avec des points manquants Graphique avec des points manquants dans les données.

Les graphiques à barres sont utilisés pour dessiner des graphiques à barres. Dans cette section, nous allons discuter des types suivants de graphiques à barres.

Sr. Non	Type de graphique / description
1	Barre de base Graphique à barres de base
2	Graphique à barres groupées Graphique à barres groupées.
3	Barre empilée Diagramme à barres ayant des barres empilées les unes sur les autres.
4	Barre négative Graphique à barres avec pile négative.

Les graphiques à bulles sont utilisés pour dessiner des graphiques à bulles. Dans cette section, nous allons discuter des types suivants de graphiques à bulles.

Sr. Non	Type de graphique / description
1	Bulle de base Graphique à bulles de base.
2	Graphique à bulles avec étiquettes de données Graphique à bulles avec étiquettes de données.

Les graphiques en chandeliers sont utilisés pour afficher la valeur d'ouverture et de clôture sur un écart de valeur et sont normalement utilisés pour représenter les actions. Dans cette section, nous allons discuter des types suivants de graphiques basés sur des chandeliers.

Sr. Non	Type de graphique / description
1	Chandelier basique Graphique de base en chandelier.
2	Bougeoir aux couleurs personnalisées Tableau de chandelier personnalisé.

Les graphiques à colonnes sont utilisés pour dessiner des graphiques basés sur des colonnes. Dans cette section, nous allons discuter des types suivants de graphiques basés sur des colonnes.

Sr. Non	Type de graphique / description
1	Colonne de base Graphique à colonnes de base
2	Graphique à colonnes groupées Graphique Colummn groupé.
3	Colonne empilée Tableau à colonnes ayant des colonnes empilées les unes sur les autres.
4	Colonne empilée négative Graphique à colonnes avec pile négative.

Le graphique combiné permet de rendre chaque série comme un type de marqueur différent de la liste suivante: ligne, zone, barres, chandeliers et zone en escalier. Pour attribuer un type de marqueur par défaut aux séries, utilisez la propriété seriesType. La propriété Series doit être utilisée pour spécifier les propriétés de chaque série individuellement. Voici un exemple de graphique à colonnes montrant les différences.

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 à colonnes montrant les différences.

Configurations

Nous avons utilisé ComboChart classe pour afficher un graphique combiné.

type='ComboChart';

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 = 'Fruits distribution';
   type = 'ComboChart';
   data = [
      ["Apples", 3, 2, 2.5],
      ["Oranges",2, 3, 2.5],
      ["Pears", 1, 5, 3],
      ["Bananas", 3, 9, 6],
      ["Plums", 4, 2, 3]
   ];
   columnNames = ['Fruits', 'Jane','Jone','Average'];
   options = {   
      hAxis: {
         title: 'Person'
      },
      vAxis:{
         title: 'Fruits'
      },
      seriesType: 'bars',
      series: {2: {type: 'line'}}
   };
   width = 550;
   height = 400;
}

Résultat

Vérifiez le résultat.

Un histogramme est un graphique qui regroupe les données numériques dans des compartiments, affichant les compartiments sous forme de colonnes segmentées. Ils sont utilisés pour décrire la distribution d'un ensemble de données comme la fréquence à laquelle les valeurs tombent dans des plages. Google Charts choisit automatiquement le nombre de buckets pour vous. Tous les compartiments sont de largeur égale et ont une hauteur proportionnelle au nombre de points de données dans le compartiment. Les histogrammes sont similaires aux histogrammes sous d'autres aspects. Dans cette section, nous allons discuter des types suivants de graphiques basés sur un histogramme.

Sr. Non	Type de graphique / description
1	Histogramme de base Diagramme d'histogramme de base.
2	Contrôle de la couleur Couleur personnalisée du graphique d'histrogramme.
3	Contrôle des godets Seaux personnalisés de graphique d'histrogramme.
4	Série multiple Diagramme d'histrogramme ayant plusieurs séries.

Les graphiques linéaires sont utilisés pour dessiner des graphiques linéaires. Dans cette section, nous allons discuter des types suivants de graphiques basés sur des lignes.

Sr. Non	Type de graphique / description
1	Ligne de base Graphique linéaire de base.
2	Avec des points visibles Graphique avec points de données visibles.
3	Couleur de fond personnalisable Graphique avec couleur d'arrière-plan personnalisée.
4	Couleur de ligne personnalisable Graphique avec couleur de ligne personnalisée.
5	Étiquettes d'axe et de graduation personnalisables Graphique avec axe personnalisé et étiquettes de graduation.
6	Réticule Graphiques linéaires montrant des réticules au point de données lors de la sélection.
sept	Style de ligne personnalisable Graphique avec couleur de ligne personnalisée.
8	Graphiques linéaires avec lignes courbes Graphique avec des lignes courbes lisses.

Un graphique Google Map utilise l'API Google Maps pour afficher la carte. Les valeurs de données sont affichées sous forme de marqueurs sur la carte. Les valeurs de données peuvent être des coordonnées (paires lat-long) ou des adresses réelles. La carte sera mise à l'échelle en conséquence de manière à inclure tous les points identifiés.

Sr. Non	Type de graphique / description
1	Carte de base Google Map de base.
2	Carte utilisant la latitude / longitude Carte avec des emplacements spécifiés en utilisant la latitude et la longitude.

Voici un exemple d'organigramme.

L'organigramme permet de rendre une hiérarchie de nœuds, utilisée pour décrire les relations supérieurs / subordonnés dans une organisation. Par exemple, un arbre généalogique est un type d'organigramme. 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 d'organigramme.

Configurations

Nous avons utilisé OrgChart classe pour afficher un organigramme.

type='OrgChart';

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 = '';
   type = 'OrgChart';
   data = [
      [{v:'Mike', f:'Mike<div style="color:red; font-style:italic">President</div>'},
         '', 'The President'],
      [{v:'Jim', f:'Jim<div style="color:red; font-style:italic">Vice President</div>'},
         'Mike', 'VP'],
      ['Alice', 'Mike', ''],
      ['Bob', 'Jim', 'Bob Sponge'],
      ['Carol', 'Bob', '']
   ];
   columnNames = ["Name","Manager","Tooltip"];
   options = {   
      allowHtml: true
   };
   width = 550;
   height = 400;
}

Résultat

Vérifiez le résultat.

Les graphiques à secteurs sont utilisés pour dessiner des graphiques à secteurs. Dans cette section, nous allons discuter des types suivants de graphiques à secteurs.

Sr. Non	Type de graphique / description
1	Tarte de base Graphique à secteurs de base.
2	Graphique en anneau Graphique en anneau.
3	Graphique à secteurs 3D Camembert 3D.
4	Diagramme à secteurs avec tranches éclatées Camembert avec des tranches éclatées.

Un graphique sankey est un outil de visualisation utilisé pour représenter un flux d'un ensemble de valeurs à un autre. Les objets connectés sont appelés nœuds et les connexions sont appelées liens. Les sankeys sont utilisés pour montrer un mappage plusieurs à plusieurs entre deux domaines ou plusieurs chemins à travers un ensemble d'étapes.

Sr. Non	Type de graphique / description
1	Graphique de Sankey de base Graphique Sankey de base.
2	Graphique Sankey à plusieurs niveaux Graphique de Sankey à plusieurs niveaux.
3	Personnalisation du diagramme de Sankey Graphique de Sankey personnalisé.

Voici un exemple de graphique à dispersion.

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 diagramme de dispersion.

Configurations

Nous avons utilisé ScatterChart classe pour afficher un diagramme de dispersion.

type = 'ScatterChart';

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 = 'Age vs Weight';
   type='ScatterChart';
   data = [
      [8,12],
      [4, 5.5],
      [11,14],
      [4,5],
      [3,3.5],
      [6.5,7]
   ];
   columnNames = ['Age', 'Weight'];
   options = {   
   };
   width = 550;
   height = 400;
}

Résultat

Vérifiez le résultat.

Un graphique en aires échelonnées est un diagramme en aires basé sur des étapes. Nous allons discuter des types suivants de graphiques en aires échelonnés.

Sr. Non	Type de graphique / description
1	Graphique en étapes de base Graphique de base en escalier.
2	Graphique en escalier empilé Graphique à aires étagées empilées.

Le graphique de tableau aide à rendre un tableau qui peut être trié et paginé. Les cellules de tableau peuvent être formatées à l'aide de chaînes de format ou en insérant directement du HTML en tant que valeurs de cellule. Les valeurs numériques sont alignées à droite par défaut; Les valeurs booléennes sont affichées sous forme de coches ou de croix. Les utilisateurs peuvent sélectionner des lignes uniques avec le clavier ou la souris. Les en-têtes de colonne peuvent être utilisés pour le tri. La ligne d'en-tête reste fixe pendant le défilement. La table déclenche les événements correspondant à l'interaction de l'utilisateur.

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 de table.

Configurations

Nous avons utilisé Table classe pour afficher un graphique de table.

type = 'Table';

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 = "";
   type = 'Table';
   data = [
      ['Mike',  {v: 10000, f: '$10,000'}, true],
      ['Jim',   {v:8000,   f: '$8,000'},  false],
      ['Alice', {v: 12500, f: '$12,500'}, true],
      ['Bob',   {v: 7000,  f: '$7,000'},  true]
   ];
   columnNames = ["Name", "Salary","Full Time Employee"];
   options = { 
     alternatingRowStyle:true,
     showRowNumber:true  
   };
   width = 550;
   height = 400;
}

Résultat

Vérifiez le résultat.

TreeMap est une représentation visuelle d'une arborescence de données, où chaque nœud peut avoir zéro ou plusieurs enfants et un parent (à l'exception de la racine). Chaque nœud est affiché sous forme de rectangle, peut être dimensionné et coloré en fonction des valeurs que nous attribuons. Les tailles et les couleurs sont évaluées par rapport à tous les autres nœuds du graphique. Voici un exemple de graphique treemap.

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 TreeMap.

Configurations

Nous avons utilisé TreeMap classe pour afficher un graphique TreeMap.

type = 'TreeMap';

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 = '';
   type='TreeMap';
   data = [
      ["Global",null,0,0],
      ["America","Global",0,0],
      ["Europe","Global",0,0],
      ["Asia","Global",0,0],
      ["Australia","Global",0,0],
      ["Africa","Global",0,0],

      ["USA","America",52,31],
      ["Mexico","America",24,12],
      ["Canada","America",16,-23],

      ["France","Europe",42,-11],
      ["Germany","Europe",31,-2],
      ["Sweden","Europe",22,-13],

      ["China","Asia",36,4],
      ["Japan","Asia",20,-12],
      ["India","Asia",40,63],

      ["Egypt","Africa",21,0],
      ["Congo","Africa",10,12],
      ["Zaire","Africa",8,10],
          
   ];
   columnNames = ["Location", "Parent","Market trade volume (size)","Market increase/decrease (color)"];
   options = { 
      minColor:"#ff7777",
      midColor:'#ffff77',
      maxColor:'#77ff77',
      headerHeight:15,
      showScale:true
   };
   width = 550;
   height = 400;
}

Résultat

Vérifiez le résultat.

Next page ↱

Graphiques Google angulaires - Guide rapide

traits

Types de graphiques pris en charge

Licence

Nodejs

Installez Google Charts Wrapper

Étape 1 - Créer une application angulaire

Étape 2 - Utiliser les configurations

Définir le titre

Définir le type de graphique

Les données

noms de colonnes

options

Exemple

Résultat

Configurations

Exemple

Résultat

Configurations

Exemple

Résultat

Configurations

Exemple

Résultat

Configurations

Exemple

Résultat

Configurations

Exemple

Résultat

Ressources de Google Charts angulaires

Tutoriel Angular Google Charts