Share
Cuando se trabaja con aplicaciones de uso intensivo de datos, un desarrollador a menudo debe hacer algo más que mostrar listas de registros de datos en una vista de tabla. La biblioteca CorePlot le permitirá agregar impresionantes visualizaciones de datos a sus aplicaciones. Descubre cómo en esta serie Tuts + Premium.!
La última vez hicimos los comienzos de nuestro primer gráfico de líneas y permitimos al usuario navegar allí desde la vista de lista. Aprendimos acerca de los métodos CPTGraphHostingView, CPTGraph, CPTXYPlotSpace, CPTScatterPlot y CPTScatterPlotDataSource que proporcionan datos para el gráfico..
Hoy veremos cómo hacer que el gráfico sea más útil para el usuario especificando incrementos de eje y cómo formatear las etiquetas de incremento. Vamos a ver diferentes maneras en que podemos personalizar la apariencia de la gráfica. Finalmente, vamos a discutir cómo trabajar con diferentes parcelas en un solo gráfico. Empecemos!
Para modificar las propiedades de un eje X e Y trabajamos con los objetos 'CPTXYAxisSet' y 'CPTXAxis'. Abra el archivo STLineGraphViewController.m y vaya al método viewDidLoad. Justo debajo de donde trabajamos con la parcela Espacio ingrese el siguiente código:
[[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 = [axisSet yAxis]; [yAxis setMajorIntervalLength: CPTDecimalFromInt (1)]; [yAxis setMinorTickLineStyle: nil]; [yAxis setLabelingPolicy: CPTAxisLabelingPolicyFixedInterval]; [yAxis setLabelTextStyle: textStyle]; [yAxis setLabelFormatter: axisFormatter];
Repasemos todo lo de arriba. Primero, estamos trabajando con una propiedad del gráfico llamada 'plotAreaFrame'. Con esto podemos establecer el relleno del área donde se dibuja el gráfico y nos permite ver las etiquetas de los ejes (que anteriormente estaban ocultas). A continuación, establecemos el estilo de Línea de borde en nulo para eliminar el borde alrededor del gráfico.
Luego creamos un formateador NSNumber que usamos para formatear las etiquetas de los ejes. También creamos algo llamado 'CPTMutableTextStyle'. Al formatear líneas, rellenar la sección y el texto de los objetos CorePlot, usamos objetos como CPTMutableTextStyle para hacerlo. Por ahora solo establecemos el tamaño de fuente, pero también podemos configurar el tipo y el color de la fuente..
Luego obtenemos un objeto CPTXYAxisSet de nuestro gráfico. Este axisSet contiene un xAxis y un yAxis (ambos objetos del tipo 'CPTXYAxis'). Luego establecemos una variedad de propiedades en cada eje. La longitud del intervalo mayor establece cuál será el intervalo en cada marca principal. También queremos deshacernos de los ticks menores, así que establecemos el estilo de línea en nil. Establecemos la política de etiquetado a intervalos fijos. Luego establecemos el estilo de texto para el objeto CPTMutableTextStyle que creamos anteriormente y el formateador de etiquetas para el NSNumberFormatter que creamos.
Ahora intente ir a la vista del alumno y agregar un alumno. Después, puede volver al gráfico y debería verlo cambiar. Sin embargo, todavía se ve un poco soso ...
En primer lugar, vamos a cambiar la línea real. Debajo de donde tenemos trabajo con el eje ingrese el siguiente código:
CPTMutableLineStyle * mainPlotLineStyle = [[studentScatterPlot dataLineStyle] mutableCopy]; [mainPlotLineStyle setLineWidth: 2.0f]; [mainPlotLineStyle setLineColor: [CPTColor colorWithCGColor: [[UIColor blueColor] CGColor]]]; [studentScatterPlot setDataLineStyle: mainPlotLineStyle];
Esto hará que la línea de nuestro gráfico sea azul y aumente el ancho. Si es más creativo, puede hacer que el color sea un poco menos intenso, pero es importante tener en cuenta que requiere un valor de CPTColor. Si bien no podemos obtener un CPTColor de un UIColor, podemos obtenerlo de un CGColor.
Podemos cambiar el estilo de línea del eje también. Ingrese el siguiente código a continuación donde configuramos 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];
Esto establece el estilo de línea y el estilo de línea de tick principal para ambos ejes. También puedes configurar el color del estilo del texto en gris si lo deseas (¡es tu gráfico, haz que parezca que lo deseas!).
También puede agregar un relleno de degradado al gráfico de líneas para mejorar aún más la apariencia. Para hacer esto creamos un objeto CPTFill que luego podemos asignar a la 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)];
Esto crea un relleno de área que colocamos bajo el gráfico de líneas que va de azul a claro. El ángulo establece la dirección del degradado y el valor de la base del área establece desde dónde comienza el degradado en la gráfica. Como queremos comenzar en la parte inferior del gráfico, lo establecemos en 0.
Finalmente, a veces es una buena idea tener indicaciones donde los valores se representan en el gráfico de líneas. Para hacer esto, necesitamos llamar a un método de fuente de datos CPTScatterPlot llamado '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]; devuelve plotSymbol;
El código anterior crea y devuelve un objeto CPTPlotSymbol. Podemos hacer que se vea como todo tipo de cosas, pero nuestra gráfica usará una elipse (círculo) llena de azul con un tamaño de 10 por 10.
Después de que hayas implementado el código anterior, tu gráfica debería verse así:
Mostraremos la inscripción de estudiantes a lo largo del tiempo, pero ¿y si quisiéramos ver la inscripción para un tema específico en el mismo gráfico??
Los objetos CPTGraph pueden representar múltiples gráficos. Creamos una nueva trama como lo hemos hecho en el pasado y la agregamos a la gráfica. En los métodos de fuente de datos, obtenemos el identificador gráfico y, en base a eso, proporcionamos los datos correctos.
Continuemos y creemos una trama que muestre la inscripción a lo largo del tiempo para Informática. Debajo del código donde creamos el 'studentScatterPlot' (en el método viewDidLoad), agregue lo siguiente:
CPTScatterPlot * csScatterPlot = [[CPTScatterPlot alloc] initWithFrame: [graph lines]]; [csScatterPlot setIdentifier: @ "csEnrollement"]; [csScatterPlot setDelegate: self]; [csScatterPlot setDataSource: self]; [[auto-gráfico] addPlot: studentScatterPlot]; [[auto-gráfico] addPlot: csScatterPlot];
Mientras estemos en este método también deberíamos peinarlo un poco. Vamos a hacerlo verde. Debajo de donde establecemos el dataLineStyle para studentPlot, agregue el siguiente código:
[studentScatterPlot setDataLineStyle: mainPlotLineStyle]; [mainPlotLineStyle setLineColor: [CPTColor greenColor]]; [csScatterPlot setDataLineStyle: mainPlotLineStyle];
Debajo de donde establecemos el relleno para el diagrama de dispersión de estudiantes, agregue el siguiente código:
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)];
Hemos hecho todo esto antes, así que no vamos a entrar en lo que está sucediendo. Ahora vamos a modificar nuestro método 'numberForPlot: field: recordIndex:'. No tenemos que cambiar el método numberOfRecordsForPlot: porque de cualquier manera tendremos 7 registros. En el método numberForPlot: field: recordIndex :, ubique donde establecemos el predicado y modifíquelo para que tenga lo siguiente:
NSPredicate * predicate = nil; if ([[plot identifier] isEqual: @ "studentEnrollment"]) predicate = [NSPredicate predicateWithFormat: @ "dayEnrolled ==% d", index]; else if (([[plot identifier] isEqual: @ "csEnrollement"]) predicate = [NSPredicate predicateWithFormat: @ "dayEnrolled ==% d AND subjectID ==% d", índice, 0];
Esto construye el predicado basándose en qué gráfico se está graficando y obtiene el conteo relevante. Finalmente, necesitamos configurar los símbolos para el gráfico del sujeto en verde:
- (CPTPlotSymbol *) symbolForScatterPlot: (CPTScatterPlot *) aPlot recordIndex: (NSUInteger) index CPTPlotSymbol * plotSymbol = [CPTPlotSymbol ellipsePlotSymbol]; [plotSymbol setSize: CGSizeMake (10, 10)]; if ([[aPlot identifier] isEqual: @ "studentEnrollment"]) [plotSymbol setFill: [CPTFill fillWithColor: [CPTColor blueColor]]]; else if ([[aPlot identifier] isEqual: @ "csEnrollement"]) [plotSymbol setFill: [CPTFill fillWithColor: [CPTColor greenColor]]]; [plotSymbol setLineStyle: nil]; [aPlot setPlotSymbol: plotSymbol]; devuelve plotSymbol;
Nuevamente lo anterior debe ser autoexplicativo. Miramos el identificador de la trama y, con base en la trama que es, hacemos que el símbolo de la trama sea verde o azul.
Ahora guarde y ejecute el gráfico y debería tener algo como lo siguiente:
¡Y ahí lo tienes! Un gráfico totalmente funcional que muestra la inscripción de los estudiantes a lo largo del tiempo, así como la inscripción para Ciencias de la Computación. Como puede ver, es bastante fácil agregar un segundo gráfico una vez que haya configurado el gráfico inicial. Intente agregar más estudiantes a la aplicación y Ciencias de la Computación y vea la actualización del gráfico.
Hemos cubierto un poco de terreno hoy. Hemos establecido cómo estilizar nuestros gráficos cambiando los colores y el ancho de las líneas, así como agregando rellenos de degradado. También hemos descrito cómo puede agregar y administrar múltiples gráficos en un solo objeto gráfico..
La próxima vez nos centraremos en cómo crear y personalizar un gráfico de barras que muestre el número total de estudiantes inscritos en cada materia (cada tema tendrá una barra individual). Te veo la proxima vez!
Accentsconagua