nicht angemeldet
Balkendiagramm primitiv
Hallo,
in etlichen Beiträgen der letzten Zeit war zum
Ausdruck gebracht worden, daß einige Themen zu
abgehoben sind und zuwenig HTML gebracht wird.
Daher hier mal eine richtig einfache Lösung
für ein (statisches) Balkendiagramm.
Das Beispiel geht von einer blinden Tabelle aus,
die eigentlichen Balken machen aber Gebrauch
einer spezifischen Eigenschaft des IMG-Tags,
nämlich des WIDTH-Attributs.
Benutzt wurden beliebige Werte aus der
Zugriffsstatistik von SelfHTML.
Die Tabelle wird nur zur Formatierung benutzt.
In der linken Spalte stehen die verwendeten
Browser, in der rechten sind IMGs untergebracht.
Ihre horizontale Länge wird über das WIDTH-
Attribut eingestellt, hier 10x der Prozentwert in
Pixeln.
Der Einfachheit halber habe ich die X3.GIF aus dem Forum benutzt. Diese Graphik ist eigentlich nicht
dafür geeignet da sie links und rechts leere Pixel
hat die natürlich mitgestreckt werden.
Daher tanzen diese Balken in der Spalte.
Wenn ihr aber irgendeine Balkengraphik nehmt die
das Bild horizontal ganz ausfüllt, dann sieht es schon besser aus. Probiert es mal aus.
Das HEIGHT-Attribut verhindert, daß die Graphiken
beim Strecken in Längsrichtung auch höher werden.
Die Balkengraphik kann sicher keinen so recht vom
Hocker hauen, dafür bietet sie aber eine einfache
Möglichkeit Statistiken zu visualisieren.
Den Begriff 'statisch' habe ich benutzt, weil
dieses Verfahren auf Handarbeit aufsetzt.
Um sich dynamisch ändernde Werte darzustellen,
müßte man wohl etwas tiefer in JS einsteigen.
Hier mal das Source des Beispiels zum cutten&pasten. Nehmt aber bitte eine besser
geeignete Graphik!
<HTML>
<BODY>
<!-- Dieses ist das eigentliche Balkendiagramm -->
<TABLE CELLSPACING="0" CELLPADDING="0">
<TH BGCOLOR="#C0C0C0" COLSPAN="2">Verteilung der Browser</TH>
<TR><TD>NS 3.0x</TD> <TD><IMG SRC="X3.GIF" WIDTH=" 10" HEIGHT="10"> 0,99% </TD></TR>
<TR><TD>NS 4.0x</TD> <TD><IMG SRC="X3.GIF" WIDTH="301" HEIGHT="10"> 30,94%</TD></TR>
<TR><TD>NS 4.5x</TD> <TD><IMG SRC="X3.GIF" WIDTH="147" HEIGHT="10"> 14,65%</TD></TR>
<TR><TD>Summe NS</TD><TD><IMG SRC="X3.GIF" WIDTH="465" HEIGHT="10"> 46,53%</TD></TR>
<TR><TD> </TD> <TD></TD></TR>
<TR><TD>IE 3.x</TD> <TD><IMG SRC="X3.GIF" WIDTH=" 29" HEIGHT="10"> 2,96% </TD></TR>
<TR><TD>IE 4.x</TD> <TD><IMG SRC="X3.GIF" WIDTH="356" HEIGHT="10"> 35,65%</TD></TR>
<TR><TD>IE 5.x</TD> <TD><IMG SRC="X3.GIF" WIDTH=" 38" HEIGHT="10"> 3,78% </TD></TR>
<TR><TD>Summe MS</TD><TD><IMG SRC="X3.GIF" WIDTH="424" HEIGHT="10"> 42,39%</TD></TR>
<TR><TD> </TD> <TD></TD></TR>
<TR><TD>Opera</TD> <TD><IMG SRC="X3.GIF" WIDTH=" 9" HEIGHT="10"> 0,89% </TD></TR>
</TABLE>
</BODY>
</HTML>
Klaus
-
Hallo Klaus,
Daher hier mal eine richtig einfache Lösung
für ein (statisches) Balkendiagramm.vielen Dank fuer den Tip!
Allerdings macht die Balkendarstellung von Prozentwerten meistens nur in dynamisch ermittelten Werten Sinn, und so landet das Ganze dann doch wieder in einem Perl-Script oder dergleichen <g>. Was aber nichts daran aendert, dass dies ein Weg ist, mit HTML solche Dinge darzustellen, und die meisten Zugriffs-Statistiken, die es so gibt im Web, arbeiten ja auch mit diesem Trick.viele Gruesse
Stefan Muenz