Crear un gráfico en Jetpack Compose | de Saurabh Pantalones | junio 2022

¡El gráfico se reduce al final!

https://www.ft.com/content/f1220e04-aad7-11e7-ab55-27219df83c97Con frecuencia, necesitamos trazar algunos datos en forma de un gráfico progresivo. Esto brinda a los usuarios una mejor experiencia con los datos. Entonces, en este artículo, exploraremos una de las muchas formas de crear un gráfico en Jetpack Compose. Veamos cuál será nuestro resultado final.Resultado final del gráfico Aunque Compose API para crear un gráfico es bastante simple, debemos ocuparnos de algunas cosas menores y también debemos conocer el sistema de coordenadas, ya que calcularemos los puntos que se trazarán. Basta de hablar, vamos a sumergirnos en el proceso. Como necesitamos un dibujo personalizado en este caso, juguemos con Canvas en Compose.

Suposición

Primero, comprendamos cómo dibujamos el gráfico y hagamos algunas suposiciones. Así que tenemos un eje x, que suponemos que representa días, y un eje y, que representa la cantidad de pasos que caminó un usuario ese día en particular. Tenemos 10 días en el eje x y un máximo de 350 pasos en el intervalo de 50 en el eje y.Ilustración del diagrama El diagrama muestra algunos términos clave sobre los que construiremos el diagrama.

xEjeEspacio

La distancia mínima o igual para valores en el eje x.

yAxisSpace

El espaciado mínimo o igual para los valores en el eje y.

punto 1

El primer punto de partida en el gráfico.

punto 2

El segundo punto del gráfico y el punto 3… y así sucesivamente.

Punto de control 1 y 2

Este es el punto que usa la curva de Bézier para dibujar su curva desde los puntos 1 y 2. Si no sabe cómo funciona la curva de Bézier, echemos un vistazo rápido.Fuente: https://www.quackit.com/ Como se muestra en la imagen, la curva de Bezier tiene un punto inicial (P0) y un punto final (P3) entre los cuales se dibuja la curva. También tiene dos puntos de control P1 y P2 que ayudan a controlar la forma de la curva. Por ejemplo, si cambia ambos puntos de control por valores diferentes, algunas de las formas podrían serlo.Hasta ahora hemos entendido todos los pequeños detalles que necesitábamos. Ahora codifiquemos lo que acabamos de ver. Primero, creemos un gráfico que se pueda componer con las siguientes entradas: @Composablefun Graph(modifier : Modifier,xValues: List,yValores: Lista,puntos: Lista, paddingSpace: Dp,verticalStep: Int) Los valores se explican por sí mismos. Vamos al segundo paso. Ahora tenemos un cuadro y en él agregamos un canvas.Box(modifier = modifier.background(Color.White).padding(horizontal = 8.dp, vertical = 12.dp),contentAlignment = Center). {lienzo(modificador = modificador.fillMaxSize(),) {}}Configuramos el lienzo al tamaño completo de la caja y el tamaño de la caja que controlaremos desde el padre. Ahora vamos a mostrar primero nuestros ejes x e y. También calculamos la distancia entre los puntos en los ejes x e y restando el relleno que proporcionamos para nuestro cuadro y dividiéndolo por el total de puntos en el eje. También dibujamos pequeños círculos en los puntos (coordenadas) para que podamos ver dónde están nuestros puntos. Ejecutar la aplicación hasta aquí nos da el siguiente resultado.¡Grande! Estamos llegando allí. Ahora, para conectar estos puntos con una curva Bezier, necesitamos identificar los puntos de control para cada par de puntos, comenzando desde cero. Así que calculemos los puntos de control para ellos. Ahora que tenemos las coordenadas y los puntos de control para todos los pares, conectemos las coordenadas. Primero nos movemos a la primera coordenada y luego comenzamos a unirlos. Ejecutar la aplicación hasta aquí nos da el siguiente resultado.¡Enfriar! No es. Ahora la última parte es llenar el área debajo del camino. Para hacer esto, usaremos la ruta que acabamos de crear y la expandiremos para llenar el espacio. El objeto FillPath dibuja una línea desde la última coordenada de nuestro StrokePath hasta la esquina inferior derecha sin el espacio vertical y desde allí una línea hacia el lado izquierdo del gráfico y finalmente hasta la primera coordenada. Esto asegura un ciclo cerrado para nuestro camino. Ahora, cuando ejecutemos la aplicación, nuestro gráfico se dibujará en la pantalla. Mira, no fue tan difícil, solo algo de matemáticas y geometría. Echa un vistazo al proyecto en Github, ramifícalo y prueba diferentes valores para ver variaciones. Hasta la próxima… ¡salud!