Sommaire

Application ionic3-chartjs_bar

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

L’application ionic3-chartjs_bar va représenter sous forme d’histogramme (avec des barres verticales) une série de cinq valeurs numériques. Ces valeurs seront stockées dans le code lui-même de façon statique.

Dans l’absolu, il serait préférable de les extraire du Local Storage, d’une base de données SQLite (nous connaissons déjà ces modes de stockage), d’un flux de données aux formats XML ou JSON (venant d’Internet ou pas) ou de données provenant de systèmes de gestion de bases de données distants, comme par exemple MySQL ou Mongo DB.

N’oubliez pas qu’il faudra intégrer dans votre projet la librairie Chart.js en ligne de commande, comme suit :

npm install --save chart.js

Pour développer des variantes à partir des graphiques proposés dans ce chapitre, vous pouvez consulter la documentation officielle disponible à l’adresse http://www.chartjs.org/docs/latest/.

Les données que nous allons représenter sont le nombre de buts marqués pendant la Coupe du Monde de football 2018 par les six meilleurs buteurs.

À l’exécution de l’application s’affiche ceci :

images/ch31_01.png

2. Analyse des scripts principaux

L’utilisation de la librairie Chart.js n’a aucun impact sur les scripts config.xml, package.json, src/app/app.components.ts ...