[linux-l] CSS: Balkendiagramm

Fr Jun 9 15:05:27 CEST 2006

Mir macht das ehrlich gesagt nichts aus
aber warte mal die Reaktionen hier ab ;)

Michael Kasten | 12059 Berlin | http://www.m-kasten.de

Thomas Schmidt schrieb:

> 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
>
> _______________________________________________
> linux-l mailing list
> linux-l at mlists.in-berlin.de
> Die Mailingliste der BeLUG (Berliner Linux User Group)
>
> Wenn du diese Mailingliste  abbestellen willst, gehe bitte auf
> https://mlists.in-berlin.de/mailman/listinfo/linux-l
> und trage dich dort bitte aus
>