Creación de una interfaz gráfica para representar un conjunto de programaciones de trabajo

Mi equipo está trabajando en una aplicación en Java que impulsa proyectos a través de una herramienta de gestión de procesos comerciales. Cada proyecto contiene alrededor de 25-30 tareas que deben completarse en un orden determinado.

Entre esas tareas hay unas seis o siete que representan 'eventos de fechas retroactivas', cada una de las cuales debe completarse en plazos secuenciales predefinidos.

Entonces, en nuestra base de datos tenemos alrededor de 7 tareas vinculadas a cada proyecto, cada una con una fecha límite y una bandera que nos dice cuál de los eventos se ha completado.

Lo que le interesa al negocio es tener una interfaz gráfica que le muestre al usuario:

  • una lista de los proyectos en los que el usuario está involucrado
  • cada elemento de la lista que muestra dónde se encuentra el proyecto en el cronograma de trabajo retroactivo
  • codificación de colores para mostrar qué proyectos están atrasados ​​o casi atrasados
  • idealmente una forma de cambiar los plazos con la interfaz, pero llamaremos a esto un buen tener

Hasta ahora, he estado investigando algunas bibliotecas de gráficos de JavaScript, como chart.js, aunque no parece que la interfaz ofrezca exactamente lo que queremos, ya que muchas de estas bibliotecas parecen ser puramente matemáticas.

Siento que podríamos lograr esto con bastante facilidad con una tabla antiestética, pero nos gustaría obtener una buena perspectiva de la característica final.

Entonces, ¿está buscando un creador de diagramas de Gantt? en.wikipedia.org/wiki/Gantt_chart ?

Respuestas (1)

Sugeriría usar la API de Google Charts para crear un gráfico de línea de tiempo, por ejemplo:

<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization',
       'version':'1','packages':['timeline']}]}"></script>
<script type="text/javascript">

google.setOnLoadCallback(drawChart);
function drawChart() {
  var container = document.getElementById('example2.1');
  var chart = new google.visualization.Timeline(container);
  var dataTable = new google.visualization.DataTable();

  dataTable.addColumn({ type: 'string', id: 'Term' });
  dataTable.addColumn({ type: 'string', id: 'Name' });
  dataTable.addColumn({ type: 'date', id: 'Start' });
  dataTable.addColumn({ type: 'date', id: 'End' });

  dataTable.addRows([
    [ '1', 'George Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
    [ '2', 'John Adams',        new Date(1797, 2, 4),  new Date(1801, 2, 4) ],
    [ '3', 'Thomas Jefferson',  new Date(1801, 2, 4),  new Date(1809, 2, 4) ]]);

  chart.draw(dataTable);
}
</script>

<div id="example2.1" style="height: 200px;"></div>

Crea:ingrese la descripción de la imagen aquí

Creación de una interfaz gráfica para representar un conjunto de programaciones de trabajo
RespuestasAquíPolítica de privacidad1y, 0v