Wenn man mal nach Balkendiagramm googlet findet man hauptsächlich so nette Tuts die auf imagecreate() bauen oder JavaScript-Lösungen.
Geht aber auch ohne Grafiken oder JavaScript und is ganz einfach mit ein bisschen CSS und PHP.
CSS: Hintergrund des Balkens
Code
.diahg
{
width:20em; /* Gesamtbreite des Balkens */
height:1em; /* Gesamthöhe des Balkens */
background-color:#999999; /* Hintergrund des Balkens */
}CSS: Vordergrund des Balkens
Code
.diavg
{
height:100%; /* An Hintergrund anpassen */
/* Schrift im Vordergrund-Balken */
font-size:0.8em;
font-weight:bold;
text-align:right;
}Die Breite und die Farbe des Vordergrunds werden im style-Attribut mit PHP festgelegt.
PHP
<div class="diahg">
<?php echo'<div class="diavg" style="width:'.$width.'%; background-color:#'.$color.';">'.$width.'%</div>'; ?>
</div>Beispiel:
PHP
<?php
// Werte aus einer Datenbank oder woher auch immer
$width = '40';
$color = 'ffaa00';
?>Ergebnis:
[Blockierte Grafik: http://i35.tinypic.com/2jdozty.png]
Gruss, Donkey
