Sura 1 Artworks

Acrylmalerei, Mischtechniken, Webdesign

Super simple CSS bars – Diagramme mit CSS erstellen

Posted by sura1 - 15. November 2008

15nov
Bookmark and Share

Super simple CSS bars – einfache Diagramme mit CSS erstellen

super-simple-css-bars_1226780360754

Manchmal benötigt man verschiedenartige Diagramme für die Darstellung bestimmter Statistiken. Meistens macht man dazu mit irgendeinem Programm ein Bild, das man dann im Web veröffentlicht. Ändern sich diese Daten, muss man aber natürlich wieder zuerst das Bild neu abspeichern und neu veröffentlichen – ein Vorgang der oft sehr mühsam sein kann. Um auf das Bild verzichten zu können, gibt es diverse CSS Techniken mit denen man auch relativ einfach wunderbare Diagramme erstellen kann, die dann einfacher zu warten sind.

Ich möchte Ihnen hier an Hand eines Beispiele zeigen, wie Sie mit dem Einsatz von ein wenig CSS sehr rasch relativ einfache, aber durchaus schöne CSS-Diagramme erstellen kann.

Mein fertiges Beispiel sieht wie folgt aus:

super-simple-css-bars_1226781017573
demo_ausfuhren

Erklärung des Beispieles:

Html-Beispiel für ein Diagramm-Feld (200px 40% orange):

<fieldset>
  <legend>200px 40% orange</legend>
  <div class="progress-container" style="width: 200px">
    <div style="width: 40%; background: orange;"></div> = leere Box
  </div>
  <br/>
</fieldset>

Im Quellcode wird das HTML-Element fieldset, welches eigentlich in Formularen eingesetzt wird, zu Hilfe genommen. In diesem wird durch das HTML-Element legend die Diagramm-Überschrift festgelegt. Danach erfolgt die Festlegung von 2 div-Boxen.

Die div-Box div.progress-container wird mit Hilfe von CSS formatiert, bekommt jedoch auch einen Inline-Style, mit welchem die Gesamt-Breite/Länge des Diagrammes festgelegt werden soll.

In diese div-Box (div.progress-container) wird nun eine leere div-Box eingefügt. In dieser legen Sie mit einem Inline-Stylesheet den Prozentsatz des Diagrammes fest, welches Sie farbig darstellen möchten. Mit der Festlegung der Hintergrundfarbe können Sie hier die Farbe des Diagrammes (%-Anteil) festlegen.

Cascading Style Sheets:

div.progress-container {
  border: 1px solid #ccc;
  margin: 2px 5px 2px 0;
  padding: 1px;
  float: left;
  background: white;
}

div.progress-container > div {
  background-color: #ACE97C;
  height: 12px
}

Im CSS legen Sie mit der CSS-Klasse div.progress-container die äußere Form des Diagrammes fest.

Mit der CSS-Regel div.progress-container > div definieren Sie danach die leere div-Box. Mit der Festlegung der Hintergrundfarbe geben Sie dem Diagramm (%) erst das gewünschte Aussehen. Sie können die Hintergrundfarbe aber auch als Inline-Style bereits im HTML-Element definieren (siehe Erklärung zu HTML-Quellcode!)

Fertiges Beispiel hier ansehen:

demo_ausfuhren
Beispiel erstellt auf Basis eines Artikels von blog.leetsoft.com.

Schreibe einen Kommentar

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s

 
%d Bloggern gefällt das: