Sommaire

Application ionic3-chartjs_pie

1. Compte rendu d’exécution de l’application

Étudions rapidement une seconde application, ionic3-chartjs_pie, basée elle aussi sur l’utilisation de la librairie Chart.js. Cette librairie donne la possibilité de créer de nombreux types de graphiques comme :

  • Bubble

  • Doughnut

  • Line

  • Pie (le type de graphique que nous allons étudier)

  • Polar

  • Radar

  • Time Scale

Si vous n’êtes pas familier de ces types de graphiques, il est conseillé de consulter une fois de plus la documentation officielle Chart.js (http://www.chartjs.org/samples/latest/).

Restons sur la thématique de la Coupe du Monde de football 2018 et représentons la répartition des pays engagés par confédération, et ceci sous la forme d’un graphique en secteurs (pie).

Le graphique se présente comme suit :

images/ch31_02.png

2. Analyse des scripts principaux

Nous savons que l’utilisation de la librairie Chart.js n’a aucun impact sur les scripts config.xml, package.json, src/app/app.components.ts et src/app/app.modules.ts.

Script home.html

La section <ion-content> présente un code assez similaire à l’application ionic3-chartjs_bar :

<!-- Contenu de la page --> 
<ion-content> 
 
 <!-- Affichage du graphique en mode Card --> 
 <ion-card> 
    
 <!-- en-tête de la Card --> 
 <ion-card-header> 
   Nombre de pays par confédération  ...