Datenvisualisierung mit CSS-Grafiken, Diagrammen und mehr

Eine gute Datenpräsentation ist ein wichtiger Aspekt in der Webbranche, denn sie ist der Schlüssel, mit dem Besucher Ihre Inhalte innerhalb von Sekunden verstehen können. Je einfacher oder schneller Ihre Besucher Ihre Webinhalte verstehen, desto höher ist Ihre Professionalität im Umgang mit der Präsentation. Die Kriterien für eine anständige Datendarstellung sollten einfach und dennoch deskriptiv sein, gut durchdacht sein, aber es gelingen, das Interesse eines Benutzers aufrechtzuerhalten, den Inhalt nicht zu verdauen, den Vergleich bequem zu gestalten, und schließlich sollte der Benutzer in der Lage sein, Entscheidungen zu treffen oder die vorgelegten Daten mühelos zu treffen. So hart diese verrückten Kriterien auch klingen mögen, es ist möglich.

In der heutigen Post möchten wir Sie mitnehmen für verschiedene Ansätze zu schönem und kreative Datenvisualisierungstools, die vollständig auf CSS / HTML basieren. Ja einfach kopieren und einfügen und nach Belieben anpassen. Diese Diagramme können CSS-Balkendiagramme sein, die Daten in horizontaler / vertikaler Form anzeigen, Dropdown-Listen für Ihre Organisationsdaten oder auch Liniendiagramme und Kreisdiagramme!

Lust auf mehr? Scroll weiter!

Horizontales Barchart

Eine einfache Möglichkeit, die statistische Zahl mit diesem zugänglichen Balkendiagramm als Übersicht mit CSS anzuzeigen. Der Balken berechnet die verwendeten Wertezellen und Beschriftungen. Die Tabellenüberschriften, die mit Hilfe der Klartextklasse verwendet werden

CSSplay

Balkendiagramme sind eine definitive Liste mit in jeder Zeile definierten Stilen und Klassen. Das erste Diagramm hat einen Fehler, der auftritt, wenn sich die Werte 100% nähern, was im zweiten Diagramm korrigiert wird. Quellcode als Referenz.

Prozentsatz Bargraph

Mithilfe der prozentualen Breitenfunktionen von CSS wird in diesem Lernprogramm ein prozentualer Balkendiagramm erstellt. In einem horizontalen Balkendiagramm können Sie entweder einen Marker setzen, um die Länge von links nach rechts zu verschieben, oder einen vertikalen Graphen erstellen, indem Sie dieselbe Technik verwenden und ihn mehrmals reproduzieren

Maxdesign

Russ Weakley lehrt Sie, ein Diagramm basierend auf dem Prozentsatz und mit Hintergrundbildern zu erstellen. Code und Bilder können kopiert und heruntergeladen werden, um sie in Ihrem Projekt zu verwenden.

Vertikales Balkendiagramm

Erstellen Sie vertikale Balkendiagramme mit CSS und PHP, indem Sie eine einfache Liste mit der Höhe der einzelnen Balken, der y-Achse der Balkengruppe und der Klasse in Pixel erstellen, um die Datensätze zu formatieren. Eric Meyer lehrt Sie, dasselbe mit Hilfe derselben Techniken in ein Balkendiagramm, ein Liniendiagramm, ein Spitzendiagramm und ein 3D-Diagramm umzuwandeln

Reine CSS-Liniengrafik

Liniendiagramme liefern Informationen viel schneller als Tabellen mit Zahlen. Lernen Sie, ein Liniendiagramm mit CSS unter Verwendung von HTML zu erstellen, ersetzen Sie den Text durch Bilder und verwenden Sie CSS-Sprites und absolute Positionierung, um ein Liniendiagramm zu erhalten.

Einfaches Linegraph

Ein sehr einfaches Liniendiagramm, das nur DHTML und CSS verwendet und einen transparenten Hintergrund für das Diagramm festlegen kann. Diese Grafik wird schneller geladen und wird mit dem Rest der Seite gemischt.

Mgraph

Dieser Ajax-Graph wird verwendet, um die Daten eines Jahres monatlich nur mit CSS und XHTML darzustellen und wird in Firefox und Opera ausgeführt

Mehrspaltenlisten

Paul Novitski lehrt Sie in diesem Artikel, eine mehrspaltige Liste mit CSS zu erstellen. Er bespricht viele Techniken, um mehrere Spaltenlisten zu erstellen, beispielsweise das Aufteilen der Split-Listen, das Einfügen von HTML-Attributen, das Generieren von CSS-Inhalten, das Umschließen der Liste mit XHTML, CSS usw., und schließlich wird ein wenig Stil und Hintergrundbild hinzugefügt, um die Mehrfachspalte zu erreichen Liste perfekt.

Bulletgraph

Ein Aufzählungsdiagramm vergleicht eine einzelne Kennzahl mit einer oder mehreren anderen Kennzahlen und zeigt den qualitativen Leistungsbereich an. Sie sind für datengesteuerte Sites recht flexibel. Erfahren Sie, wie Sie ein Aufzählungsdiagramm mit CSS / HTML erstellen.

Säulen-Balkendiagramm

Ein Spaltenbalkendiagramm wird mit CSS erstellt, wobei die Werte in farbigen vertikalen Balken angezeigt werden, die je nach den angegebenen Werten verschiedene Höhen erreichen. Diese Grafik gibt uns schnell eine klare Vorstellung, da die Werte hier direkt gedruckt werden. Mit CSS-Selektoren, Sprites, Listen-Stil usw. lernen Sie, wie Sie aus dem Tutorial ein Säulendiagramm erstellen.

Ausfallzeit-Diagramm

Bei der Downtime-Grafik gab es anfangs ein Problem mit der Anzeige langer Zeitintervalle auf einem begrenzten Bildschirmbereich und der transparenten Anordnung von Ereignissen, was durch das monatliche Kalender-Paradigma geklärt wurde. Das onMouseOver () wird weiter ausgeführt, und für verschiedene Arten von Ausfallzeiten werden unterschiedliche Farben verwendet.

Dynamisches Live-CSS-Diagramm

Ein dynamisches Live-CSS-Diagramm zur Anzeige der Antwortzeit eines Pings, das von einem Webserver ausgeführt wird, liest die Daten von einem Webserver mit CSS- und JavaScript-Code, AJAX-Funktionen und Diagrammgleiten.

Horizontale Balkenanzeige

Ein Balkendiagramm muss nicht immer vertikal sein. Es kann auch ein horizontales Balkendiagramm erstellt werden. In diesem Artikel wird ein horizontales Balkendiagramm mit verschiedenen Farbvariationen erstellt, indem eine Klasse 'horizontales Diagramm' verwendet wird und die Höhe des Diagramms mithilfe von CSS aus dem Markup festgelegt wird.

Multigraph

Ein Liniendiagramm, das keine Bildtabellen verwendet, wird mit CSS und DHTML erstellt, wodurch das Laden schneller erfolgt und der Hintergrund als transparent geändert werden kann.

Produktionsplandiagramm

Ein Produktionsplandiagramm wird erstellt, indem die Diagrammklasse als Diagrammcontainer verwendet wird und hLine auch vLine für das Zeichnen von Trennlinien. Dieses Diagramm wird in Intranetanwendungen verwendet. Die Breite des Diagramms wird anhand der angezeigten Anzahl von Tagen und der Höhe anhand der Anzahl der Auftragsänderungen berechnet.

Sandwich-Diagramm

Ein Sandwich-Diagramm wird erstellt, wenn ein einzelner Balken in einem Balkendiagramm in vielen Ebenen aufgeteilt wird, wobei die Höhe einer einzelnen Spalte einen globalen Trend anzeigen kann, während die Höhe einer einzelnen Ebene einen Teil dieser Ebene anzeigt. Erstellen Sie ein CSS-Sandwich-Diagramm aus diesem Tutorial.

Gestapelte Balkenanzeige

Bei einem gestapelten Diagramm wird eine Definitionsliste zum Darstellen von Daten verwendet. Anschließend werden die Ränder und die Auffüllung zurückgesetzt, um in allen Browsern gleich zu sein. Achsen werden hinzugefügt und stilisiert, um die gestapelten Balken zu erhalten. In diesem Tutorial wird jedes Detail genau unterrichtet.

Einfache Bargraph

Ein Balkendiagramm, das mit CSS und PHP erstellt wurde, ohne dass eine große Grafikbibliothek verwendet werden muss, und dass keine großen Berechnungen für die Ränder verwendet wurden. Die Polsterung macht es leicht, die Technik zu verstehen, die nur verwendet wurde