Anzeige
Smartes Cloud Hosting für anspruchsvolle Projekte.
↬ Loslegen und Spaces testen ↬ Jetzt testen!
Rainer Weber 11. März 2009

CSS: Dynamische Kuchen

Zur Darstellung von Anteilen oder Verteilungen werden – besonders in der Betriebs- und Volkswirtschaft – gerne Kreisdiagramme verwendet. Normalerweise stellen die auch Torten- oder Kuchendiagramme genannten Grafiken immer 100% eines Ganzen dar. Doch auch um einen prozentualen Anteil visuell zu unterstützen, kann man solche Diagramme einsetzen. Das klappt mit CSS und einem winzigen Grafik-Anteil.

Anzeige

Die Vorbereitung

Um das Beispiel-Diagramm zu erstellen, benötigen wir nur ein wenig CSS und eine kleine Grafik. Nur eine Grafik? Ja, denn wir stellen alle Wertanteile in einer einzigen Grafik dar. Diese Grafik setzen wir dann per CSS als Hintergrund ein. Allerdings wird immer nur der Teil der Grafik sichtbar sein, welcher auch der Prozentangabe entspricht.

Da es für das menschliche Auge relativ schwer ist, eine Fläche einzuschätzen und auch kein zweiter Wert zum Vergleich vorhanden ist, müssen wir nicht für jeden Wert zwischen 1 und 100 einen grafischen Abschnitt definieren. Eine Grafik mit 20 Eckwerten sollte deshalb genügen.

Die grafische Seite

In einer Bildbearbeitung wie etwa Photoshop kommt man in wenigen Schritten zum Ziel. Man erstellt eine neue Ebene über »Ebene ↔ Neu ↔ Ebene« oder über den Button »Neue Ebene erstellen« in der Ebenenpalette. Mit dem Auswahlellipse-Werkzeug zieht man eine kreisförmige Auswahl auf (dabei einfach die Shift-Taste gedrückt halten), die über &187;Bearbeiten ↔ Fläche füllen« zum Beispiel mit der Farbe #e4e4e4 (RGB 228, 228, 228) gefüllt wird.

Nachdem die Auswahl über Strg+D aufgehoben wurde, füllt man eine weitere Ebene mit einer beliebigen Farbe. Hier war das die Farbe #aa3366 (RGB 170, 51, 102). Ein Klick auf »Ebene ↔ Schnittmaske erstellen« sorgt dafür, dass die Inhalte der Ebene nur da sichtbar sind, wo auf der darunter liegenden Ebene Pixel stehen.

Mit dem Polygon-Lasso-Werkzeug wählt man nun passend zur gewünschten Prozentangabe von der Kreismitte aus den Bereich aus, der nicht zu diesen Prozenten gehört und drückt die Entf-Taste, um die Selektion zu löschen. Es wird die graue Kreisebene sichtbar. So können nach und nach die nötigen Werte gestaltet und dann in einer Grafik aufgereiht etwa als PNG abgespeichert werden.

HTML und CSS

Zunächst legen wir einen DIV-Container an, der unsere eigentliche kleine Schautafel beinhaltet und mit dessen Hilfe wir das Diagramm flexibel links oder rechts positionieren und die Abstände zu umgebenden Elementen regeln können.

HTML
<div class="wrapper">

</div>

CSS
.wrapper {
	float: left;
	margin: 0px 10px 0px 0px;
}

Als nächstes wird das Block-Element für einen Schatten angelegt. Was es hier mit der Eigenschaft margin auf sich hat, erkläre ich gleich.

HTML
<div class="wrapper">
    <div class="schatten">

    </div>
</div>

CSS
.schatten {
    float: left;
    margin: 3px 0px 0px 3px;
    background-color: #CCC;
}

Ein weiterer Container mit der Klasse .beispiel umgibt die Grafik und die Prozentangabe. Die top- bzw. left-Werte dieser Klasse sind abhängig von den margin-Werten der Klasse .schatten. Beide steuern Position und Abstand des Schattens. Die Werte der Positionsangaben der Klasse .beispiel liegen im Negativbereich und sind nötig, damit man das Schatten-Div überhaupt sehen kann.

Damit die Schautafel aber nicht aus dem Layout hinaus driftet, muss die Eigenschaft margin der Klasse .schatten einen Ausgleich schaffen. Ändert man einfach einmal die top- bzw. left-Werte auf -100px, dann wird klar, was ich meine. Wenn also Werte geändert werden sollen, muss man sie in beiden Klassen entsprechend anpassen.

HTML
<div class="wrapper">
    <div class="schatten">
        <div class="beispiel">

        </div>
    </div>
</div>

CSS
.beispiel {
    float: left;
    position: relative;
    top: -3px;
    left: -3px;
    padding: 15px;
    background-color: #FFF;
    border: 1px solid #777;
}

Jetzt wird noch die Grafik und die Prozentangabe eingebaut. In der Klasse .diagramm befindet sich nun unsere bereits besprochene Hintergrundgrafik. Höhe und Breite des Containers sollten den Maßen der Grafik angepasst sein. In der Klasse .prozent-angabe lässt sich der Abstand der Prozentangabe nach oben bzw. zur Grafik steuern.

HTML
<div class="wrapper">
    <div class="schatten">
        <div class="beispiel">
         <div class="diagramm"></div>
         <p class="prozent-angabe">%</p>
        </div>
    </div>
</div>

CSS
.diagramm {
    float: left;
    width: 25px;
    height: 25px;
    background-image: url('slices.gif');
}

.prozent-angabe {
    float: right;
    font-size: 12pt;
    font-weight: bold;
    color: #ff0000;
	margin: 5px 0px 0px 5px;
}

So weit, so gut. Doch noch fehlt etwas, denn egal, welchen Wert man nun einträgt, an der Grafik ändert sich nichts. Noch nicht. In der Klasse haben wir bisher lediglich die Hintergrundgrafik festgelegt. Also fügen wir nun für jeden Grafikabschnitt eine eigene Klasse dazu, so das wir das Diagramm unserer Prozentangabe visuell angleichen können.

Das Diagramm hat die Ausmaße von etwa 25 x 25 Pixel. Demnach muss die linke Position des Grafikabschnitts immer um ein Vielfaches von 25 oder eben um 25 selbst nach links – das heißt in den Minusbereich – verschoben werden.

HTML
<div class="wrapper">
    <div class="schatten">
        <div class="beispiel">
         <div class="diagramm prozent-25"></div>
         <p class="prozent-angabe">27%</p>
        </div>
    </div>
</div>

CSS
.prozent-10 {background-position: -25px 0px;}
.prozent-15 {background-position: -50px 0px;}
.prozent-20 {background-position: -75px 0px;}
.prozent-25 {background-position: -100px 0px;}
.prozent-30 {background-position: -125px 0px;}
.prozent-35 {background-position: -150px 0px;}
.prozent-40 {background-position: -175px 0px;}
.prozent-45 {background-position: -200px 0px;}
.prozent-50 {background-position: -225px 0px;}
.prozent-55 {background-position: -250px 0px;}
usw.

Nun kann dem Block-Element, dem wir bereits die Klasse .diagramm zugewiesen haben noch eine weitere Klasse zugefügt werden. Wenn die Positionsangaben richtig gemacht wurden, sollte ein Grafikausschnitt, welcher der Prozentangabe entspricht, zu sehen sein.

8 Kommentare

  1. Sehr schön gemacht, ist auf jeden Fall interessant wenn man für visualisierte Daten keine riesengroßen Libraries (AWstats etc. pp.) laden will/kann… ;)
    So hat man das ganze sehr leichtgewichtig umgesetzt

  2. Schöne Idee, ich finde es auch immer gut, wenn man Dinge selber machen kann. Für komplexe vektorgraphiken empfiehlt sich ja Scalable Vector Graphics. CSS und SVG sollten intensiver und als Alternative zu JavaScript oder Flash eingesetzt werden.

  3. Nun ja, Ihr könnt ja auch 100 Abstufungen machen :) Aber bei diesem Artikel fiel mir wieder auf, wie schade es ist, daß man Objekte nicht drehen kann.

  4. Also ich finde den Beitrag sehr gelungen und ein schönes Beispiel für die Möglichkeiten von CSS. Eine API dafür einzusetzen ist vielleicht schneller, es selbst zu machen aber reizvoller :)

  5. Ob da ned das Google Chart Api einfacher einzusetzen ist ;-)
    http://chart.apis.google.com/

  6. An sich eine nette Idee. Ich denke aber auch, daß eine 5er-Einteilung zu grob ist.

    Besonders, bei Flächen, von denen das Auge eine ganz konkrete Vorstellung hat, welche Prozentangaben dazugehören – z.B. 25%, 50% und 75%.

    Sieht doch etwas komisch aus, wenn da ein exakter Halbkreis aufgemalt ist, und daneben etwas von 48% oder 52% steht…

    Gruss,
    Björn

  7. lol…. BWL und Diagramme in Fünferschritten. Das ist mal wieder Wasser auf die Mühlen der Leute, die Vorurteile gegenüber BWLern haben. ;-)

  8. Naja, so dolle ist das nicht. 5er-Schritte, nur eine Farbe. Ihr hättet noch erklären können, wie man mehrere davon übereinander legt oder sowas.
    Sonst sind eure Artikel aber immer toll!

    Grüße Patrick

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.