Share
Lorsqu'il travaille avec des applications gourmandes en données, un développeur doit souvent faire plus que simplement afficher des listes d'enregistrements de données dans une vue sous forme de tableau. La bibliothèque CorePlot vous permettra d’ajouter de superbes visualisations de données à vos applications. Découvrez comment dans cette série Tuts + Premium!
La dernière fois, nous avons créé le graphique de première ligne et avons permis à l’utilisateur d’y naviguer à partir de la vue liste. Nous avons découvert les méthodes CPTGraphHostingView, CPTGraph, CPTXYPlotSpace, CPTScatterPlot et CPTScatterPlotDataSource fournissant des données pour le graphique..
Aujourd'hui, nous verrons comment rendre le graphique plus utile pour l'utilisateur en spécifiant des incréments d'axe et comment formater les étiquettes d'incrément. Nous allons examiner différentes manières de personnaliser l'apparence du graphique. Enfin, nous allons discuter de la façon de travailler avec différentes parcelles sur un même graphique. Commençons!
Pour modifier les propriétés d'un axe X et Y, nous travaillons avec les objets 'CPTXYAxisSet' et 'CPTXAxis'. Ouvrez le fichier STLineGraphViewController.m et accédez à la méthode viewDidLoad. Juste en dessous de l'endroit où nous travaillons avec l'espace graphique, entrez le code suivant:
[[graph plotAreaFrame] setPaddingLeft: 20.0f]; [[graph plotAreaFrame] setPaddingTop: 10.0f]; [[graph plotAreaFrame] setPaddingBottom: 20.0f]; [[graph plotAreaFrame] setPaddingRight: 10.0f]; [[graph plotAreaFrame] setBorderLineStyle: nil]; NSNumberFormatter * axisFormatter = [[NSNumberFormatter alloc] init]; [axisFormatter setMinimumIntegerDigits: 1]; [axisFormatter setMaximumFractionDigits: 0]; CPTMutableTextStyle * textStyle = [CPTMutableTextStyle textStyle]; [textStyle setFontSize: 12.0f]; CPTXYAxisSet * axisSet = (CPTXYAxisSet *) [graph axisSet]; CPTXYAxis * xAxis = [axisSet xAxis]; [xAxis setMajorIntervalLength: CPTDecimalFromInt (1)]; [xAxis setMinorTickLineStyle: nil]; [xAxis setLabelingPolicy: CPTAxisLabelingPolicyFixedInterval]; [xAxis setLabelTextStyle: textStyle]; [xAxis setLabelFormatter: axisFormatter]; CPTXYAxis * yAxis = [axeSet yAxis]; [yAxis setMajorIntervalLength: CPTDecimalFromInt (1)]; [yAxis setMinorTickLineStyle: nil]; [yAxis setLabelingPolicy: CPTAxisLabelingPolicyFixedInterval]; [yAxis setLabelTextStyle: textStyle]; [yAxis setLabelFormatter: axisFormatter];
Revoyons tout ce qui précède. Premièrement, nous travaillons avec une propriété du graphique appelée "plotAreaFrame". Avec cela, nous sommes en mesure de définir le remplissage de la zone où le graphique est réellement dessiné et cela nous permet de voir les étiquettes d'axe (qui étaient auparavant masquées). Nous définissons ensuite le style de ligne de bordure sur nil pour supprimer la bordure autour du graphique..
Nous créons ensuite un formateur NSNumber que nous utilisons pour formater les étiquettes des axes. Nous créons également quelque chose appelé «CPTMutableTextStyle». Lors du formatage des lignes, du remplissage de section et du texte pour les objets CorePlot, nous utilisons des objets tels que CPTMutableTextStyle. Pour l'instant, nous ne définissons que la taille de la police, mais nous pouvons également définir le type et la couleur de la police..
Nous obtenons ensuite un objet CPTXYAxisSet à partir de notre graphique. Cet axisSet contient un xAxis et un yAxis (les deux objets de type 'CPTXYAxis'). Nous définissons ensuite une variété de propriétés sur chaque axe. La longueur de l'intervalle principal définit ce que sera l'intervalle à chaque tick principal. Nous souhaitons également nous débarrasser des graduations mineures et définir le style de trait sur nil. Nous définissons la labellingPolicy à des intervalles fixes. Nous définissons ensuite le style de texte pour l'objet CPTMutableTextStyle que nous avons créé précédemment et le formateur d'étiquettes pour le NSNumberFormatter que nous avons créé..
Essayez maintenant d’afficher la vue des étudiants et d’ajouter un étudiant. Ensuite, vous pouvez revenir au graphique et vous devriez le voir changer. Cependant, il semble encore un peu fade…
Tout d'abord, changeons la ligne actuelle. En dessous de l'endroit où nous travaillons avec l'axe, entrez le code suivant:
CPTMutableLineStyle * mainPlotLineStyle = [[studentScatterPlot dataLineStyle] mutableCopy]; [mainPlotLineStyle setLineWidth: 2.0f]; [mainPlotLineStyle setLineColor: [CPTColor colorWithCGColor: [[UIColor blueColor] CGColor]]]; [studentScatterPlot setDataLineStyle: mainPlotLineStyle];
Cela rendra la ligne sur notre graphique bleue et augmentera la largeur. Si vous êtes plus créatif, vous pouvez rendre la couleur un peu moins nette, mais il est important de noter qu’elle nécessite une valeur CPTColor. Bien que nous ne puissions pas obtenir une CPTColor d’une UIColor, nous pouvons l’obtenir d’une CGColor..
Nous pouvons également modifier le style de ligne de l'axe. Entrez le code suivant ci-dessous où nous définissons le tracé dataLineStyle.
CPTMutableLineStyle * axisLineStyle = [CPTMutableLineStyle lineStyle]; [axisLineStyle setLineWidth: 1]; [axisLineStyle setLineColor: [CPTColor colorWithCGColor: [[UIColor greyColor] CGColor]]]; [xAxis setAxisLineStyle: axisLineStyle]; [xAxis setMajorTickLineStyle: axisLineStyle]; [yAxis setAxisLineStyle: axisLineStyle]; [yAxis setMajorTickLineStyle: axisLineStyle];
Ceci définit le style de trait et le style de trait de graduation principal pour les deux axes. Vous pouvez également définir la couleur textStyle en gris si vous le souhaitez (c'est votre graphique, donnez-le comme vous le souhaitez!).
Vous pouvez également ajouter un remplissage en dégradé au graphique linéaire pour améliorer l’apparence. Pour ce faire, nous créons un objet CPTFill que nous pouvons ensuite affecter au tracé:
CPTColor * areaColor = [CPTColor blueColor]; CPTGradient * areaGradient = [CPTGradient gradientWithBeginningColor: areaColor endingColor: [CPTColor clearColor]]; [areaGradient setAngle: -90.0f]; CPTFill * areaGradientFill = [CPTFill fillWithGradient: areaGradient]; [studentScatterPlot setAreaFill: areaGradientFill]; [studentScatterPlot setAreaBaseValue: CPTDecimalFromInt (0)];
Cela crée une surface que nous plaçons sous le graphique linéaire qui va du bleu au clair. L'angle définit la direction du dégradé et la valeur de base de la surface définit le point de départ du dégradé sur le tracé. Comme nous voulons commencer au bas du graphique, nous le fixons à 0.
Enfin, il est parfois utile d’indiquer où les valeurs sont tracées sur le graphique linéaire. Pour ce faire, nous devons appeler une méthode de source de données CPTScatterPlot appelée 'symbolForScatterPlot: recordIndex':
- (CPTPlotSymbol *) symbolForScatterPlot: (CPTScatterPlot *) aPlot recordIndex: (NSUInteger) index CPTPlotSymbol * plotSymbol = [CPTPlotSymbol ellipsePlotSymbol]; [plotSymbol setSize: CGSizeMake (10, 10)]; [plotSymbol setFill: [CPTFill fillWithColor: [CPTColor blueColor]]]]; [plotSymbol setLineStyle: nil]; [aPlot setPlotSymbol: plotSymbol]; return plotSymbol;
Le code ci-dessus crée et retourne un objet CPTPlotSymbol. Nous pouvons faire en sorte que cela ressemble à toutes sortes de choses, mais notre graphique utilisera une ellipse (cercle) remplie de bleu d'une taille de 10 par 10..
Après avoir implémenté le code ci-dessus, votre graphique devrait ressembler à ceci:
Nous montrons le nombre d'inscriptions d'étudiants au fil du temps, mais si nous voulions voir l'inscription d'un sujet spécifique sur le même graphique?
Les objets CPTGraph peuvent générer plusieurs tracés. Nous créons un nouveau graphique, comme nous l'avons fait par le passé, et l'ajoutons au graphique. Dans les méthodes de source de données, nous obtenons ensuite l'identificateur de graphe et, sur cette base, fournissons les données correctes..
Continuons et créons un graphique qui montre les inscriptions au fil du temps pour l'informatique. Sous le code où nous créons le "studentScatterPlot" (dans la méthode viewDidLoad), ajoutez ce qui suit:
CPTScatterPlot * csScatterPlot = [[CPTScatterPlot alloc] initWithFrame: [graph bounds]]; [csScatterPlot setIdentifier: @ "csEnrollement"]; [csScatterPlot setDelegate: self]; [csScatterPlot setDataSource: self]; [[auto graphique] addPlot: studentScatterPlot]; [[self graphique] addPlot: csScatterPlot];
Pendant que nous sommes dans cette méthode, nous devrions aussi la dénommer un peu. Faisons-le vert. Sous l'endroit où nous définissons le dataLineStyle pour studentPlot, ajoutez le code suivant:
[studentScatterPlot setDataLineStyle: mainPlotLineStyle]; [mainPlotLineStyle setLineColor: [CPTColor greenColor]]; [csScatterPlot setDataLineStyle: mainPlotLineStyle];
Sous l'endroit où nous avons défini le remplissage pour le nuage de points des étudiants, ajoutez le code suivant:
areaColor = [CPTColor greenColor]; areaGradient = [CPTGradient gradientWithBeginningColor: areaColor endingColor: [CPTColor clearColor]]; [areaGradient setAngle: -90.0f]; areaGradientFill = [CPTFill fillWithGradient: areaGradient]; [csScatterPlot setAreaFill: areaGradientFill]; [csScatterPlot setAreaBaseValue: CPTDecimalFromInt (0)];
Nous avons déjà fait tout cela avant, nous n'allons pas entrer dans ce qui se passe. Nous allons maintenant modifier notre méthode 'numberForPlot: field: recordIndex:'. Nous n'avons pas à changer la méthode numberOfRecordsForPlot: car de toute façon nous aurons 7 enregistrements. Dans la méthode numberForPlot: field: recordIndex:, localisez l'emplacement du prédicat et modifiez-le comme suit:
NSPredicate * predicate = nil; if ([[identificateur de tracé]] isEqual: @ "studentEnrollment"]) predicate = [NSPredicate predicateWithFormat: @ "dayEnrolled ==% d", index]; else if ([[identificateur de tracé]] estEqual: @ "csEnrollement"]) predicate = [NSPredicate predicateWithFormat: @ "dayEnrolled ==% d AND subjectID ==% d", index, 0];
Cela construit le prédicat en fonction du graphique en cours de tracé et obtient le nombre approprié. Enfin, nous devons définir les symboles du graphe en vert:
- (CPTPlotSymbol *) symbolForScatterPlot: (CPTScatterPlot *) aPlot recordIndex: (NSUInteger) index CPTPlotSymbol * plotSymbol = [CPTPlotSymbol ellipsePlotSymbol]; [plotSymbol setSize: CGSizeMake (10, 10)]; if ([[[aPlot identifiant]] estEqual: @ "studentEnrollment"]) [plotSymbol setFill: [CPTFill fillWithColor: [CPTColor blueColor]]]; else if ([[[aPlot identificateur]] estEqual: @ "csEnrollement"]) [plotSymbol setFill: [CPTFill fillWithColor: [CPTColor greenColor]]]; [plotSymbol setLineStyle: nil]; [aPlot setPlotSymbol: plotSymbol]; return plotSymbol;
Encore une fois, ce qui précède devrait être explicite. Nous examinons l'identifiant de la parcelle et, en fonction de la parcelle, nous faisons en sorte que le symbole de la parcelle soit vert ou bleu..
Maintenant, enregistrez et exécutez le graphique et vous devriez avoir quelque chose comme:
Et voila! Un graphique entièrement fonctionnel qui montre l’inscription des étudiants au fil du temps ainsi que l’inscription aux sciences informatiques. Comme vous pouvez le constater, il est assez facile d’ajouter un deuxième tracé une fois le graphe initial configuré. Essayez d'ajouter plus d'étudiants à l'application et à l'informatique et consultez la mise à jour du graphique..
Nous avons couvert un peu de terrain aujourd'hui. Nous avons établi la manière de styliser nos graphiques en modifiant les couleurs et les largeurs des lignes, ainsi qu'en ajoutant des remplissages en dégradé. Nous avons également expliqué comment ajouter et gérer plusieurs tracés sur un même objet graphique..
La prochaine fois, nous allons nous concentrer sur la création et la personnalisation d'un graphique à barres indiquant le nombre total d'étudiants inscrits dans chaque matière (chaque matière aura une barre individuelle). Vous attraper la prochaine fois!
Accentsconagua