Ajouter des graphiques à votre application Android à l'aide de MPAndroidChart

Si votre application traite beaucoup de données, l'utilisation de graphiques pour afficher ces données pourrait améliorer considérablement l'expérience utilisateur. Dans ce tutoriel, vous allez découvrir une bibliothèque de cartographie open source populaire. MPAndroidChart. Les graphiques de cette bibliothèque sont hautement personnalisables, interactifs et faciles à créer..

Conditions préalables

Assurez-vous d'avoir la dernière version d'Android Studio installée. Vous pouvez l'obtenir sur le site Web des développeurs Android..

1. Ajouter MPAndroidChart à un projet

Pour utiliser cette bibliothèque dans votre projet Android, il vous suffit de:

Téléchargez la dernière version de la bibliothèque à partir de Github. Au moment de la rédaction de cet article, la dernière version est disponible. 1.7.4.
Copie mpandroidchartlibrary-1-7-4.jar à votre projet libs annuaire.
Dans Android Studio, cliquez avec le bouton droit sur le fichier JAR et sélectionnez Ajouter comme bibliothèque.

2. Créer un `DataSet`

Toutes les données doivent être converties en un DataSet objet avant qu'il puisse être utilisé par un graphique. Différents types de graphiques utilisent différentes sous-classes de DataSet classe. Par exemple, un Diagramme à bandes utilise un BarDataSet exemple. De même, un Camembert utilise un PieDataSet exemple.
Au lieu de simplement traiter avec des nombres aléatoires pour générer un exemple de graphique, considérons un scénario hypothétique. Alice et Bob sont amis. Alice appelle Bob plusieurs fois par mois pour savoir ce qu'il fait. Bob prend note à chaque fois qu'elle l'appelle.

Dans ce tutoriel, nous utilisons les notes de Bob pour créer un graphique montrant le nombre de fois que Alice a appelé Bob. Voici ce que Bob a noté:

Mois	Nombre d'appels
janvier	4
février	8
Mars	6
avril	12
Peut	18
juin	9

Un graphique à barres semble parfait pour ce type de données. Pour afficher les données dans un graphique, nous devons créer un BarDataSet exemple. Vous pouvez suivre les mêmes étapes pour créer des instances d’autres sous-classes de DataSet.

Chaque valeur individuelle des données brutes doit être représentée comme un Entrée. Un ArrayList de telle Entrée objets est utilisé pour créer un DataSet. Créons quelques BarEntry objets et les ajouter à un ArrayList:

ArrayList entries = new ArrayList <> (); entrées.add (nouvelle BarEntry (4f, 0)); entrées.add (nouveau BarEntry (8f, 1)); entrées.add (nouvelle BarEntry (6f, 2)); entrées.add (nouvelle BarEntry (12f, 3)); entrées.add (nouveau BarEntry (18f, 4)); entrées.add (nouvelle BarEntry (9f, 5));

Maintenant que le ArrayList de Entrée les objets sont prêts, nous pouvons créer un DataSet en dehors de ça:

BarDataSet dataset = new BarDataSet (entrées, "# d'appels");

3. Définition des étiquettes de l'axe X

Nous avons déjà ajouté plusieurs valeurs à notre graphique, mais elles n’auront aucun sens pour l’utilisateur si nous ne leur attribuons pas d’étiquettes significatives. Chaque étiquette d’axe des x est représentée par un Chaîne Et un ArrayList est utilisé pour stocker toutes les étiquettes.

ArrayList labels = new ArrayList(); labels.add ("janvier"); labels.add ("février"); labels.add ("mars"); labels.add ("avril"); labels.add ("mai"); labels.add ("juin");

4. Créer un graphique

Toutes les cartes de cette bibliothèque sont des sous-classes de ViewGroup, ce qui signifie que vous pouvez facilement les ajouter à n’importe quelle mise en page. Vous pouvez définir votre graphique à l'aide d'un fichier XML ou du code Java. Si le graphique doit occuper tout l'écran d'un Activité ou Fragment, puis utiliser du code Java est plus facile:

Diagramme à barres = nouveau diagramme à barres (contexte); setContentView (graphique);

Cela crée un graphique vierge sans aucune donnée. Utilisons l'ensemble de données et la liste d'étiquettes que nous avons créées aux étapes précédentes pour définir les données de ce graphique..

Données BarData = new BarData (étiquettes, jeu de données); chart.setData (data);

Ajoutons également une description au graphique.

chart.setDescription ("Nombre de fois où Alice a appelé Bob");

Si vous exécutez maintenant votre application sur un appareil Android, vous devriez pouvoir voir un graphique à barres semblable à celui présenté ci-dessous. Le graphique est interactif et répond aux gestes de pincement pour zoomer et de glisser.

5. Utilisation de modèles de couleur

Si vous n’aimez pas les couleurs par défaut, vous pouvez utiliser le DataSet la classe setColors méthode pour changer la palette de couleurs. Cependant, MPAndroidChart est également livré avec un certain nombre de modèles de couleurs prédéfinis qui vous permettent de modifier l'apparence de votre ensemble de données sans avoir à gérer les valeurs de couleur individuelles..

Dans la version actuelle de cette bibliothèque, les modèles suivants sont disponibles:

ColorTemplate.LIBERTY_COLORS
ColorTemplate.COLORFUL_COLORS
ColorTemplate.JOYFUL_COLORS
ColorTemplate.PASTEL_COLORS
ColorTemplate.VORDIPLOM_COLORS

Pour associer un modèle de couleur à un jeu de données, vous devez utiliser le setColors méthode. Voici un exemple:

dataset.setColors (ColorTemplate.COLORFUL_COLORS);

Exécutez votre application une fois de plus pour voir un graphique avec des couleurs plus vives.

6. Ajouter des animations

Tous les graphiques de cette bibliothèque prennent en charge les animations que vous pouvez utiliser pour rendre vos graphiques plus vivants. le animateXY La méthode est utilisée pour animer les deux axes du graphique. Si vous souhaitez animer un seul des axes, vous pouvez utiliser animateX ou animée pour animer l’axe des abscisses ou des ordonnées, respectivement. Vous devez spécifier la durée (en millisecondes) de l'animation lorsque vous appelez ces méthodes. Par exemple, pour animer uniquement l'axe y, ajoutez l'extrait de code suivant:

chart.animateY (5000);

7. Utilisation des lignes de limite

Vous pouvez ajouter des lignes de limite à un graphique pour ajouter plus de signification à vos graphiques. Les lignes de limite ne sont utiles que pour certains types de graphiques, tels que les graphiques à barres, les graphiques linéaires et les graphiques à dispersion..

Dans notre exemple, où Alice appelle Bob plusieurs fois par mois, supposons que Bob s'énerve si Alice l'appelle plus de dix fois par mois. Pour afficher cette information, nous pourrions ajouter une ligne de limite pour cette valeur. Voici comment vous faites cela:

LimitLine line = nouvelle LimitLine (10f); data.addLimitLine (line);

8. Enregistrement du graphique en tant qu’image

MPAndroidChart vous permet également de sauvegarder l'état actuel d'un graphique en tant qu'image. Pour utiliser cette fonctionnalité, vous devez d'abord autoriser votre application à écrire sur la carte SD de l'appareil. Vous pouvez le faire en ajoutant le code suivant à votre AndroidManifest.xml:

Vous avez le choix entre deux méthodes:

sauvegarder dans la gallerie Cette méthode enregistre votre graphique sous forme de fichier JPEG. Il vous permet également de spécifier la qualité ou le taux de compression de l'image..
saveToPath Cette méthode enregistre votre graphique sous forme de fichier PNG dans le chemin que vous spécifiez..

Par exemple, pour enregistrer votre graphique en tant que fichier JPEG, vous pouvez utiliser l'extrait de code suivant:

chart.saveToGallery ("mychart.jpg", 85); // 85 est la qualité de l'image

Conclusion

Dans ce tutoriel, vous avez appris à utiliser la bibliothèque MPAndroidChart pour créer des graphiques à la fois agréables et interactifs. Par souci de cohérence, j'ai utilisé des graphiques à barres tout au long de ce tutoriel. Cependant, vous pouvez suivre les mêmes étapes pour créer d'autres types de graphiques. Pour en savoir plus sur cette bibliothèque, je vous encourage à lire la documentation et des exemples sur Github..

Code