Share
När du arbetar med dataintensiva applikationer måste en utvecklare ofta göra mer än bara visa listor med dataposter i en tabellvy. CorePlot-biblioteket låter dig lägga till fantastiska datavisualiseringar till dina applikationer. Ta reda på hur i denna Tuts + Premium-serie!
Förra gången vi gjorde början på vår första linjediagram och fick användaren att navigera dit från listvisningen. Vi lärde oss om CPTGraphHostingView, CPTGraph, CPTXYPlotSpace, CPTScatterPlot och CPTScatterPlotDataSource-metoder som ger data för grafen.
Idag ser vi hur man gör grafen mer användbar för användaren genom att ange axelinkrement och hur man formaterar inkrementetiketterna. Vi ska titta på olika sätt att vi kan anpassa utseendet på grafen. Slutligen ska vi diskutera hur man arbetar med olika diagram på en enda graf. Låt oss börja!
För att ändra egenskaperna hos en X- och Y-axel arbetar vi med objekten "CPTXYAxisSet" och "CPTXAxis". Öppna filen STLineGraphViewController.m och gå till viewDidLoad-metoden. Strax nedanför där vi arbetar med tomten Space anger du följande kod:
[[graph plotAreaFrame] setPaddingLeft: 20.0f]; [[graph plotAreaFrame] setPaddingTop: 10.0f]; [[graph plotAreaFrame] setPaddingBottom: 20.0f]; [[plot plotAreaFrame] setPaddingRight: 10.0f]; [[graph plotAreaFrame] setBorderLineStyle: nil]; NSNumberFormatter * axisFormatter = [[NSNumberFormatter alloc] init]; [axisFormatter setMinimumIntegerDigits: 1]; [axelformatter 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 = [axisSet yAxis]; [yAxis setMajorIntervalLength: CPTDecimalFromInt (1)]; [yAxis setMinorTickLineStyle: nil]; [yAxis setLabelingPolicy: CPTAxisLabelingPolicyFixedInterval]; [yAxis setLabelTextStyle: textStyle]; [yAxis setLabelFormatter: axelformat];
Låt oss gå över allt ovanför. Först arbetar vi med en egenskap av grafen som kallas "plotAreaFrame". Med detta kan vi ställa in vadderingen av det område där grafen faktiskt ritas och det låter oss se axelmärkningarna (som tidigare var dolda). Vi ställer sedan gränslinjestilen till noll för att bli av med gränsen runt grafen.
Vi skapar sedan en NSNumber formaterare som vi använder för att formatera axelmärkningarna. Vi skapar också något som heter "CPTMutableTextStyle". När du formaterar linjer, fyller avsnitt och text för CorePlot-objekt vi använder objekt som CPTMutableTextStyle för att göra det. För tillfället ställer vi bara in teckensnittsstorleken, men vi kan också ställa in teckensnittstyp och färg.
Vi får sedan ett CPTXYAxisSet-objekt från vårt diagram. Denna axeluppsättning innehåller en xAxis och en yAxis (båda objekten av typen 'CPTXYAxis'). Vi ställer sedan flera olika egenskaper på varje axel. Den stora intervalllängden anger vad intervallet vid varje huvudflik kommer att vara. Vi vill också bli av med de mindre fläckarna så vi ställer linjestilen till noll. Vi ställer märkningspolicyen till fasta intervall. Vi ställer sedan in textstilen för det CPTMutableTextStyle-objekt som vi skapade tidigare och etiketten formaterar till NSNumberFormatter som vi skapade.
Nu försöker du gå till studentvyn och lägga till en elev. Därefter kan du gå tillbaka till grafen och du bör se att den ändras. Men det ser fortfarande lite blött ut ...
Först av, låt oss ändra den aktuella linjen. Nedan där vi arbetar med axeln anger du följande kod:
CPTMutableLineStyle * mainPlotLineStyle = [[studentScatterPlot dataLineStyle] mutableCopy]; [mainPlotLineStyle setLineWidth: 2.0f]; [mainPlotLineStyle setLineColor: [CPTColor colorWithCGColor: [[UIColor blueColor] CGColor]]]; [studentScatterPlot setDataLineStyle: mainPlotLineStyle];
Detta gör linjen på vår graf blå och ökar bredden. Om du är mer kreativ kan du göra färgen lite mindre skarp men det är viktigt att notera att det kräver ett CPTColor-värde. Medan vi inte kan få en CPTColor från en UIColor kan vi hämta den från en CGColor.
Vi kan också ändra linjestilen på axeln. Ange följande kod nedan, där vi ställer in plotdataLineStyle.
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];
Detta ställer in linjestilen och den stora tipplinjestilen för båda axlarna. Du kan också ställa in textStyle-färgen som grå om du vill (det är ditt diagram, så att det ser ut som om du vill att det ska!).
Du kan också lägga till en gradient fyllning i linjediagrammet för att förbättra utseendet ytterligare. För att göra detta skapar vi ett CPTFill-objekt som vi sedan kan tilldela till diagrammet:
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)];
Detta skapar en områdesfyllning som vi lägger under linjediagrammet som går från blått till raderat. Vinkeln ställer in lutningsriktningen och områdets basvärde anger var gradienten börjar på plottet. Som vi vill börja längst ned i grafen sätter vi den på 0.
Slutligen är det ibland en bra idé att ha indikationer där värdena är ritade på linjediagrammet. För att göra detta måste vi ringa en CPTScatterPlot datakälla metod som heter '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]; returnera plotSymbol;
Ovanstående kod skapar och returnerar ett CPTPlotSymbol-objekt. Vi kan få det att se ut som alla slags saker men vårt diagram kommer att använda en ellips (cirkel) fylld med blå med en storlek av 10 av 10.
När du har implementerat ovanstående kod ska din graf se ut så här:
Vi visar studenten inskrivning över tiden, men om vi ville se inskrivning för ett visst ämne på samma graf?
CPTGraph-objekt kan göra flera diagram. Vi skapar en ny tomt precis som vi har gjort tidigare och lägger till den i grafen. I datakällans metoder får vi då grafidentifieraren och, baserat på det, ger rätt data.
Låt oss gå vidare och skapa ett diagram som visar inskrivning över tid för datavetenskap. Under koden där vi skapar 'studentScatterPlot' (i metoden ViewDidLoad) lägger du till följande:
CPTScatterPlot * csScatterPlot = [[CPTScatterPlot-allokering] initWithFrame: [graph bounds]]; [csScatterPlot setIdentifier: @ "csEnrollement"]; [csScatterPlot setDelegate: self]; [csScatterPlot setDataSource: self]; [[självgraf] addPlot: studentScatterPlot]; [[självgraf] addPlot: csScatterPlot];
Medan vi är i den här metoden borde vi också stila den lite. Låt oss göra det grönt. Nedan där vi ställer in dataLineStyle för studentPlot, lägg till följande kod:
[studentScatterPlot setDataLineStyle: mainPlotLineStyle]; [mainPlotLineStyle setLineColor: [CPTColor greenColor]]; [csScatterPlot setDataLineStyle: mainPlotLineStyle];
Nedan där vi ställer in fyllet för studentens scatterplot lägger du till följande kod:
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 allt detta förut så vi kommer inte att gå in på vad som händer. Nu ska vi ändra vårt nummerForPlot: -fält: recordIndex: -metoden. Vi behöver inte ändra numberOfRecordsForPlot: -metoden för att vi har 7 poster. I fältet numberForPlot: RecordIndex: -metoden, leta reda på var vi ställer in predikatet och modifiera det för att ha följande:
NSPredicate * predicate = nil; om ([[plotidentifierare] isEqual: @ "studentEnrollment"]) predicate = [NSPredicate predicateWithFormat: @ "dayEnrolled ==% d", index]; annars om ([[plotidentifierare] isEqual: @ "csEnrollement"]) predicate = [NSPredicate predicateWithFormat: @ "dayEnrolled ==% d OCH subjectID ==% d", index, 0];
Detta bygger predikatet utifrån vilken graf som ritas och får relevant räkning. Slutligen måste vi ställa in symbolerna för ämnesgrafen till grön:
- (CPTPlotSymbol *) symbolForScatterPlot: (CPTScatterPlot *) aPlot recordIndex: (NSUInteger) index CPTPlotSymbol * plotSymbol = [CPTPlotSymbol ellipsePlotSymbol]; [plotSymbol setSize: CGSizeMake (10, 10)]; om [[aPlot identifierare] isEqual: @ "studentEnrollment"]) [plotSymbol setFill: [CPTFill fillWithColor: [CPTColor blueColor]]]; annars om ([[aPlot identifierare] isEqual: @ "csEnrollement"]) [plotSymbol setFill: [CPTFill fillWithColor: [CPTColor greenColor]]]; [plotSymbol setLineStyle: nil]; [aPlot setPlotSymbol: plotSymbol]; returnera plotSymbol;
Återigen bör det vara självförklarande. Vi tittar på plotidentifieraren och baserar sig på vilken plot det är, vi gör plottsymbolen antingen grön eller blå.
Spara nu och kör grafen och du borde ha något som följande:
Och där har du det! En fullt fungerande graf som visar studentinträde över tid samt inskrivning för datavetenskap. Som du kan se är det ganska enkelt att lägga till en andra tomt när du har den första grafen som ställts in. Försök lägga till fler studenter till appen och datavetenskap och se grafuppdateringen.
Vi har täckt lite mark i dag. Vi har fastställt hur vi ska stila våra grafer genom att ändra linjens färger och bredder samt lägga till gradientfyllningar. Vi har också skisserat hur du kan lägga till och hantera flera diagram i ett enda grafobjekt.
Nästa gång kommer vi att fokusera på hur man skapar och anpassar ett stapeldiagram som visar det totala antalet studenter som är inskrivna i varje ämne (varje ämne har en individuell stapel). Fånga dig nästa gång!
Accentsconagua