Realizzare un grafico Gantt senza Javascript.
Scritto da:
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/days: ogni 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.