Datavisualisering med CSS-grafer, diagrammer og mer

En god datapresentasjon er et viktig aspekt i nettbransjen fordi det er nøkkelen til å la besøkende forstå innholdet ditt innen få sekunder. Jo lettere eller raskere de besøkende får tak i ditt webinnhold, desto høyere reflekterer du profesjonaliteten i håndtering av presentasjon. Kriterier for en anstendig datapresentasjon bør være enkle, men likevel beskrivende, godt utarbeidet, men klarer å opprettholde en brukers interesse, tar ingen svette for å fordøye innholdet, praktisk å sammenligne og til slutt bør brukeren kunne ta avgjørelser eller konkludere dataene som presenteres uten problemer. Så vanskelig som disse vanvittige kriteriene kan høres, er det mulig.

I dagens innlegg ønsker vi å ta en tur for ulike tilnærminger til vakre og kreative data visualisering verktøy som er helt base på CSS / HTML. Ja Bare kopier og lim inn så tilpass det etter dine preferanser. Disse diagrammene kan være CSS-bardiagrammer som viser data i horisontal / vertikal form, rullegardinliste for å organisere data eller til og med Linjediagrammer og Diagrammer!

Du vil ha mer? Fortsett å rulle!

Horisontal Barchart

En enkel måte å vise den statistiske figuren på som en oversikt med dette tilgjengelige linjediagrammet ved hjelp av CSS. Baren beregner verdiseller og etiketter som brukes. Tabelloverskriftene brukes ved hjelp av lydtekstklasse

CSSplay

Bardiagrammer er en endelig liste med stiler og klasser definert i hver linje. Det første diagrammet har en feil som oppstår når verdiene kommer nærmere 100% som korrigeres i det andre diagrammet. Kildekoden er inkludert for din referanse.

Prosentandel Bargraph

Ved hjelp av prosentvis breddeevner i CSS, opprettes en prosentbasert bargraf i denne opplæringen. I et horisontalt bardiagram kan du enten sette en markør for å reise lengden fra venstre til høyre eller lage en vertikal graf ved å bruke samme teknikk og gjengi det flere ganger

Maxdesign

Russ Weakley lærer deg å lage en graf basert på prosentandel og bruk av bakgrunnsbilder. Kode og bilder koblet kan kopieres og lastes ned for bruk i prosjektet.

Vertikal barchart

Lag vertikale bardiagrammer ved hjelp av CSS og PHP ved å lage en enkel liste med høyde i piksler av individuell bar, y-akse i baregruppen og klassen for å stilte datasettene. Eric Meyer lærer deg å slå det samme inn i et bardiagram, linjediagram, spissgraf og en 3D-graf med samme teknikker

Ren CSS Linegraph

Linjediagrammer gir informasjon mye raskere enn tabeller med tall. Lær å lage en linjediagram med CSS ved hjelp av HTML, erstatt teksten med bilder og bruk CSS sprites og absolutt posisjonering for å få en linjediagram.

Enkel Linegraph

En veldig enkel linjediagram som bare bruker DHTML og CSS og hvor du kan sette en gjennomsiktig bakgrunn for grafen. Denne grafen lastes raskere og blandes med resten av siden.

Mgraph

Denne Ajax-grafen brukes til å representere data om et år i henhold til hver måned, ved hjelp av bare CSS og XHTML og kjører i Firefox og Opera

Multikolumnlister

Paul Novitski lærer deg å lage en multi-kolonneliste ved hjelp av CSS i denne artikkelen. Han diskuterer mange teknikker for å oppnå en multikolonneliste som å flytte delelistene, nummerere dem med HTML-attributt, CSS-generert innhold, pakke inn listen med XHTML, CSS osv. Og til slutt legger til en liten styling og bakgrunnsbilde for å oppnå multikolonnen liste perfekt.

Bulletgraph

En punktdiagram sammenligner et enkelt mål med en eller flere andre tiltak og viser det kvalitative spekteret av forestillinger. De er ganske fleksible for data-drevne nettsteder. Lær å lage en punktgraf ved hjelp av CSS / HTML.

Kolonne bargraph

En kolonnefeltdiagram opprettes ved hjelp av CSS der verdiene vises i fargede vertikale stenger som når ulike høyder i henhold til de angitte verdiene. Denne grafen gir oss raskt en klar ide, fordi verdiene er trykt direkte her. Ved hjelp av CSS-valgmuligheter, sprites, styling av lister etc, lærer du å lage en kolonnediagram fra opplæringen.

Nedetidskurve

Nedetidskurve opprinnelig hadde et problem som viste lange tidsintervaller på begrenset skjermområde og holdt gjennomsiktig layout av hendelser som ble klargjort av det månedlige kalenderparadigmet. OnMouseOver () fortsetter å løpe og forskjellige farger brukes til ulike typer nedetidshendelser.

Dynamisk live CSS-graf

En levende dynamisk CSS-graf for å vise responstidspunktet for ping utført av en webserver leser dataene fra en webserver med CSS og JavaScript-kode, AJAX-funksjoner og grafglidning.

Horisontal bargraph

En linjediagram trenger ikke alltid å være bevertisk. En horisontal strekkdiagram kan også opprettes. I denne artikkelen opprettes en horisontal strekkediagram med forskjellige fargevarianter ved hjelp av en klasses horisontal graf, og angir gradenes høyde fra markeringen ved hjelp av CSS.

Multigraph

En linjediagram som ikke bruker noen tabeller med bilder, er opprettet med CSS og DHTML som lastes raskere og bakgrunnen kan endres som gjennomsiktig.

Produksjonsplan graf

En produksjonsplangraf blir opprettet ved hjelp av grafklassen som grafbeholder og hLine også vLine for separatorlinjetegning. Denne grafen brukes i intranettprogrammer. Gradenes bredde beregnes i henhold til det viste antall dager og høyde ved hjelp av antall jobbendringer.

Sandwich graf

En sandwichgraf blir opprettet når en enkelt linje i en bardiagram splittes mange lag hvor høyden på en enkelt kolonne kan indikere en global trend, mens høyden på et enkeltlag indikerer en del av dette laget. Lag en CSS-sandwichgrafikk fra denne opplæringen.

Stacked bargraph

For en stablet graf brukes en definisjonsliste til å presentere data, så marginer og polstring tilbakestilles for å vises det samme i alle nettlesere. Aksene blir lagt til og stilisert for å få de stablede stengene. Hver eneste detalj blir nettopp lært i denne opplæringen.

Enkel bargraph

Et linjediagram opprettet ved hjelp av CSS og PHP sans grafikkbibliotek og uten mye beregninger brukt for marginer. Padding gjør det ganske enkelt å forstå teknikken som bare brukes