Themabewertung:
  • 0 Bewertung(en) - 0 im Durchschnitt
  • 1
  • 2
  • 3
  • 4
  • 5
Balken-Diagramme per CSS
#1
Balken-Diagramme per CSS

Ab und an wird nach der Möglichkeit gefragt, Balkendiagramme oder Fortschrittsbalken per CSS darzustellen.
Hier meine Tutorial dazu. Ich hoffe dies ist hilfreich.

Der Anwendungsbereich ist vielfältig und reicht von der Anzeige eines einzelnen Fortschrittsbalkens bis hin zu Balkendiagrammen um dem User eine visuelle Darstellung von Daten und Statistiken zugeben.

Der Grundaufbau in reinem HTML:
Für den Aufbau benutze ich zwei ineinander geschachtelte Container (div's).

Code:
<div class="barhoriz">
 <div class="hprogress barblue" style="width:65%;">65%</div>
</div>

Die maximale Länge des Balkens wird hier über die Klasse .barhoriz gesteuert.
Die Anzeige des eigentlichen Balkens erfolgt übers das innere div mit dem inline Style.

Das inline Style habe ich gewählt, damit die Prozentangabe dynamisch z.B. per php verändert werden kann.
Eine php Umsetzung könnte dann so aussehen. $value ist hier der Prozentwert, den ihr natürlich vorher berechnen müsst.

PHP-Code:
<div class='barhoriz'>
 
 <div class='hprogress barblue' style='width:<?php echo $value."%;'".$value; ?>%</div>
</div> 

Wenn wir jetzt mehrere solcher Div's untereinander stapeln erhält man ein ansehnliches Balkendiagramm.

   

Mit dieser Methode können auch vertikale Balken und verschiedene Varianten erstellt werden.
Beispiel für vertikale Balken:

   

Ich habe für euch hier eine Demoseite zusammengestellt, die folgende Balkenvariationen enthält.
  • Horizontale Fortschrittsbalken in verschiedenen Farben
  • Vertikale Fortschrittsbalken
  • Kurze horizontale Fortschrittsbalken, links und rechts (minus/plus)
  • Kurze horizontale 3D Fortschrittsbalken, links und rechts (minus/plus)
  • Kurzer Fortschrittsbalken
  • 3D Fortschrittsbalken mit verschiedenen Längen
Die verwendeten Klassen findet ihr im zugehörigen Stylesheet (balken.css)

Viel Spaß bei der Umsetzung und/oder Modifikation! Smile
Gruß
His.Master's.Voice
Zitieren
#2
Danke, das war sehr hilfreich Smile
Zitieren


Gehe zu:


Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste