Share
Når du arbeider med dataintensive applikasjoner, må en utvikler ofte gjøre mer enn bare å vise lister over dataposter i en tabellvisning. CorePlot-biblioteket lar deg legge til fantastiske datavisualiseringer i dine applikasjoner. Finn ut hvordan i denne Tuts + Premium-serien!
Sist gang vi gjorde begynnelsen av vår første linjediagram og tillot brukeren å navigere der fra listevisningen. Vi lærte om CPTGraphHostingView, CPTGraph, CPTXYPlotSpace, CPTScatterPlot og CPTScatterPlotDataSource-metodene som gir data for grafen.
I dag vil vi se på hvordan du gjør grafen mer nyttig for brukeren ved å spesifisere aksjeintervaller og hvordan du formaterer inkrementetikettene. Vi skal se på forskjellige måter vi kan tilpasse utseendet på grafen. Til slutt skal vi diskutere hvordan man skal arbeide med forskjellige tomter på en enkelt graf. La oss komme i gang!
For å endre egenskapene til en X- og Y-akse jobber vi med 'CPTXYAxisSet' og 'CPTXAxis' -objektene. Åpne filen STLineGraphViewController.m og gå til viewDidLoad-metoden. Litt under hvor vi jobber med plottet Space, skriv inn følgende kode:
[[graph plotAreaFrame] setPaddingLeft: 20.0f]; [[graph plotAreaFrame] setPaddingTop: 10.0f]; [[graph plotAreaFrame] setPaddingBottom: 20.0f]; [[graph plotAreaFrame] setPaddingRight: 10.0f]; [[graph plotAreaFrame] setBorderLineStyle: null]; 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: null]; [xAxis setLabelingPolicy: CPTAxisLabelingPolicyFixedInterval]; [xAxis setLabelTextStyle: textStyle]; [xAxis setLabelFormatter: axisFormatter]; CPTXYAxis * yAxis = [axisSet yAxis]; [yAxis setMajorIntervalLength: CPTDecimalFromInt (1)]; [yAxis setMinorTickLineStyle: null]; [yAxis setLabelingPolicy: CPTAxisLabelingPolicyFixedInterval]; [yAxis setLabelTextStyle: textStyle]; [yAxis setLabelFormatter: axisFormatter];
La oss gå over alt over. For det første jobber vi med en egenskap av grafen som kalles 'plotAreaFrame'. Med dette kan vi sette polstring av området der grafen faktisk er tegnet og det tillater oss å se akselabellene (som tidligere var skjult). Vi setter deretter kantlinjestilen til null for å kvitte seg med grensen rundt grafen.
Vi lager deretter en NSNummer formatter som vi bruker til å formatere akseetikettene. Vi lager også noe som heter "CPTMutableTextStyle". Når du formaterer linjer, fyll seksjon og tekst for CorePlot-objekter, bruker vi objekter som CPTMutableTextStyle til å gjøre det. For nå setter vi bare skriftstørrelsen, men vi kan også angi skrifttype og farge.
Vi får et CPTXYAxisSet-objekt fra grafen vår. Denne aksessettet inneholder en xAxis og en yAxis (begge objekter av typen 'CPTXYAxis'). Vi setter da en rekke eiendommer på hver akse. Hovedintervalllengden angir hva intervallet ved hvert hovedfelt vil være. Vi ønsker også å bli kvitt de små flåttene, så vi stiller linjestilen til null. Vi stiller etikettpolicyen til faste intervaller. Vi setter deretter tekststilen for CPTMutableTextStyle-objektet som vi opprettet tidligere, og etiketten formaterer til NSNumberFormatter vi opprettet.
Prøv nå å gå til studentvisningen og legge til en student. Etterpå kan du gå tilbake til grafen og du bør se at den endres. Men det ser fortsatt litt blid ut ...
Først av, la oss endre den aktuelle linjen. Under hvor vi har arbeid med aksen, skriv inn følgende kode:
CPTMutableLineStyle * mainPlotLineStyle = [[studentScatterPlot dataLineStyle] mutableCopy]; [mainPlotLineStyle setLineWidth: 2.0f]; [mainPlotLineStyle setLineColor: [CPTColor colorWithCGColor: [[UIColor blueColor] CGColor]]]; [studentScatterPlot setDataLineStyle: mainPlotLineStyle];
Dette vil gjøre linjen på grafen vår blå og øke bredden. Hvis du er mer kreativ, kan du gjøre fargen litt mindre sterk, men det er viktig å merke seg at det krever en CPTColor-verdi. Selv om vi ikke kan få en CPTColor fra en UIColor, kan vi få den fra en CGColor.
Vi kan også endre linjestilen på aksen. Skriv inn følgende kode nedenfor, der vi angir tomten dataLineStyle.
CPTMutableLineStyle * axisLineStyle = [CPTMutableLineStyle lineStyle]; [axisLineStyle setLineWidth: 1]; [axisLineStyle setLineColor: [CPTColor colorWithCGColor: [[UIColor grayColor] CGColor]]]; [xAxis setAxisLineStyle: axisLineStyle]; [xAxis setMajorTickLineStyle: axisLineStyle]; [yAxis setAxisLineStyle: axisLineStyle]; [yAxis setMajorTickLineStyle: axisLineStyle];
Dette setter linjestilen og den store tippelinjestilen for begge akse. Du kan også sette textStyle-farge som grå hvis du vil (det er grafen din, gjør det slik at du vil at den skal!).
Du kan også legge til en gradient fyll i linjediagrammet for å forbedre utseendet ytterligere. For å gjøre dette skaper vi et CPTFill-objekt som vi deretter kan tilordne til plottet:
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)];
Dette skaper et områdefyll som vi legger under linjediagrammet som går fra blått til tømmer. Vinkelen setter gradientretningen og områdegrunnverdien setter hvor gradienten starter fra på plottet. Som vi ønsker å starte nederst i grafen, setter vi den til 0.
Til slutt er det noen ganger en god ide å ha indikasjoner der verdiene er tegnet på linjediagrammet. For å gjøre dette må vi ringe en CPTScatterPlot datakilde metode kalt 'symbolForScatterPlot: recordIndex':
- (CPTPlotSymbol *) symbolForScatterPlot: (CPTScatterPlot *) aPlot recordIndex: (NSUInteger) indeks CPTPlotSymbol * plotSymbol = [CPTPlotSymbol ellipsePlotSymbol]; [plotSymbol setSize: CGSizeMake (10, 10)]; [plotSymbol setFill: [CPTFill fillWithColor: [CPTColor blueColor]]]; [plotSymbol setLineStyle: null]; [aPlot setPlotSymbol: plotSymbol]; returnere plotSymbol;
Koden ovenfor lager og returnerer et CPTPlotSymbol-objekt. Vi kan få det til å se ut som alle slags ting, men grafen vår vil bruke en ellipse (sirkel) fylt med blå med en størrelse på 10 av 10.
Etter at du har implementert ovennevnte kode, bør grafen se slik ut:
Vi viser studentopplysningene over tid, men hva om vi ønsket å se påmelding for et bestemt emne på samme graf?
CPTGraph objekter kan gjengi flere tomter. Vi lager et nytt plott akkurat som vi har gjort tidligere, og legger det til grafen. I datakildemetodene får vi grafidentifikatoren og, basert på det, gir de riktige dataene.
La oss gå videre og lage et plott som viser påmelding over tid for datavitenskap. Under koden der vi lager 'studentScatterPlot' (i viewDidLoad-metoden), legg til følgende:
CPTScatterPlot * csScatterPlot = [[CPTScatterPlot-allokering] initWithFrame: [graph bounds]]; [csScatterPlot setIdentifier: @ "csEnrollement"]; [csScatterPlot setDelegate: self]; [csScatterPlot setDataSource: selv]; [[selvgrafikk] addPlot: studentScatterPlot]; [[selvgrafikk] addPlot: csScatterPlot];
Mens vi er i denne metoden, bør vi også stilte den litt. La oss gjøre det grønt. Under der vi setter dataLineStyle til studentPlot, legg til følgende kode:
[studentScatterPlot setDataLineStyle: mainPlotLineStyle]; [mainPlotLineStyle setLineColor: [CPTColor greenColor]]; [csScatterPlot setDataLineStyle: mainPlotLineStyle];
Under hvor vi legger fyllingen til studentens scatterplot, legg til følgende kode:
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)];
Vi har gjort alt dette før, så vi vil ikke gå inn i hva som skjer. Nå skal vi endre vår 'numberForPlot: field: recordIndex:' metode. Vi trenger ikke å endre numberOfRecordsForPlot: metoden, fordi vi enten har 7 poster. I feltet numberForPlot: RecordIndex: metode, finn hvor vi setter predikatet og modifiser det for å ha følgende:
NSPredicate * predicate = nil; hvis ([[plotidentifikator] isEqual: @ "studentEnrollment"]) predicate = [NSPredicate predicateWithFormat: @ "dayEnrolled ==% d", indeks]; ellers hvis ([[plotidentifikator] isEqual: @ "csEnrollement"]) predicate = [NSPredicate predicateWithFormat: @ "dayEnrolled ==% d OG subjectID ==% d", indeks, 0];
Dette konstruerer predikatet basert på hvilken graf som blir plottet og får den relevante tellingen. Til slutt må vi sette symbolene for motivgrafen til grønt:
- (CPTPlotSymbol *) symbolForScatterPlot: (CPTScatterPlot *) aPlot recordIndex: (NSUInteger) indeks CPTPlotSymbol * plotSymbol = [CPTPlotSymbol ellipsePlotSymbol]; [plotSymbol setSize: CGSizeMake (10, 10)]; hvis [[aPlot-identifikator] isEqual: @ "studentEnrollment"]) [plotSymbol setFill: [CPTFill fillWithColor: [CPTColor blueColor]]]; ellers hvis [[aPlot-identifikator] isEqual: @ "csEnrollement"]) [plotSymbol setFill: [CPTFill fillWithColor: [CPTColor greenColor]]]; [plotSymbol setLineStyle: null]; [aPlot setPlotSymbol: plotSymbol]; returnere plotSymbol;
Igjen skal det ovenfor være selvforklarende. Vi ser på plottidentifikatoren, og basert på hvilken plot det er, gjør vi plottesymbolet enten grønt eller blått.
Lagre og kjør grafen nå, og du bør ha noe som følger:
Og der har du det! En fullstendig grafikk som viser studentinnskrivning over tid, samt innmelding for datavitenskap. Som du kan se, er det ganske enkelt å legge til et nytt plott når du har opprettet den første grafen. Prøv å legge til flere studenter til appen og datavitenskap og se grafoppdateringen.
Vi har dekket litt bakken i dag. Vi har etablert hvordan vi kan tegne grafene våre ved å endre linjens farger og bredder, samt legge til gradientfyll. Vi har også skissert hvordan du kan legge til og administrere flere plott på et enkelt grafobjekt.
Neste gang skal vi fokusere på hvordan du oppretter og tilpasser et linjediagram som viser totalt antall studenter som er registrert i hvert emne (hvert fag har en individuell linje). Fang deg neste gang!
Accentsconagua