Vai al contenuto

Realizzare un grafico Gantt senza Javascript.

Scritto da:

carlopeluso

 

Oggi ho sperimentato una soluzione SCSS based per realizzare un grafico a Gantt. L’esempio è stato realizzato utilizzando due diversi layer (con un z-index diverso):

  • griglia per mostrare anno e asse dei mesi
  • barre orizzontali (z-index principale)

La prima parte dell’HTML si riferisce all’elenco di etichette da mostrare al lato sinistro del grafico. Sono completamente slegate rispetto al grafico, per permettere di fare scrolling sull’asse x dei dati e lasciare in posizione fissa le labels.

La seconda parte  è composta dall’elenco delle barrette verticali che dividono l’asse x degli anni e dei mesi.

Il trucco per posizionare le barre del grafico seguendo la data specifica è dato dal fattore di moltiplicazione pixels/daysogni barra ha un differente margin-left, che corrisponde in pixel al numero di giorni passati dal 1 Gennaio del suo stesso anno. I giorni sono moltiplicati per un fattore moltiplicativo che rende il grafico piu largo sull’asse x e quindi piu leggibile.

Articolo precedente

"Fluence", un visual del collettivo "We are moshpit".

Articolo successivo

Blob animato con funzione blur() e mix-blend-mode.