Share
Quando si lavora con applicazioni ad uso intensivo di dati, uno sviluppatore deve spesso fare molto di più che mostrare solo elenchi di record di dati in una vista tabella. La libreria CorePlot ti consentirà di aggiungere incredibili visualizzazioni di dati alle tue applicazioni. Scopri come in questa serie di Tuts + Premium!
L'ultima volta abbiamo fatto l'inizio del nostro primo grafico lineare e consentito all'utente di navigare lì dalla visualizzazione elenco. Abbiamo appreso i metodi CPTGraphHostingView, CPTGraph, CPTXYPlotSpace, CPTScatterPlot e CPTScatterPlotDataSource che forniscono i dati per il grafico.
Oggi vedremo come rendere il grafico più utile all'utente specificando gli incrementi dell'asse e come formattare le etichette incrementali. Vedremo diversi modi in cui possiamo personalizzare l'aspetto grafico del grafico. Infine, discuteremo come lavorare con grafici diversi su un singolo grafico. Iniziamo!
Per modificare le proprietà di un asse X e Y, lavoriamo con gli oggetti 'CPTXYAxisSet' e 'CPTXAxis'. Aprire il file STLineGraphViewController.m e andare al metodo viewDidLoad. Appena sotto dove lavoriamo con la trama Spazio inserire il seguente codice:
[[grafico plotAreaFrame] setPaddingLeft: 20.0f]; [[grafico plotAreaFrame] setPaddingTop: 10.0f]; [[grafico plotAreaFrame] setPaddingBottom: 20.0f]; [[grafico plotAreaFrame] setPaddingRight: 10.0f]; [[grafico 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 *) [grafico 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: axisFormatter];
Andiamo sopra tutto sopra. Innanzitutto, stiamo lavorando con una proprietà del grafico chiamata "plotAreaFrame". Con questo siamo in grado di impostare il padding dell'area in cui il grafico è effettivamente disegnato e ci permette di vedere le etichette degli assi (che erano precedentemente nascoste). Quindi impostiamo lo stile della linea Border su zero per sbarazzarci del bordo attorno al grafico.
Quindi creiamo un formatter NSNumber che usiamo per formattare le etichette degli assi. Creiamo anche qualcosa chiamato "CPTMutableTextStyle". Quando si formattano le linee, la sezione di riempimento e il testo per gli oggetti CorePlot, vengono utilizzati oggetti come CPTMutableTextStyle per farlo. Per ora impostiamo solo la dimensione del carattere, ma possiamo anche impostare il tipo di carattere e il colore.
Quindi otteniamo un oggetto CPTXYAxisSet dal nostro grafico. Questo axisSet contiene un xAxis e un yAxis (entrambi gli oggetti di tipo 'CPTXYAxis'). Quindi impostiamo una varietà di proprietà su ciascun asse. La lunghezza dell'intervallo maggiore imposta quale sarà l'intervallo di ciascun tick principale. Vogliamo anche sbarazzarci delle zecche minori così abbiamo impostato lo stile della linea su zero. Impostiamo LabellingPolicy su intervalli fissi. Quindi impostiamo lo stile di testo per l'oggetto CPTMutableTextStyle che abbiamo creato in precedenza e il formattatore di etichette per NSNumberFormatter che abbiamo creato.
Adesso prova ad andare al punto di vista dello studente e ad aggiungere uno studente. In seguito puoi tornare al grafico e dovresti vederlo cambiare. Tuttavia, sembra ancora un po 'insipido ...
Prima di tutto, cambiamo la linea attuale. Sotto, dove abbiamo lavorato con l'asse, inserisci il seguente codice:
CPTMutableLineStyle * mainPlotLineStyle = [[studentScatterPlot dataLineStyle] mutableCopy]; [mainPlotLineStyle setLineWidth: 2.0f]; [mainPlotLineStyle setLineColor: [CPTColor colorWithCGColor: [[UIColor blueColor] CGColor]]]; [studentScatterPlot setDataLineStyle: mainPlotLineStyle];
Questo renderà la linea sul nostro grafico blu e aumenterà la larghezza. Se sei più creativo, puoi rendere il colore un po 'meno netto, ma è importante notare che richiede un valore CPTColor. Mentre non possiamo ottenere un CPTColor da un UIColor, possiamo ottenerlo da un CGColor.
Possiamo anche cambiare lo stile della linea dell'asse. Inserire il seguente codice qui sotto dove si imposta la trama 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];
Questo imposta lo stile della linea e lo stile della linea di zecca principale per entrambi gli assi. Puoi anche impostare il colore textStyle come grigio se vuoi (è il tuo grafico, fallo sembrare come vuoi!).
È inoltre possibile aggiungere un riempimento sfumato al grafico lineare per migliorare ulteriormente l'aspetto. Per fare ciò creiamo un oggetto CPTFill che possiamo quindi assegnare alla trama:
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)];
Questo crea un'area di riempimento che inseriamo sotto il grafico a linee che va dal blu al chiaro. L'angolo imposta la direzione del gradiente e il valore di base dell'area viene impostato da dove inizia la sfumatura sul grafico. Poiché vogliamo iniziare in fondo al grafico, lo impostiamo su 0.
Infine, a volte è una buona idea avere indicazioni su dove i valori sono tracciati sul grafico a linee. Per fare ciò, dobbiamo chiamare un metodo di origine dati CPTScatterPlot chiamato "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;
Il codice precedente crea e restituisce un oggetto CPTPlotSymbol. Possiamo farlo sembrare di tutto, ma il nostro grafico utilizzerà un'ellisse (cerchio) riempita di blu con una dimensione di 10 per 10.
Dopo aver implementato il codice precedente, il tuo grafico dovrebbe apparire in questo modo:
Stiamo mostrando l'iscrizione degli studenti nel corso del tempo, ma se volessimo vedere l'iscrizione per uno specifico argomento sullo stesso grafico?
Gli oggetti CPTGraph possono eseguire più trame. Creiamo una nuova trama proprio come abbiamo fatto in passato e la aggiungiamo al grafico. Nei metodi dell'origine dati otteniamo quindi l'identificatore del grafico e, in base a ciò, forniamo i dati corretti.
Andiamo avanti e creare una trama che mostra l'iscrizione nel tempo per l'informatica. Sotto il codice in cui viene creato lo 'studentScatterPlot' (nel metodo viewDidLoad), aggiungere quanto segue:
CPTScatterPlot * csScatterPlot = [[CPTScatterPlot alloc] initWithFrame: [limiti del grafico]]; [csScatterPlot setIdentifier: @ "csEnrollement"]; [csScatterPlot setDelegate: self]; [csScatterPlot setDataSource: self]; [[auto grafico] addPlot: studentScatterPlot]; [[auto grafico] addPlot: csScatterPlot];
Mentre siamo in questo metodo, dovremmo anche modellarlo un po '. Facciamo verde. Sotto, dove impostiamo dataLineStyle per lo studentePlot, aggiungiamo il seguente codice:
[studentScatterPlot setDataLineStyle: mainPlotLineStyle]; [mainPlotLineStyle setLineColor: [CPTColor greenColor]]; [csScatterPlot setDataLineStyle: mainPlotLineStyle];
Sotto il punto in cui impostiamo il riempimento per il diagramma scatter studente, aggiungi il seguente codice:
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)];
Abbiamo fatto tutto questo prima quindi non entreremo in quello che sta accadendo. Ora modificheremo il metodo "numberForPlot: field: recordIndex:". Non dobbiamo modificare numberOfRecordsForPlot: metodo perché in entrambi i casi avremo 7 record. Nel campo numberForPlot: field: recordIndex: metodo, individuare dove impostare il predicato e modificarlo per ottenere quanto segue:
NSPredicate * predicate = nil; if ([[identificatore di trama] isEqual: @ "studentEnrollment"]) predicato = [predicato NSPredicateWithFormat: @ "dayEnrolled ==% d", index]; else if ([[identificatore di trama] isEqual: @ "csEnrollement"]) predicato = [NSPredicate predicateWithFormat: @ "dayEnrolled ==% d AND subjectID ==% d", index, 0];
Questo costruisce il predicato in base a quale grafico viene tracciato e ottiene il conteggio rilevante. Infine, dobbiamo impostare i simboli per il grafico del soggetto su verde:
- (CPTPlotSymbol *) symbolForScatterPlot: (CPTScatterPlot *) aPlot recordIndex: (NSUInteger) index CPTPlotSymbol * plotSymbol = [CPTPlotSymbol ellipsePlotSymbol]; [plotSymbol setSize: CGSizeMake (10, 10)]; if ([[identificatore aPlot] isEqual: @ "studentEnrollment"]) [plotSymbol setFill: [CPTFill fillWithColor: [CPTColor blueColor]]]; else if ([[identificatore di aPlot] isEqual: @ "csEnrollement"]) [plotSymbol setFill: [CPTFill fillWithColor: [CPTColor greenColor]]]; [plotSymbol setLineStyle: nil]; [aPlot setPlotSymbol: plotSymbol]; return plotSymbol;
Di nuovo quanto sopra dovrebbe essere auto-esplicativo. Osserviamo l'identificatore della trama e, in base alla trama, facciamo il simbolo del grafico verde o blu.
Ora salva ed esegui il grafico e dovresti avere qualcosa di simile al seguente:
E il gioco è fatto! Un grafico completamente funzionante che mostra l'iscrizione degli studenti nel tempo e l'iscrizione a Computer Science. Come puoi vedere, è abbastanza semplice aggiungere un secondo grafico una volta impostato il grafico iniziale. Prova ad aggiungere più studenti all'app e a Computer Science e guarda l'aggiornamento del grafico.
Oggi abbiamo coperto un po 'di terreno. Abbiamo stabilito come modellare i nostri grafici cambiando i colori e le larghezze della linea e aggiungendo riempimenti sfumati. Abbiamo anche delineato come è possibile aggiungere e gestire più grafici su un singolo oggetto grafico.
La prossima volta ci concentreremo su come creare e personalizzare un grafico a barre che mostri il numero totale di studenti iscritti a ciascun argomento (ogni soggetto avrà una barra individuale). Prenderti la prossima volta!
Accentsconagua