Hvordan lage en CSS Chart

Hvordan lage en CSS Chart


Det er lett å lage en data diagram i et elektronisk regneark, men hvordan kan disse dataene bli vist på samme måte på en nettside? Ved hjelp av HTML og CSS, alle kan gjennomføre enkle to-dimensjonale diagrammer og grafer i sin egen personlige online plass. Mens mulighetene for å gjøre denne typen data tabellen er åpent, forblir hovedstrukturen det samme med utbygger, velge ting som størrelse, farger og omkringliggende funksjoner.

Bruksanvisning

1 Åpne opp en ny HTML og CSS-fil (eller et eksisterende sett hvis tilgjengelig) i kode editor av ditt valg.

2 Lag en definisjon liste, tittel og beskrivelse sett koder i HTML-filen. Du kan gjøre dette ved å ta med følgende kode:

<Dl> <dt> Data Bar navn </ dt> <dd> data </ ​​dd> </ dl>.

3 Lag en "span" og "dem" tag innenfor definisjonen beskrivelse koder. For eksempel:

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

4 Åpne din CSS-stilark og legge til følgende stiler som generelle retningslinjer:

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

5 Legg til flere stiler til definisjonen beskrivelse koden til å forme dataene grafen barer. For eksempel:

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

hvor bredde og høyde størrelse attributter er valgt av nettstedet utvikler.

6 Legg stiler til de span og em elementer. For eksempel:

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

7 Legg dimensjonering attributt stiler 1-100 til definisjon beskrivelse koder. For eksempel:

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

Gjør dette til 100. Dette gjør det mulig å sette inn størrelse fra 1 til 100 prosent inn i HD beskrivelse koder for å vise størrelsen på datalinjen du ønsker å vise.

8 Gjenta definisjonen tittel og beskrivelse koder i HTML-filen for så mange datalinjer du ønsker i diagrammet. Du bør ha en effektiv CSS diagram rammeverk som kan endres lett å passe dine behov.