Come fare un grafico CSS

January 3

Come fare un grafico CSS


E 'facile fare un grafico di dati in un foglio di calcolo elettronico, ma come può essere dimostrato i dati nello stesso modo su un sito web? Utilizzando HTML e CSS, chiunque può implementare semplici grafici bidimensionali e grafici nel proprio spazio personale online. Mentre le possibilità di fare questo tipo di tabella di dati sono a tempo indeterminato, la struttura principale rimane la stessa con lo sviluppatore, scegliendo le cose come le dimensioni, i colori e le caratteristiche circostanti.

istruzione

1 Aprire un nuovo file HTML e CSS (o un set esistente, se disponibile) nell'editor di codice di vostra scelta.

2 Creare un elenco di definizioni, titolo e descrizione set di tag nel file HTML. È possibile farlo inserendo il seguente codice:

<Dl> <dt> Dati Bar Nome </ dt> <dd> Dati </ dd> </ dl>.

3 Creare un "arco" e tag "em" entro la descrizione della definizione tag. Per esempio:

<Dd> <span class = "p1"> <em> 1 </ em> </ span> </ dd>.

4 Aprire il foglio di stile CSS e aggiungere i seguenti stili come linee guida generali:

dl, dl dt, dd dl {margin: 0; padding: 0;} dl dt {display: none;}.

5 Aggiungere più stili al tag descrizione della definizione di plasmare le barre del grafico dei dati. Per esempio:

dl dd {position: relative; float: left; display: inline; width: 20px; height: 100px;}

dove gli attributi dimensioni di larghezza e altezza sono scelti dallo sviluppatore sito web.

6 Aggiungere stili per gli elementi span e em. Per esempio:

dl arco {position: absolute; display: block; width: 20px;} dl arco em {display: block; float: left; line-height: 200%; position: absolute; top: 50%; text-align: center; }.

7 Aggiungere stili di attributi di dimensionamento da 1 a 100 per la descrizione della definizione tag. Per esempio:

span.p0 dl {height: 0%;} dl span.p1 {height: 1%;}

Fate questo fino a 100. Questo permette di inserire il formato da 1 a 100 per cento nella vostra descrizione della definizione tag per visualizzare la dimensione della barra dei dati che si desidera visualizzare.

8 Ripetere il titolo definizione e la descrizione tag nel file HTML per il maggior numero di barre dei dati che desiderate nel grafico. Si dovrebbe avere un quadro grafico CSS efficace che può essere modificato facilmente per soddisfare le vostre esigenze.