[linux-l] CSS: Balkendiagramm

Fr Jun 9 14:53:38 CEST 2006

Hallo!

Entschuldigt das OT. Es geht nicht um Linux, aber Open Source und eine 
freie Sprache.
Wenn Ihr so etwas nicht hier lesen wollt, sagt es bitte klar und deutlich.

Michael Kasten schrieb:

> Thomas Schmidt schrieb:
>
>> Hallo!
>>
>> Zur grafischen Aufbereitung von Meßwerten möchte ich ein 
>> Balkendiagramm in CSS darstellen.
>> Es soll wie ein kontinuierliches Signal aussehen, also senkrechte 
>> Balken ohne Platz dazwischen.
>
Deine Tipps habe ich umgesetzt und nun diesen Code:

<style type="text/css">
  body { background-color:#AAF; }
</style>

<body>

<p>Hier unten sehen Sie die FFT der Messwerte:</p>

<div style="background-color:#FFF; float:left">

<div style="float:left; background-color:#DDD; display:block;">f(x)</div>
  <div style="float:left; height:109px; width:10px; background-color:#F00;
  display:block;"> </div>

  <div style="float:left; height:89px; width:10px; background-color:#00F;
  display:block;"> </div>

  <div style="float:left; height:20px; width:10px; background-color:#0FF;
  display:block;"> </div>
</div>

<p style="clear:left;">Und hier geht es weiter.</p>

</body>

Was ich noch nicht hinbekommen habe:
-Der äußere Rahmen enthält float:left, obwohl nichts rechts davon stehen 
soll. Ohne dieser Angabe ist die Box null Pixel hoch. Komisch.
Alternativ würde ein position:absolute; gehen, aber das Diagramm soll in 
den Fließtext.
Ich wüßte gerne, wie das "elegant" geht.

-Die Höhenangaben sind leider Gesamthöhe minus Wert. 
vertical-align:bottom; funktioniert nicht. So ist der Graph horizontal 
gespiegelt.
-Y-Achsbeschriftung soll in die Mitte
-zentrierte X-Achsbeschriftung (Beides wird sich wohl aus den oberen 
Fragen klären.)

Schön ist, dass sich die Box mit dem weißen Hintergrund automatisch in 
der Größe anpasst.
Alle bunten Balken sollen später schwarz werden.

Thomas