Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. CSS Charts
Webdesign

Cómo crear un diagrama de Gantt simple con CSS y JavaScript

by
Difficulty:IntermediateLength:MediumLanguages:

Spanish (Español) translation by Ana Paulina Figueroa Vazquez (you can also view the original English article)

Hasta ahora, en nuestra serie de tutoriales sobre gráficos con CSS hemos aprendido a crear diferentes tipos de gráficos, entre ellos gráficos de barras, de termómetro y circulares.

Hoy continuaremos este viaje generando y presentando información en un diagrama de Gantt. A diferencia de los otros tutoriales sobre gráficos, haremos un uso intensivo de JavaScript para implementar varios aspectos del diagrama. Podrás usar esta base como una plantilla para diagramas de Gantt en proyectos futuros.

Nota: ten en cuenta que es perfectamente posible construir un diagrama de Gantt puramente con CSS gracias al diseño de cuadrícula de este último. ¡Observa cómo se hace en este tutorial!

El diagrama de Gantt que vamos a construir

Este es el diagrama que vamos a crear (presiona rerun (volver a ejecutar) para verlo animado). Este muestra una serie de tareas, dejando en claro cuándo están programadas para comenzar durante el transcurso de una semana (ya sea al comienzo de un día o a la mitad) y cuándo deben terminarse:

¿Qué es un diagrama de Gantt?

Desarrollados por el ingeniero mecánico Henry Gantt durante el período previo a la Primera Guerra Mundial, los diagramas de Gantt se usaban originalmente para gestionar la logística de la movilización de soldados y municiones estadounidenses. Hoy en día las técnicas de Gantt se usan para mucho más que la guerra; de hecho las encontrarás presentes en la mayoría de las industrias. Facilitan la visualización de una lista de tareas, la dependencia de esas tareas entre sí y su estado de avance.

"Un diagrama de Gantt es un tipo de gráfico de barras que ilustra el cronograma de un proyecto. Este diagrama lista las tareas a ejecutar en el eje vertical, y los intervalos de tiempo en el eje horizontal. El ancho de las barras horizontales del diagrama muestra la duración de cada actividad."

Wikipedia
Visualization of a Gantt chart
Visualización de un diagrama de Gantt

Los diagramas de Gantt brindan a los gerentes la capacidad de administrar proyectos, programar tareas, observar el progreso, delegar responsabilidades y asignar recursos.

De hecho, no tienes que ser un gerente para usarlos. Cualquier persona que quiera organizar sus tareas puede beneficiarse de esta forma de visualización de proyectos.

Independientemente de su uso como una herramienta de gestión, el diseño de Gantt también puede tener otros usos. Por ejemplo, puedes usar este enfoque dentro de un sitio corporativo como una línea de tiempo para visualizar la historia de la compañía.

Soluciones Gantt

La mayoría de las plataformas de gestión de proyectos usan diagramas de Gantt como parte central de sus ofertas. ClickUpZapier y Monday.com son nombres que escucharás al discutir aplicaciones de gestión de proyectos (aunque los fundadores de Monday.com enfatizan que su línea de tiempo "está enfocada en las personas, no en tareas o proyectos").

Plantillas para diagramas de Gantt en Envato Elements

Keynote, PowerPoint y otras aplicaciones para presentaciones son más que capaces de crear diagramas de Gantt con fines de demostración. Echa un vistazo a algunas de las plantillas para diagramas de Gantt disponibles en este momento en Envato Elements.

Gantt Chart Keynote Template
Plantilla de diagramas de Gantt para Keynote
Project Status for Keynote
Project Status para Keynote

También hay una serie de soluciones gratuitas y propietarias disponibles para construir tus propios diagramas de Gantt. Puedes crear uno con Microsoft Excel, Google Sheets, una aplicación web como TeamGantt, una biblioteca de JavaScript como Highcharts, o incluso escribiendo tu propio código.

En este tutorial vamos por la última opción; ¡construyamos nuestro propio diagrama de Gantt simple usando CSS y JavaScript!

1. Especifica el marcado de la página

Vamos a comenzar definiendo un elemento encapsulador que contiene dos listas:

  • La primera lista define el rango del diagrama (los datos del eje x). En nuestro caso, este contendrá los días de la semana. Cada día representará las horas de trabajo normales.
  • La segunda lista establece los datos del diagrama (los datos del eje y). En nuestro caso los datos incluirán las tareas que deben realizarse en una semana. Cada elemento de la lista, que describe una tarea, tiene dos atributos personalizados: el atributo data-duration y el atributo data-color. El primer atributo define la duración de la tarea, mientras que el segundo es el color de fondo. El valor del atributo data-duration debe estar en el formato [díaInicio]-[díaFinal]. Dicho eso, usaremos data-duration="tue-wed" para una tarea que debe comenzar el martes ("tue", por su abreviación en inglés) y finalizar el miércoles ("wed", por su abreviación en inglés). Además, una tarea también puede comenzar y terminar a la mitad de un día. En tal caso, el valor del atributo data-duration debe estar en el formato [díaInicio]½-[díaFinal]½. Así que, por ejemplo, usaremos data-duration="tue-wed½" para una tarea que debe comenzar el martes y terminar a la mitad del miércoles. De manera similar, data-duration="tue½-tue" describirá una tarea que debe comenzar a la mitad del martes y terminar el mismo día.

Este es el marcado requerido:

2. Dale estilo al diagrama

En aras de la simplicidad no voy a revisar los estilos iniciales de restablecimiento, pero siéntete libre de echarles un vistazo haciendo clic en la pestaña CSS del proyecto de demostración.

En encapsulador del diagrama tendrá un ancho máximo con contenido centrado horizontalmente:

El eje x

La lista .chart-values será un contenedor flex. Sus elementos flexibles (días) se distribuirán por igual a lo largo del eje principal y tendrán un ancho mínimo de 80px. Como resultado de ese ancho mínimo, el diagrama no se reducirá más allá de ese valor en pantallas pequeñas y aparecerá una barra de desplazamiento horizontal. Siéntete libre de eliminarlo si no te gusta este comportamiento.

Para visualizar mejor los límites izquierdo y derecho de cada elemento, usaremos su pseudo-elemento ::before. Le daremos una altura grande establecida directamente en el código (510px), lo que garantiza que se expanda a todas las tareas. En vez de establecer ese valor directamente en el código, siempre existe la opción de calcularlo dinámicamente a través de JavaScript. Pero vamos a omitir esa solución por ahora, ya que es de importancia secundaria.

The chart values

Los estilos correspondientes:

El eje y

Los elementos (barras) de la segunda lista estarán ocultos inicialmente. De manera específica, tendrán los valores width: 0 y opacity: 0. Además, les daremos el valor position: relative. Más adelante estableceremos dinámicamente sus posiciones left de acuerdo al valor de sus atributos data-duration.

Estos son los estilos relacionados:

3. Agrega el código JavaScript

Cuando la página cargue, o cuando cambie el tamaño de la ventana del navegador, la función createChart será ejecutada:

Nota: como he mencionado en otros tutoriales, existen diferentes formas de limitar los eventos resize que se emiten. Por ejemplo, una solución efectiva es usar la función _.debounce de Lodash. Sin embargo, esto se encuentra más allá del alcance de este tutorial.

Dentro de esta función primero hacemos lo siguiente:

  1. Obtener los elementos de las dos listas.
  2. Convertir el NodeList days en un arreglo real utilizando el operador de propagación. De manera alternativa podríamos haber usado el método Array.from(). Esta conversión nos permitirá aprovechar el método filter(), que se encuentra disponible en los arreglos, para filtrar los días.
  3. Recorrer las tareas.

Recorre las tareas

A continuación, por cada tarea:

  1. Tomamos el valor de su atributo data-duration (por ejemplo, tue-wed). Además dividimos este valor usando "-" como separador.
  2. La primera cadena del arreglo devuelto representa el día de inicio de la tarea (por ejemplo, tue, o martes), mientras que la segunda es el día de finalización (por ejemplo, wed, o miércoles).
  3. Conociendo su día de inicio, filtramos daysArray para obtener el elemento (day) de la lista que coincida con ese día. Durante esta prueba ignoramos la posible presencia del carácter "½". Luego hacemos algunos cálculos para obtener el valor necesario de la propiedad left de la tarea relacionada.
  4. Conociendo su día de finalización, filtramos daysArray para obtener el elemento (day) de la lista que coincida con ese día. Durante esta prueba ignoramos la posible presencia del carácter "½". Luego hacemos algunos cálculos para obtener el valor necesario de la propiedad width de la tarea relacionada.

Nota: en el código anterior usamos la propiedad Element.offsetLeft para obtener la posición izquierda (left) de un elemento en relación a su padre. Además aprovechamos la propiedad Element.offsetWidth para encontrar el ancho (width) del elemento. Como otra opción para obtener su ancho, pudimos de igual manera haber usado el método Element.getBoundingClientRect(), que es más preciso.

Establece los estilos

Una vez calculados los valores left y width de cada tarea, el último paso es realizar las siguientes acciones:

  1. Aplicar los estilos correspondientes.
  2. Obtener el valor del atributo data-color y establecerlo como color de fondo de la tarea.
  3. Mostrar la tarea. Recuerda que todas las tareas están escondidas inicialmente.
  4. Las acciones 2 y 3 solo deben ejecutarse al cargar la página, ya que sus valores no cambiarán cada vez que cambiemos el tamaño de la ventana del navegador.

Conclusión

¡Eso es todo! Logramos construir un diagrama de Gantt completamente funcional. Gracias por seguir estos pasos, amigos, espero que esto haya sido un buen ejercicio para actualizar tus habilidades en JavaScript. Aquí hay una vista más de la demostración final:

Juega con el diagrama y, si encuentras alguna forma de mejorar su funcionalidad, ¡asegúrate de compartirla! Mantente atento para ver el diagrama de Gantt equivalente en CSS.

Como siempre, ¡muchas gracias por leer!

Siguientes pasos

Si quieren un desafío, intenten convertir esta línea de tiempo vertical en un diagrama de Gantt.

Lee más

Hojas de cálculo, visualización de datos, plantillas para diagramas de Gantt, gráficos, animación: ¡hay muchas cosas más en las que se puede profundizar!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.