A continuación se mostrara un ejemplo básico de cómo generar gráficos en Swift. Para esto se usará la librería de Daniel Cohen Gindi llamada Charts, que se encuentra en este enlace. Esta libreria cuenta con 8 diferentes tipos de graficos personalizables, de los cuales a continuación solo se mostrará un ejemplo basico para iniciarse con esta y comprender su uso.
El post se dividirá en las siguientes secciones:
- Configuración inicial e instalación de librería
- Configuración de la vista y componentes gráficos
- Codificación de los gráficos
Como es costumbre, y antes de comenzar, el contexto del desarrollo y ejemplo es:
Sistema Operativo: macOS High Sierra
Xcode 10.1
Swift 4.2
Además, el proyecto completo se encuentra para descarga libre en GitHub en este enlace.
Configuración inicial e instalación de librería
Antes de comenzar a configurar el proyecto, descargaremos la aplicación desde su repositorio en GitHub.
Una vez descargado, al abrir la carpeta tendremos este contenido
Ahora, comenzaremos a configurar el proyecto en Xcode. Para esto:
- Abrir Xcode y configurar un nuevo proyecto.
- Definiremos el nombre y luego su ubicación (en este caso la aplicación se llama “graficoEjemplo”).
- Incluir la librería descargada en nuestro proyecto. Para esto, buscar el archivo “Charts.xcodeproj” y lo moveremos hasta nuestro proyecto en XCode, quedando de la siguiente forma:
Luego, en la configuración de nuestro proyecto, en “General”->”Embedded Binaries“, click en “+”, y seleccionar “Charts.framework” como se muestra en las imágenes.
Finalmente hacer click en “Add“.
NOTA DE POSIBLE ERROR: Si se llega a recibir el siguiente error
Showing Recent Messages
:-1: SWIFT_VERSION ‘5.0’ is unsupported, supported versions are: 3.0, 4.0, 4.2. (in target ‘Charts’)
Se debe ir a las propiedades del Charts.xcodeproj (no de nuestro proyecto inicial “graficoEjemplo”) y cambiar la versión de Swift a 4.2.
Configuración de la vista y componentes gráficos
Ahora comenzaremos a configurar nuestro proyecto, y para esto se añadirán los elementos visuales.
Primero ir al “LaunchScreen.storyboard” y solo añadir un label para dar la bienvenida a la apliacion (mera costumbre, y no dejar esta pantalla en blanco…. Bueno, no 100% en blanco)
En “Main.storyboard” añadiremos un Scroll View para poder colocar mas elementos en una sola vista, y asi evitar el llenarnos de ventanas para un ejemplo basico. Configuramos el Scroll View correctamente quedando de la siguiente forma.
Luego, añadiremos los elementos propios para generar el gráfico. Esto corresponde a un label para el titulo, y un View por cada grafico, el cual pintaremos con un color naranjo solo para diferenciarlos y saber donde están ubicados dentro del Scroll View. Cabe señalar que este color no aparacerá luego en los gráficos.
Para finalizar, debemos configurar las propieades de los View. Para esto seleccionamos cada View y al costado derecho, vamos a “Identity inspector” y configuramos con HorizontalBarChartView y LineChartView como muestran las imágenes:
Listo, ahora ya tenemos lista nuestra interfaz gráfica. Pero nos falta enlazarla al codigo ¿como?, bueno, antes debemos incluir la librería Charts en nuestro ViewController.swift:
Luego, asociamos los Views del “Main.storyboard” a nuestro “ViewController.swift”. Definimos un nombre por cada View y queda de la siguiente forma:
Ya estamos listos para codificar y generar los gráficos.
Codificación de los gráficos
Para graficar, definiremos 2 funciones: una para generar un gráfico de barras horizontales y otra para generar un gráfico de lineas. Las funciones las llamaremos:
- generaGraficoBarra()
- generaGraficoLinea()
Estas funciones se llamaran en la funcion viewDidLoad, y se desplegaran inmediatamente al ejecutar la aplicación.
La lógica de ambas funciones consisten en:
- Declarar variables de entrada, cuyos valores son los que serán graficados
- Definir un dataset con tipo de dato que interprete la librería
- Asignar el dataset a la variable asociada a nuestro View del “Main.storyboard”.
Por ejemplo, el código de la función generaGraficoBarra() es:
func generaGraficoBarra () {
let dato1 = BarChartDataEntry(x: 1.0, y: Double(7))
let dato2 = BarChartDataEntry(x: 2.0, y: Double(6))
let dato3 = BarChartDataEntry(x: 3.0, y: Double(3))
let dataSet = BarChartDataSet(entries: [dato1, dato2, dato3], label: "Leyenda Barra")
let data = BarChartData(dataSets: [dataSet])
chartBarraHorizontal.data = data
chartBarraHorizontal.notifyDataSetChanged()
}
Mientras que el de generaGraficoLinea() es:
func generaGraficoLinea () {
let dato1 = BarChartDataEntry(x: 1.0, y: Double(7))
let dato2 = BarChartDataEntry(x: 2.0, y: Double(6))
let dato3 = BarChartDataEntry(x: 3.0, y: Double(3))
let dataSet = LineChartDataSet(entries: [dato1, dato2, dato3], label: "Leyenda Linea")
let data = LineChartData(dataSets: [dataSet])
chartLinea.data = data
chartLinea.notifyDataSetChanged()
}
Recordar que el proyecto completo se encuentra en GitHub. Al ejecutar nuestro proyecto, tenemos el resultado:
Conclusión
Los gráficos en las aplicaciones son muchas veces necesarios, y afortunadamente si contamos con librerías que nos ayudan con estas labores. Por suerte para quienes trabajamos con Swift, contar con una librería como Charts, con sus variadas posibilidades y simples configuraciones, quita un gran peso menos de encima el generar en una vista un gráfico. Además esta librería cuenta con hartas publicaciones en internet, por lo que existe una comunidad que continuamente esta aportando contenido sobre esta.
Ahora queda seguir averiguando sobre esta librería Charts.
Acerca del autor Nestor Cortes
Informático en aprendizaje constante, y siempre practicando la versatilidad en el mundo real. Experiencia en minería ,banca, y servicios tecnológicos. Desarrollo Java, Swift y PHP principalmente
- Web |
- More Posts(13)