Inicio » Internet » Web - programación » Cómo crear Gantt en CSS

Cómo crear Gantt en CSS


Gráficos Gantt se utilizan en programas como Microsoft Project y las perspectivas de citas y programación de proyecto. Hay muchas opciones de software para usar gráficos Gantt en Internet, pero puede crear un diagrama de Gantt usando CSS y HTML. El método para crear gráficos Gantt en HTML CSS es lento por lo que conviene considerar otra opción para el uso de gráficos de Gantt, que ya tienen el software disponible, como PHP, ASP, Java o fusión fría.

Dificultad: fácil

Instrucciones

Cosas que necesitará

  • Editor de texto
  1. Cree un nuevo archivo. En su editor de texto, seleccione “Archivo” y luego “Nuevo”. Crear un nuevo documento HTML llamado index.html. Coloque el HTML, el cuerpo y la cabeza etiquetas necesarias para una página web básica. Un diagrama de HTML Gantt fue creado por jlion (ver “Referencias”), pero requiere imágenes de diferentes colores y tamaños. En este ejemplo, se utilizan sólo HTML y CSS.
  2. Coloque etiquetas de estilo en sus etiquetas de cabeza. En las etiquetas de estilo, coloque el CSS que controlará el gráfico de Gantt. Además de estilos generales, crear un ID para cada artículo que usted programe. Por ejemplo, si tienes dos puntos para programar, tu CSS sería así: td {font-family: Verdana; font-size: 10px;}

    #TIM1 {background: #ff0000; color: #ff0000; altura: 15px; ancho: 20px;}

    #tim2 {background: #00ff00; color: #00ff00; altura: 15px; ancho: 30px; margen-izquierda: 150px;}

    Las etiquetas de fondo y color de la CSS denotan el color de la barra para el programa. La anchura controlará la cantidad de tiempo. En este ejemplo cada px es un minuto. La margen izquierda en la segunda identificación establece la barra en el momento de comenzar. La tabla del ejemplo será de 9 a 17 y puesto que cada px o pixel es un minuto la segunda identificación, tim2, comienza a las 11:30, 150 minutos de 9

  3. Crear una tabla con la información básica que desee programar. La tabla tendrá en línea CSS para controlar el tamaño de la tabla. Crear una columna para el nombre del artículo, una columna por vez, una columna de duración y finalmente una tabla anidada en una columna para el gráfico de barras del gráfico de Gantt. Por ejemplo:
    Diagrama de Gantt
    Descripción BeginTime iduration
    Indicador GANTT
    9 17

    La primera fila, denotada por la etiqueta tr, abarca siete columnas utilizando la propiedad colspan y contiene el azulejo de la tabla en su etiqueta td. La segunda fila, denotada una vez más por una nueva etiqueta tr, contiene los títulos de cada columna y una tabla anidada a crear los tiempos para las barras a. El tamaño de la célula 9 no importa porque se alinearán izquierda 9. 17 Necesitará ser alineados por lo que aparece al final de la tabla. Asegúrese de el ancho de la tabla toda la célula. Al poner esta parte en una mesa nido, el ejemplo muestra que hay un título, llamado indicador de Gantt para la barra de sección.

  4. Crear la barra de sección del gráfico. Añadir la tercera fila añadiendo otra etiqueta tr. Cada etiqueta tr tendrá cuatro células, denotadas por la etiqueta td. La primera célula debe ser el nombre del elemento, el segundo será el momento de que la cita comienza y el tercero será la duración. La cuarta fila incluirá una etiqueta div con el ID para el CSS correspondiente que creó para cada elemento. Dentro de la etiqueta div, inserte un período por cada minuto. Esto permitirá que la barra aparezca en el navegador. Si nos fijamos en la CSS, verá que hicimos el color y el fondo del mismo color para que los períodos no se vean. En cambio, el navegador mostrará una barra que indica el color en la CSS. Si en tu CSS hiciste la etiqueta 20px largo para una cita de 20 minutos se colocará 20 períodos en la etiqueta div. Por ejemplo:
    Una chica 9:00 20

    Un muchacho 11:30 30

    …………………………

    Esto demuestra dos citas. El primer bar, rojo, a empezar a la derecho en 9 ya 20 minutos de duración. La segunda barra, verde, no comience hasta después de la barra roja en la cuarta fila y ser más largo que la barra roja porque se encuentra 30px y por lo tanto una cita de 30 minutos.

  5. Guarde el archivo.

Consejos & advertencias

Se trata de una manera tediosa para crear un gráfico de Gantt. Puede actualizar a menudo. No hay generadores HTML y CSS para esto por lo que tendrá que escribir el código a mano. Si usted está planeando establecer un horario en su sitio web, puede mirar el proyecto y programación de software para la web de la cita.