Datavisualisering med CSS-grafer, diagrammer og mere
En god datapræsentation er et vigtigt aspekt i webbranchen, fordi det er nøglen til at lade besøgende forstå dit indhold inden for få sekunder. Jo lettere eller hurtigere dine besøgende får fat i dit webindhold, jo højere afspejler din professionalisme i håndtering af præsentationen. Kriterier for en anstændig datapræsentation bør være enkle, men beskrivende, veludviklede, men klare at opretholde en brugers interesse, tager ikke sved at fordøje indholdet, er praktisk at sammenligne og til sidst bør brugeren kunne træffe beslutninger eller konkludere de fremlagte data ubesværet. Så hårdt som disse vanvittige kriterier kan lyde, er det muligt.
I dagens post ønsker vi at tage din tur for forskellige tilgange til smukke og kreative data visualisering værktøjer, der er helt baseret på CSS / HTML. Ja bare kopiere og indsætte så tilpasse det efter dine præferencer. Disse diagrammer kan være CSS-bjælkediagrammer, som viser data i vandret / lodret form, drop-down liste til din organisere data eller endda linjediagrammer og cirkeldiagrammer!
Du vil have mere? Fortsæt scrollning!
Horisontal Barchart
En simpel måde at vise den statistiske figur som et overblik med dette tilgængelige stregdiagram ved hjælp af CSS. Linjen beregner værdiceller og anvendte etiketter. Tabeloverskrifterne bruges ved hjælp af lydtekstklasse
CSSplay
Stregdiagrammer er en endelig liste med stilarter og klasser defineret i hver linje. Det første diagram har en fejl, der opstår, når værdierne kommer tættere på 100%, som korrigeres i det andet diagram. Kildekode inkluderet til din reference.
Procent Bargraph
Ved hjælp af CSS 'procentvise breddeevner oprettes en procentbaseret stregdiagram i denne vejledning. I en vandret stregdiagram kan du enten indstille en markør for at rejse længden fra venstre mod højre eller producere en lodret graf ved at anvende den samme teknik og reproducere den flere gange
Maxdesign
Russ Weakley lærer dig at lave en graf baseret på procent og ved hjælp af baggrundsbilleder. Kode og billeder linket kan kopieres og downloades til brug i dit projekt.
Lodret barchart
Opret lodrette bjælkediagrammer ved hjælp af CSS og PHP ved at oprette en simpel liste med højde i pixels af den enkelte bjælke, y-akse i baregruppen og klassen for at indstille datasætene. Eric Meyer lærer dig at slå det samme ind i en stregdiagram, linjediagram, spidsgraf og en 3D-graf ved hjælp af samme teknikker
Ren CSS Linegraph
Linjediagrammer leverer information meget hurtigere end tabeller med tal. Lær at lave en linjediagram med CSS ved hjælp af HTML, erstat teksten med billeder og brug CSS sprites og absolut positionering for at få en linjediagram.
Simple Linegraph
En meget enkel linjediagram, der kun bruger DHTML og CSS, og hvor du kan indstille en gennemsigtig baggrund for grafen. Denne graf laster hurtigere og blandes med resten af siden.
Mgraph
Denne Ajax-graf bruges til at repræsentere data om et år i henhold til hver måned, idet der kun bruges CSS og XHTML og kører i Firefox og Opera
Multikolonne lister
Paul Novitski lærer dig at oprette en multikolonne liste ved hjælp af CSS i denne artikel. Han diskuterer mange teknikker for at opnå en liste over flere kolonner som at flyde opdelingslisterne, nummerere dem med HTML-attributter, CSS genereret indhold, indpakning af listen med XHTML, CSS osv. Og til sidst tilføjer en lille styling og baggrundsbillede for at opnå multikolonnen liste perfekt.
Bulletgraph
En kuglegraf sammenligner en enkelt foranstaltning med en eller flere andre foranstaltninger og viser det kvalitative udvalg af forestillinger. De er ret fleksible til data-drevne websteder. Lær at lave en kuglegraf ved hjælp af CSS / HTML.
Kolonne bargraph
En kolonnestangsdiagram oprettes ved hjælp af CSS, hvor værdierne vises i farvede lodrette stænger, der når forskellige højder i henhold til de angivne værdier. Denne graf giver os hurtigt en klar ide, fordi værdierne er direkte printet her. Ved hjælp af CSS-selektorer, sprites, styling af lister osv. Lærer man at oprette en kolonnediagram fra tutorial.
Nedetid graf
Nedetidskurve har oprindeligt haft et problem med at vise lange tidsintervaller på det begrænsede skærmområde og holde gennemsigtige layout af begivenheder, som blev afklaret af det månedlige kalenderparadigme. OnMouseOver () holdes kørende, og forskellige farver bruges til forskellige typer nedetidshændelser.
Dynamisk live CSS-graf
En levende dynamisk CSS-graf for at vise responstidspunktet for ping udført af en webserver læser dataene fra en webserver med CSS og JavaScript-kode, AJAX-funktioner og grafglidning.
Horisontal bargraph
En søjlediagram behøver ikke altid bevertical. En vandret stregdiagram kan også oprettes. I denne artikel oprettes en vandret stregdiagram med forskellige farvevariationer ved hjælp af en klasse 'vandret graf' og angiver graden af graden fra markeringen ved hjælp af CSS.
Multigraph
En linjediagram, der ikke bruger nogen tabeller med billeder, oprettes med CSS og DHTML, som laster hurtigere, og baggrunden kan ændres som gennemsigtig.
Produktionsplan graf
En produktionsplangraf oprettes ved hjælp af grafklassen som grafbeholder og hLine også vLine til separatorlinjetegning. Denne graf bruges i intranet applikationer. Graden af grafen beregnes efter det viste antal dage og højde ved hjælp af antallet af jobændringer.
Sandwich graf
En sandwichgraf oprettes, når en enkelt bjælke i en bardiagram deles mange lag, hvor højden på en enkelt kolonne kan indikere en global trend, mens højden på et enkelt lag angiver en del af dette lag. Opret en CSS sandwich graf fra denne vejledning.
Stacked bargraph
For en stablet graf bruges en definitionsliste til at præsentere data, så marginerne og polstringerne nulstilles for at blive det samme i alle browsere. Akser tilføjes og stiliseres for at få de stablede stænger. Hver eneste detalje er netop undervist i denne vejledning.
Enkel bargraph
En stregdiagram oprettet ved hjælp af CSS og PHP sans grafikbibliotek og uden mange beregninger brugt til margener. Padding gør det ret nemt at forstå den teknik, der kun anvendes
Lodret stregdiagram
En lodret stregdiagram bruges til at vise et hypotetisk sæt data. Her handler bardiagrammet om et simpelt bord og få div'er. Beregningen af bjælkens højde og vandrette lag kan udføres i PHP, ASP eller i server side-behandlingsmotor eller via JavaScripton klientsiden.
Piegraph
Cirkeldiagrammer gør det let at forstå, fordi de kan bruges i mange farver, som nemt adskiller dem med andre og ikke kræver meget plads på samme tid. En vejledning til at oprette et simpelt cirkeldiagram med DHTML / CSS. Indsæt scriptet for cirkeldiagram på din side
Plotkit Piechart
Plotkit er velstruktureret, en omskrivning af CanvasGraph, der bruges til at plotte grafer og diagrammer til Javascript. Den understøtter HTML Canvas, dvs. Safari, Opera, Firefox og IE og SVG via Adobe SVG viewer.
Andre CSS-visualiseringsværktøjer
Visual CSS Maps
Denne vejledning gør kortene mere tilgængelige, nyttige og visuelt attraktive ved hjælp af CSS. Disse kort starter ved at organisere med en data og derefter oprette et kort ved hjælp af disse data ved at tilføje nogle stilarter, vise data som værktøjstip, slukke for java scriptet og endelig oprettes et interaktivt kort.
Animeret Progress bar
En animeret statuslinje oprettes ved hjælp af CSS med 3 elementer, 1 beholder og 2 indlejrede elementer, og animationen gøres ved hjælp af animeret gif. En baggrundsbilde bruges i beholderen med defineret højde og bredde
CSS-tidslinje
Ved hjælp af CSS og uordnede lister kan der oprettes en CSS-tidslinje til 'Om' -afsnittet med simpel markering. En flot udseende tidslinje stylet ved hjælp af CSS er oprettet, som vil fungere, selvom den besøgende ikke har sin CSS aktiveret.
Slickmap
SlickMap CSS er et stilark, der viser de færdige site maps fra den HTML-uordnede liste navigation. Det kan tilpasses til dine egne behov eller stilarter. SlickMap strømlinerer designprocessen og eliminerer behovet for yderligere software ved at automatisere illustrationen af webstedskort
Scrollable CSS Tabel
Der kræves ikke altid en tabel i data. Vi kan oprette et rulbart bord med en fast header og et hvilket som helst antal data, der kan rulles.
Har vi savnet nogle værktøjer, som du fandt nyttige? Lad os vide og dele det med os.
