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.