graphiques dans le didacticiel SwiftUI | par Ix76y

Créer de beaux graphiques dans SwiftUI — Tutoriel

Dans Xcode 14, Apple a introduit le nouveau framework Charts, pour des graphiques personnalisés sur toutes les plateformes. Dans ce didacticiel, je souhaite vous montrer un exemple de la manière dont vous pouvez créer des graphiques personnalisés pour votre application et de la facilité avec laquelle il est possible de le personnaliser.

À titre d’exemple, nous allons créer un tableau du nombre de pas, nous montrant nos pas actuels de la semaine :

• Mac avec Xcode 14+ installé
• Une expérience en programmation Swift n’est pas nécessaire mais peut vous faciliter la vie

Ouvrez Xcode et créez un nouveau projet d’application. Si vous êtes nouveau sur XCode et le développement d’applications, vous pouvez suivre les étapes détaillées que j’ai faites dans l’un de mes autres articles, comme « Création d’une carte image dans SwiftUI”. Cet article contient également une petite section sur l’interface de XCode pour vous aider à démarrer.

Pour créer un graphique comme celui-ci, nous avons besoin de deux choses :

1. Modèle : quelque chose qui contient nos données ; ce sera une structure simple contenant les étapes et le jour.
2. Afficher : le graphique réel ; ici, nous allons utiliser le cadre graphique et le modèle créé précédemment et le mettre ensemble pour afficher les données

Modèle

En commençant par le modèle, créons d’abord un nouveau dossier : Faites un clic droit dans le navigateur de projet et sélectionnez Nouveau groupe et nommez-le Modèle.

Cliquez à nouveau avec le bouton droit sur le dossier nouvellement créé et sélectionnez Nouveau fichier…. Dans la fenêtre de dialogue qui apparaît, sélectionnez Fichier rapide et cliquez Suivant.

Dans la fenêtre contextuelle suivante, tapez Workout comme nom de fichier et validez.

Nous pouvons maintenant créer une nouvelle structure, qui aura deux variables une variable jour de type chaîne et une variable étapes, contenant le nombre d’étapes.

Une chose importante à noter ici est que si vous créez une structure pour les données à utiliser dans un graphique, assurez-vous que votre structure est une sous-classe de Identifiable. Par conséquent, nous aurons toujours besoin d’un champ id dans la structure en plus des autres variables.

import Foundation
struct Workout: Identifiable {
let id = UUID()      // necessary if struct is Identifiable
var day: String
var steps: Int
}

Avant de passer directement à la vue réelle pour afficher nos données, créons quelques exemples de données que nous pouvons afficher. Vous pourrez les remplacer ultérieurement par les données réelles de votre application.

Pour les données d’exemple, nous allons créer une extension de Workout et créer une liste d’entraînements pour les sept jours avec des exemples de valeurs pour les étapes de chaque jour. Ce code doit aller juste après la parenthèse fermante de votre structure.

extension Workout {
static let workouts: [Workout] = [
.init(day: "Mon", steps: 16246),
.init(day: "Tue", steps: 13478),
.init(day: "Wed", steps: 8445),
.init(day: "Thu", steps: 964),
.init(day: "Fri", steps: 4567),
.init(day: "Sat", steps: 1183),
.init(day: "Sun", steps: 8790),
]
}

Voir

Pour utiliser le Charts Framework, nous devons simplement l’importer. Ouvrez le ContentViewou la vue à laquelle vous souhaitez également ajouter le graphique, puis ajoutez import Charts sous import SwiftUI.

Pour bien structurer notre code, nous allons créer une vue séparée pour notre graphique. Sous le type ContentView Voir et appuyez sur entrée.

Une fois que vous avez appuyé sur Entrée, nous obtenons cette structure de vue principale que nous n’avons plus qu’à remplir d’informations. Commençons par le renommer de MyView pour StepChartView.

Remplacez maintenant le Hello, world! texte d’espace réservé avec une vue Graphique. Pour le contenu de la vue graphique, nous allons utiliser nos exemples de données Workout.workouts et ensuite nous n’avons qu’à lui dire comment afficher ces données.

Dans un premier temps, nous utiliserons un BarMark et comme valeurs x, nous voulons le jour de cet entraînement spécifique, pour les valeurs y, nous voulons les étapes. Pour déranger, nous passons toujours l’étiquette, puis la valeur.

Pour le rendre un peu plus joli, nous allons ajouter un rembourrage et régler sa hauteur sur 200.

struct StepChartView: View {
var body: some View {
Chart (Workout.workouts){ workout in
BarMark(x: .value("Day", workout.day), y: .value("Steps", workout.steps))
}
.padding()
.frame(height: 200)
}
}

Pour voir nos modifications dans l’aperçu, nous devons ajouter notre StepChartView à la vue Contenu. Nous pouvons le faire en ajoutant simplement notre nouvelle vue dans le corps du ContentView. Vous pouvez également ajouter un NavigationStack et utilisez une entretoise dans un VStack pour le remonter :

struct ContentView: View {
var body: some View {
NavigationStack {
VStack {
StepChartView()
Spacer()
}
.navigationTitle("My Steps")
}
}
}

Avec tout cela, vous devriez pouvoir voir votre graphique :

Nous avons notre graphique et il affiche correctement nos étapes, mais nous souhaitons probablement personnaliser un peu notre graphique pour le rendre plus sophistiqué.

Ce que nous allons faire, c’est changer la couleur des barres, puis supprimer également les chiffres sur le côté droit et afficher à la place le nombre d’étapes au-dessus de la barre réelle.

Modification de la couleur des graphiques

Pour ajouter une variation de couleur à notre graphique, nous pouvons utiliser le .foregroundStyle et transmettre la valeur pour laquelle il doit changer. Cela utilisera des couleurs aléatoires pour chaque barre et ajoutera une légende en bas.

struct StepChartView: View {
var body: some View {
Chart (Workout.workouts){ workout in
BarMark(x: .value("Day", workout.day), y: .value("Steps", workout.steps))
.foregroundStyle(by: .value("Day", workout.day))
}
.padding()
.frame(height: 200)
}
}

Bien que les couleurs aléatoires puissent être agréables, nous voulons contrôler les couleurs. Pour ce faire, créez d’abord un tableau des couleurs que nous voulons utiliser. Ensuite, nous ajouterons un .chartForegroundStyleScale(). Les .chartForegroundStyleScale() prend des arguments:

• domaine : les valeurs par lesquelles grouper / quelles catégories
• gamme : une liste de couleurs

Pour la liste des couleurs, nous pouvons simplement créer une liste dans notre StepChartView que nous pouvons ensuite utiliser dans le .chartForegroundStyleScaler().

struct StepChartView: View {
let barColors: [Color] = [.green, .mint, .cyan, .blue, .indigo, .purple, .pink]
var body: some View {
Chart (Workout.workouts){ workout in
BarMark(x: .value("Day", workout.day), y: .value("Steps", workout.steps))
.foregroundStyle(by: .value("Day", workout.day))
}
.chartForegroundStyleScale(domain: Workout.workouts.compactMap({ workout in
workout.day
}), range: barColors)
.padding()
.frame(height: 200)
}
}

Suppression des étiquettes

Notre graphique ressemble déjà beaucoup à ce que nous voulons, mais il y a actuellement trop d’étiquettes qui détournent l’attention de notre graphique. Nous pouvons les masquer en définissant la visibilité de l’axe Y et de la légende sur masqué.

struct StepChartView: View {
let barColors: [Color] = [.green, .mint, .cyan, .blue, .indigo, .purple, .pink]
var body: some View {
Chart (Workout.workouts){ workout in
BarMark(x: .value("Day", workout.day), y: .value("Steps", workout.steps))
.foregroundStyle(by: .value("Day", workout.day))
}
.chartForegroundStyleScale(domain: Workout.workouts.compactMap({ workout in
workout.day
}), range: barColors)
.chartLegend(.hidden)  // hide the legend underneath the chart
.chartYAxis(.hidden)   // hide the Y-Axis labels
.padding()
.frame(height: 200)
}
}

Ajout d’annotations

Après avoir retiré les étiquettes, notre graphique semble directement beaucoup plus propre, mais nous ne pouvons plus voir combien d’étapes nous avons réellement effectuées chaque jour. Pour afficher les valeurs réelles du jour, nous pouvons ajouter des annotations.

Les annotations sont des vues elles-mêmes et sont donc entièrement personnalisables. Pour rester bref, nous ajouterons simplement du texte, mais vous pouvez ajouter les modifications que vous souhaitez.

struct StepChartView: View {
let barColors: [Color] = [.green, .mint, .cyan, .blue, .indigo, .purple, .pink]
var body: some View {
Chart (Workout.workouts){ workout in
BarMark(x: .value("Day", workout.day), y: .value("Steps", workout.steps))
.foregroundStyle(by: .value("Day", workout.day))
.annotation {                    // Adding annotations to each Bar
Text("\(workout.steps)")     // Show the actual step count of that day
.font(.caption)          // make the font a bit smalelr
.foregroundStyle(.gray)  // and use a gray font
}
}
.chartForegroundStyleScale(domain: Workout.workouts.compactMap({ workout in
workout.day
}), range: barColors)
.chartLegend(.hidden)
.chartYAxis(.hidden)
.padding()
.frame(height: 200)
}
}

Félicitations, vous devriez maintenant avoir un tableau des étapes sympa !

Merci d’avoir lu, j’espère que cela vous a été utile !