Questa è la traduzione dell'articolo Pure Css Line Graph di Alen Grakalic pubblicato originariamente su CSS Globe l'11 Febbraio 2009. La traduzione viene qui presentata con il consenso dell'editore e dell'autore.
Penso spesso a modi per visualizzare dati usando solo i CSS. Tempo fa ho scritto un articolo su questo argomento (traduzione) e una cosa che recentemente mi ha intrigato è stata una soluzione per creare dei grafici a linee usando, appunto, solo i CSS. Molti non vedranno alcun reale vantaggio in questa tecnica, specialmente perché esistono molte soluzioni per i grafici basate su Javascript (ma anche Flash).
La mia intenzione non è solo quella di rendere possibile la visualizzazione di dati per quelle persone che non intendono affidarsi ai vari linguaggi di scripting, ma anche di dimostrare la potenza dei CSS e presentare un modo di usarli in maniera diversa rispetto al solito. Se non siete appassionati dei grafici a linee e della visualizzazione di dati in generale, potrete comunque leggere questo articolo come un esperimento sull'uso dei CSS e forse imparare qualcosa sull'uso degli sprites e del posizionamento.
Per iniziare, ecco un'immagine del risultato finale:
Ed ecco la demo. Potete anche scaricare il pacchetto zip con gli esempi.
Dunque, si parla di grafici a linee. A cosa servono? Farò solo un esempio e lascerò le altre considerazioni su vantaggi e svantaggi al vostro discernimento: gli utenti fanno una scansione dei blocchi di una pagina, non leggono ogni parola o numero che in essa siano presenti. I grafici a linee consentono di trasmettere certe informazioni in maniera più efficace di una tabella riempita con numeri.
Come funziona?
La tecnica si basa su HTML strutturato, rimpiazza il testo con immagini e, usando gli sprites CSS e il posizionamento assoluto, crea la simulazione di un grafico a linee. Come nel mio esempio dei grafici ottenuti con i soli CSS, userò liste di definizione (dl). Le liste di definizione vengono trattate con gli stili per rappresentare il sistema di coordinate in cui inseriamo i nostri item. Per questa ragione, gli elementi dl vuoti devono apparire più o meno così:
Le dimensioni usate nel grafico di sfondo definiscono le dimensioni che usiamo per gli elementi figli allo scopo di accomodare tutto al meglio. In questo caso, ogni item rappresenta un giorno. Per gli item usiamo elementi dd con elementi span annidati. Formattiamo e piazziamo le liste di definizione in modo che formino delle barre lineari nel grafico.
Ciò che rende possibile la creazione del grafico a linee è la formattazione con i CSS degli elementi span.
Il principio del grafico
Il concetto può sembrare un po' avanzato, ma se state attenti vedrete che la logica è alla fine semplice. Nel mio esempio, gli item (gli elementi dd) hanno una dimensione di 33px in larghezza e 330px in altezza. Ogni item rappresenta un "movimento di linea" da un punto all'altro. Usiamo un'immagine, uno sprite CSS, che ha tutte le possibili opzioni visualizzate graficamente. Come potete vedere nell'immagine, ci sono linee che crescono e linee che decrescono. Impostando la posizione dello sfondo degli elementi span annidati ad un certo valore scegliamo una delle linee disponibili.
Ma non è tutto. Dobbiamo anche impostare la posizione di partenza per ciascun item, dal momento che la linea inizia sempre da un valore diverso. Ciò viene fatto impostando il valore top per gli elementi span.
Per questa ragione, ogni span ha due (alcuni tre) nomi di classe associati: uno definisce il punto di partenza (il valore top), un altro che rappresenta il movimento verso l'alto o verso il basso del "movimento di linea" (si tratta della posizione dello sfondo).
Il punto di partenza è basato sul valore precedente. Dovete continuare con l'item successivo nel punto in cui quello precedente si ferma.
Uso
Se date un'occhiata al file CSS, vedrete che ho creato quattro gruppi di nomi di classe: due per impostare la posizione di partenza, due per definire il movimento.
Ho suddiviso i gruppi dei nomi di classe per la posizione di partenza in base alla situazione in cui i valori e le linee crescono o decrescono (rispettivamente, la parte alta e quella bassa dell'immagine).
Ho nominato le classi .pi1 (posizione in crescita di 1) o .pd1 (posizione in decrescita 1). Osservando il CSS noterete che il gruppo .pi ha dei valori negativi per top (l'immagine sprite viene spostata in alto), mentre il gruppo .pd ha valori positivi sempre per top (l'immagine viene spostata in basso).
I movimenti delle linee vengono definiti con nomi di classe come .i1 o d1. Per esempio, la classe i24 aumenta il valore di 24 punti.
Scegliere una posizione appropriata (la classe .p) è semplice: dovete guardare all'item precedente. La situazione può essere di questo tipo:
<dd><span class="pi1 i10"><em>33</em></span></dd>
Abbiamo pi1 e i10. Significa che abbiamo un item che inizia al punto 1 ed è incrementato di 10 punti. Ciò fa sì che il nostro prossimo punto di partenza sia 11. Se il nostro movimento successivo è in crescita sceglieremo .pi11, se decresce sceglieremo .pd11.
Se sembra complicato, ricordate che quando scegliete entrambi i nomi di classe non dovete mescolare i e d.
Questo va bene:
<dd><span class="pi1 i10"><em>33</em></span></dd>
Questo no:
<dd><span class="pi1 d10"><em>33</em></span></dd>
Ora fatemi spiegare cosa avviene con gli elementi em. Gli item sono posizionati uno accanto all'altro senza sovrapposizioni, in modo tale che le linee di connessione siano perfette e ben definite. Uso gli em per piazzare dei puntini grafici sui punti di connessione. Gli em sono posizionati assolutamente per coprire la linea di connessione precedente. C'è una definizione CSS di default per gli em, sebbene gli item in decrescita abbiano bisogno di un nome di classe supplementare (.d). Ecco perché ho detto che alcuni elementi span hanno tre nomi di classe. Un item in decrescita presenta questo markup:
<dd><span class="pd10 d d1"><em>46</em></span></dd>
Notate che i nomi di classe sono scritti in "punti" o "step", non in base ai valori reali. Nel mio caso ogni "punto" rappresenta una percentuale del 3,3%.
Finito. Come ho detto, la tecnica non intende in alcun modo sostituire tecniche Javascript e Flash. Questo metodo ha delle limitazioni, ma è fatto con i soli CSS!
