Mira nuestra colección de los 5 mejores plugins de jQuery y JavaScript de diagramas de Gantt dinámicos para aplicaciones web.

Top 5: los mejores plugins de jQuery y JavaScript de diagramas de Gantt dinámicos para aplicaciones web

Si trabajas en la gestión de proyectos o tienes un puesto que implica la programación de tareas y recursos, entonces el diagrama de Gantt térmico probablemente no te parecerá desconocido. Con un diagrama de Gantt tendrás, a tu disposición, una vista muy clara de todas las actividades programadas, cuánto tiempo está programado que dure cada actividad, dónde se superponen las actividades con otras actividades y dónde se coloca cada recurso. Estos cuadros te ayudarán a aclarar cómo se interrelacionan varias tareas y además depender de la realización de otra para cumplir objetivos específicos. Si eres un desarrollador web y estás buscando un componente de diagrama de Gantt incrustable increíble con JavaScript, no busques más, estoy seguro de que encontrarás lo que necesitas en este Top.

Disfruta de nuestra colección de 5 de los mejores componentes de Dynamic Gantt gratuitos para tus aplicaciones web.

5. jsGanttImproved

Github

Un componente de diagrama de Gantt con todas las funciones construido completamente en Javascript, CSS y AJAX. Es ligero y no se necesitan bibliotecas externas ni imágenes adicionales. Las principales características que incluye este proyecto son:

  • Tareas y grupos de tareas plegables.
  • Dependencias
  • La terminación de la tarea.
  • Estilo de tareas.
  • Hitos.
  • Recursos.
  • Carga dinámica de tareas.
  • Cambio dinámico de formato: Hora, Día, Semana, Mes, Trimestre.
  • Cargar Gantt desde XML
    • Desde archivos externos (incluido el soporte experimental para archivos XML de MS Project).
    • De JavaScript Strings.
  • Soporte para internacionalización (todas las cadenas codificadas de forma rígida se pueden anular)

4. jQuery Gantt

Github

jQuery Gantt component

jQuery Gantt Chart es un gráfico simple que implementa la funcionalidad de gantt como un componente de jQuery. Es capaz de:

  • Leer datos json
  • Resultados de paginación
  • Muestra diferentes colores para cada tarea.
  • Mostrar una breve descripción como sugerencias
  • Marcar vacaciones

El complemento fue probado y debería funcionar en:

  • Firefox 4+
  • Chrome 13+
  • Safari 5+
  • Opera 9+
  • IE 8+

Este complemento se distribuye bajo la licencia MIT.

3. jQuery GanttView

Github

El complemento jQuery.ganttView es un complemento muy liviano para crear un diagrama de Gantt en HTML simple, no se requieren gráficos vectoriales o imágenes. El complemento admite arrastrar y cambiar el tamaño de los bloques de Gantt y las devoluciones de llamada para capturar los datos actualizados.

El complemento depende de las siguientes bibliotecas:

  • jQuery 1.4 o superior (obviamente)
  • jQuery-UI 1.8 o superior
  • date.js

Actualmente, el complemento ha sido probado y está funcionando en: FF 3.5+, Chrome 5+, Safari 4+, IE8 +. Hay problemas menores en IE7 y ni siquiera he intentado usarlo en IE6. Si encuentra algún problema con cualquier versión de Internet Explorer y le gustaría contribuir con correcciones de CSS, visite el repositorio y cree solicitudes de extracción, varias personas han solicitado compatibilidad con IE6.

2. TW Gantt

Github | Documentation

Originalmente, Twproject Gantt editor es una herramienta en línea gratuita para crear y compartir Gantts, sin embargo, proporciona su componente Gantt escrito en JavaScript y construido en jQuery para crear Gantts, árboles de tareas, dependencias que exportan los datos resultantes en formato JSON.

  • edición in situ.
  • arrastrar y soltar.
  • zoom.
  • hacer / deshacer.
  • múltiples dependencias.
  • camino critico.
  • edición completa.
  • fechas.
  • atajos.
  • piel css.
  • hitos.
  • navegador múltiple.
  • edición de recursos.
  • múltiples asignaciones.
  • exportar datos en formato JSON cambiar el tamaño y desplazarse SVG dibujo suave para imprimir.

Si bien un visor de Gantt (por lo tanto, de solo lectura) se puede empaquetar fácilmente como un solo componente, un editor de Gantt es un objeto mucho más complicado, por lo que los autores prefieren pensar en él como una aplicación jQuery incrustada y no solo como un complemento.

1. DHTMLX Gantt Chart

Documentation | Demos

Gantt DXHTML Free Component

dhtmlxGantt proporciona una API de JavaScript rica y flexible que te permite configurar cada elemento de su diagrama de Gantt: personalizar la escala de tiempo, definir la estructura de la cuadrícula, cambiar el color de las barras de tareas, agregar texto o cualquier HTML personalizado a las barras de tareas, definir dependencias ( relaciones) entre tareas y más. El formulario de edición de tareas (caja de luz) también se puede personalizar para incluir los nuevos campos personalizados. Las principales características de esta biblioteca son:

  • Diagrama de Gantt editable o de solo lectura
  • Control total con API JavaScript
  • Navegador cruzado: IE, FF, Chrome, Safari, Opera
  • Navegación por teclado
  • Soporte para dispositivos táctiles: iOS, Android
  • integración jQuery
  • Modo de pantalla completa
  • Cargando desde XML, JSON
  • Excelente comportamiento de arrastrar y soltar para administrar tareas
  • Capacidad para marcar tiempos específicos en el área de la línea de tiempo
  • Información sobre herramientas
  • Cálculo de ruta crítica (solo PRO)
  • Planificación retrospectiva
  • Vista de árbol opcional
  • Formulario de edición de tareas personalizable (lightbox)
  • Agrupación de tareas (solo PRO)
  • Soporte de líneas de base, fechas límite y otros elementos personalizados (solo PRO)
  • Tres tipos de tareas: proyecto (solo PRO), tarea, hito (solo PRO)
  • Coloración del porcentaje de progreso para las tareas
  • Programación automática (solo PRO)
  • Soporte de tareas no programadas
  • Flechas de dependencia
  • Api simple para administrar modos de editabilidad / solo lectura de tareas individuales
  • Exportar / importar desde MS Project
  • Representación inteligente
  • Funcionalidad deshacer / rehacer
  • Accesibilidad

El diagrama de Gantt se puede usar fácilmente con los marcos jQuery, NodeJS, Angular, Angular 2. Al ser una solución totalmente del lado del cliente, puedes usarla con cualquier tecnología del lado del servidor, incluido PHP (Laravel, Slim y otros marcos php), ASP.NET, Ruby on Rails y otros. El componente de diagrama de Gantt DHTMLX es compatible con todos los navegadores principales: Google Chrome, Firefox, Internet Explorer (8+), Microsoft Edge, Safari en particular. Este componente es gratuito bajo la licencia GPL.

Honorable mentions

jQuery Gantt

Github

jQuery Gantt

jQuery Gantt es un complemento de jQuery útil para crear un diagrama de Gantt. Las principales características de este complemento son:

  • Localizable 
  • Fácil configuración
  • Ligero (5 KB en gzip)
  • Funciona en todos los navegadores principales, incluido IE11 +

Si conoces otro componente de diagrama de Gantt DHTMLX gratuito impresionante escrito en JavaScript para aplicaciones web, compártelo con la comunidad en el cuadro de comentarios.


Interesado en la programación desde los 14 años, Carlos es un programador autodidacta, fundador y autor de la mayoría de los artículos de Our Code World.

Conviertete en un programador más sociable

Patrocinadores