Datavisualisatie met CSS-grafieken, grafieken en meer

Een goede gegevenspresentatie is een belangrijk aspect in de webbranche, omdat het de sleutel is om bezoekers binnen enkele seconden uw inhoud te laten begrijpen. Hoe gemakkelijker of sneller uw bezoekers uw webinhoud te begrijpen krijgen, hoe beter uw professionaliteit bij het omgaan met de presentatie wordt weerspiegeld. Criteria voor een fatsoenlijke gegevenspresentatie moeten eenvoudig maar beschrijvend zijn, goed uitgewerkt, maar het belang van de gebruiker behouden, geen moeite doen om de inhoud te verteren, gemakkelijk te vergelijken en tot slot moet de gebruiker in staat zijn om beslissingen te nemen of de gepresenteerde gegevens moeiteloos te concluderen. Hoe hard deze krankzinnige criteria ook klinken, het is mogelijk.

In de post van vandaag willen we je een ritje wagen voor verschillende benaderingen van mooi en creatieve data visualisatie tools die volledig gebaseerd zijn op CSS / HTML. Ja kopieer en plak en pas het vervolgens aan volgens uw voorkeur. Deze diagrammen kunnen CSS-staafdiagrammen zijn die gegevens weergeven in horizontale / verticale vorm, vervolgkeuzelijst voor uw organisatiegegevens of zelfs lijngrafieken en cirkeldiagrammen!

Wil je meer? Blijf scrollen!

Horizontale barchart

Een eenvoudige manier om de statistische figuur weer te geven als een overzicht met dit toegankelijke staafdiagram met behulp van CSS. De balk berekent waardecellen en gebruikte labels. De tabelkoppen gebruiken de klasse van de auditieve tekst

CSSplay

Staafdiagrammen zijn een definitieve lijst met stijlen en klassen die in elke regel zijn gedefinieerd. De eerste grafiek heeft een fout die optreedt wanneer de waarden dichter bij 100% komen, wat wordt gecorrigeerd in de tweede grafiek. Broncode opgenomen voor uw referentie.

Percentage staafdiagram

Met behulp van de percentagebreedtemogelijkheden van CSS wordt een op percentage gebaseerde staafgrafiek gemaakt in deze zelfstudie. In een horizontale staafgrafiek kunt u een markering instellen om de lengte van links naar rechts te verplaatsen of een verticale grafiek maken door dezelfde techniek te gebruiken en meerdere keren te reproduceren

Maxdesign

Russ Weakley leert je om een ​​grafiek te maken op basis van percentage en het gebruik van achtergrondafbeeldingen. Gekoppelde code en afbeeldingen kunnen worden gekopieerd en gedownload om te gebruiken in uw project.

Verticale barchart

Maak verticale staafdiagrammen met behulp van CSS en PHP door een eenvoudige lijst te maken met de hoogte in pixels van de afzonderlijke balk, y-as van de staafgroep en klasse om de gegevenssets op te maken. Eric Meyer leert je hetzelfde te veranderen in een staafdiagram, lijngrafiek, puntige grafiek en een 3D-grafiek met dezelfde technieken

Pure CSS Linegraph

Lijngrafieken leveren informatie veel sneller dan tabellen met getallen. Leer hoe u een lijngrafiek maakt met CSS met HTML, vervang de tekst door afbeeldingen en gebruik CSS-sprites en absolute positionering om een ​​lijngrafiek te verkrijgen.

Simple Linegraph

Een veel eenvoudige lijngrafiek die alleen DHTML en CSS gebruikt en waar u een transparante achtergrond voor de grafiek kunt instellen. Deze grafiek wordt sneller geladen en vermengt zich met de rest van de pagina.

MGraph

Deze Ajax-grafiek wordt gebruikt voor het weergeven van gegevens van een jaar volgens elke maand met alleen CSS en XHTML en wordt uitgevoerd in Firefox en Opera

Meertalige lijsten

Paul Novitski leert je een lijst met meerdere kolommen te maken met behulp van CSS in dit artikel. Hij bespreekt heel wat technieken om lijsten met meerdere kolommen te bereiken, zoals zwevende splitslijsten, nummering met HTML-attribuut, CSS-gegenereerde inhoud, inpakken van de lijst met XHTML, CSS enz. En voegt uiteindelijk een beetje styling en achtergrondafbeelding toe om de multi-kolom te bereiken lijst perfect.

Bulletgraph

Een bullet-grafiek vergelijkt een enkele maat met een of meer andere maten en geeft het kwalitatieve bereik van uitvoeringen weer. Ze zijn vrij flexibel voor gegevensgestuurde sites. Leer hoe u een opsommingsteken maakt met behulp van CSS / HTML.

Kolom staafgrafiek

Een kolomgrafiek wordt gemaakt met behulp van CSS, waarbij de waarden worden weergegeven in gekleurde verticale staven die verschillende hoogten bereiken op basis van de opgegeven waarden. Deze grafiek geeft ons snel een duidelijk idee omdat de waarden hier rechtstreeks worden afgedrukt. Met behulp van CSS-selectors, sprites, het opmaken van lijsten, enz., Leert u een kolomgrafiek te maken in de zelfstudie.

Grafiek voor downtime

De downtime-grafiek had aanvankelijk een probleem met lange tijdsintervallen op een beperkt schermoppervlak en een transparante lay-out van gebeurtenissen die werd verduidelijkt door het maandelijkse kalenderparadigma. De onMouseOver () blijft actief en verschillende kleuren worden gebruikt voor verschillende soorten downtime-evenementen.

Dynamische live CSS-grafiek

Een live dynamische CSS-grafiek om de responstijd van ping weer te geven, uitgevoerd door een webserver, leest de gegevens van een webserver met CSS- en JavaScript-code, AJAX-functies en glijdende grafiek.

Horizontale staafgrafiek

Een staafdiagram hoeft niet altijd beverig te zijn. Een horizontale staafdiagram kan ook worden gemaakt. In dit artikel wordt een horizontale staafdiagram met verschillende kleurvariaties gemaakt met behulp van een klasse 'horizontale grafiek' en wordt de hoogte van de grafiek vanaf de markup gespecificeerd met behulp van CSS.

Multigraph

Een lijngrafiek die geen tabellen met afbeeldingen gebruikt, is gemaakt met CSS en DHTML die sneller worden geladen en de achtergrond kan als transparant worden gewijzigd.

Productieplan grafiek

Een productieplangrafiek wordt gemaakt met de grafiekklasse als grafiekcontainer en hLine ook vLine voor tekening van scheidingslijnen. Deze grafiek wordt gebruikt in intranettoepassingen. De breedte van de grafiek wordt berekend op basis van het weergegeven aantal dagen en de hoogte met behulp van het aantal taakwijzigingen.

Sandwich-grafiek

Een sandwichgrafiek wordt gemaakt wanneer een enkele staaf in een staafdiagram veel lagen wordt gesplitst, waarbij de hoogte van een enkele kolom een ​​algemene trend kan aangeven, terwijl de hoogte van een enkele laag een deel van deze laag aangeeft. Maak een CSS-sandwichgrafiek in deze zelfstudie.

Gestapelde staafgrafiek

Voor een gestapelde grafiek wordt een definitielijst gebruikt om gegevens weer te geven, waarna de marges en opvulling worden gereset om in alle browsers hetzelfde te zijn. Assen worden toegevoegd en gestileerd om de gestapelde staven te krijgen. Elk detail wordt precies beschreven in deze tutorial.

Eenvoudige staafgrafiek

Een staafdiagram gemaakt met behulp van CSS en PHP zonder grafische bibliotheek en zonder veel berekeningen voor marges. Opvulling waardoor het vrij eenvoudig is de techniek te begrijpen die alleen werd gebruikt