Application mobile: Microcharts : graphiques multiplateformes élégants pour chaque application

Application mobile: Microcharts : graphiques multiplateformes élégants pour chaque application

Invité

Ceci est une publication d’Aloïs Deniel. Aloïs travaille chez Orange Applications for Business en tant que consultant Xamarin. Vous pouvez le retrouver sur Twitter à @aloisdeniel et sur Github à @aloisdeniel.

L’affichage de graphiques dans les applications mobiles a toujours été un excellent moyen d’offrir aux utilisateurs un aperçu clair des données numériques. À l’époque où j’étais développeur, je voulais que cette tâche soit aussi simple que d’écrire quelques lignes de code, mais je n’ai pas trouvé de moyen simple d’y parvenir, c’est pourquoi j’ai commencé à explorer SkiaSharp et à créer des Microcharts. Microcharts est une sélection de graphiques courants qui sont faciles à utiliser, visuellement agréables et conçus en tenant compte de la compatibilité multiplateforme.

Application mobile: Microcharts : graphiques multiplateformes élégants pour chaque application

Microcharts fournit des graphiques prêts à l’emploi pour Android, iOS, macOS, UWP et même Xamarin.Forms. Si vous utilisez déjà SkiaSharp dans votre application, vous pouvez également les restituer dans n’importe quel canevas SkiaSharp.

Saisies de données

Chaque graphique affiché via Microcharts consomme un ensemble d’entrées de données, et ils auront toujours la même structure quel que soit le type de graphique que vous souhaitez afficher.
Chaque entrée aura :

  • Un nombre flottant représentant sa valeur (obligatoire).
  • UNE Label décrivant à quoi votre entrée est associée.
  • UNE ValueLabel pour formater votre valeur.
  • UNE Color associé à l’entrée.

Voici un exemple rapide d’un ensemble de points d’entrée que nous allons cartographier dans un instant :


var entries = new []
 {
     new Entry(212)
     {
         Label = "UWP",
         ValueLabel = "212",
         Color = SKColor.Parse("#2c3e50")
     },
     new Entry(248)
     {
         Label = "Android",
         ValueLabel = "248",
         Color = SKColor.Parse("#77d065")
     },
     new Entry(128)
     {
         Label = "iOS",
         ValueLabel = "128",
         Color = SKColor.Parse("#b455b6")
     },
     new Entry(514)
     {
         Label = "Shared",
         ValueLabel = "514",
         Color = SKColor.Parse("#3498db")
} };

Types de graphiques

Une large gamme de graphiques est incluse dans Microcharts, vous pouvez donc choisir celui qui correspond le mieux à votre application et à vos données. Tout ce que vous avez à faire est de définir les entrées de données via le Entries propriété de n’importe quel champ graphe.

Diagramme à bandes

var chart = new BarChart() { Entries = entries };

Application mobile: Microcharts : graphiques multiplateformes élégants pour chaque application

Graphique en ligne

var chart = new LineChart() { Entries = entries };

Application mobile: Microcharts : graphiques multiplateformes élégants pour chaque application

PointChart

var chart = new PointChart() { Entries = entries };

Application mobile: Microcharts : graphiques multiplateformes élégants pour chaque application

RadialGauge

var chart = new RadialGaugeChart() { Entries = entries };

Application mobile: Microcharts : graphiques multiplateformes élégants pour chaque application

Donut

var chart = new DonutChart() { Entries = entries };

Application mobile: Microcharts : graphiques multiplateformes élégants pour chaque application

Radar

var chart = new RadarChart() { Entries = entries };

Application mobile: Microcharts : graphiques multiplateformes élégants pour chaque application

Affichage d’un graphique

Pour afficher un graphique, nous devrons l’héberger dans un ChartView.



     xmlns="http://xamarin.com/schemas/2014/forms"
     xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
     xmlns:microcharts="clr-namespace:Microcharts.Forms;assembly=Microcharts.Forms"
     xmlns:local="clr-namespace:Microcharts.Samples.Forms"
     x:Class="Microcharts.Samples.Forms.MainPage">
     

Les données du graphique peuvent maintenant être affectées par la vue Chart biens.

this.chartView.Chart = chart;

Les Chart la propriété est une propriété pouvant être liée, il est donc également parfaitement possible d’utiliser une liaison à partir d’un ViewModel
pour ça.

L’exemple ci-dessus utilise Xamarin.Forms, mais les vues intégrées sont également disponibles directement pour iOS, Android, macOS et UWP.

Ajuster l’aspect visuel

Chaque type de graphe possède plusieurs propriétés pour modifier légèrement son rendu final. Par exemple, notre précédent LineChart exemple ressemblait à ceci :

var chart = new LineChart()
 {
   Entries = entries
 };

Application mobile: Microcharts : graphiques multiplateformes élégants pour chaque application

En modifiant les propriétés de la ligne et du point, nous pouvons affiner le design :

var chart = new LineChart()
 {
   Entries = entries,
   LineMode = LineMode.Straight,
   LineSize = 8,
   PointMode = PointMode.Square,
   PointSize = 18,
};

Application mobile: Microcharts : graphiques multiplateformes élégants pour chaque application

N’hésitez pas à explorer chaque propriété du graphique pour vous l’approprier et créer un design unique.

Exemple d’application

Pour une utilisation plus contextuelle des Microcharts, veuillez consulter le référentiel dédié, qui présente une application de vélo avec divers cas d’utilisation pour les graphiques.

Ce n’est que le début!

Microcharts est encore jeune et continuera d’être amélioré, alors restez à l’écoute sur GitHub ou Twitter ! Ce projet est open-source, alors n’hésitez pas à partager le nouveau type de graphique, les propriétés manquantes et les problèmes.

Discuter de ce message sur les forums.

#Microcharts #graphiques #multiplateformes #élégants #pour #chaque #application