 Statistik 02 (horizontal mit Skala)
Statistik-Graph: Farbige grafische Darstellung durch Images + Skala mit JavaScript. An diesem Script habe ich eine Weile 'gebastelt', bevor die Einbindung so einfach wie möglich wurde.
 30.05.2008, Erweiterung um den Farbwert 'transparent'
Die Funktion scala() schreibt im Kopfbereich den Statistiktitel und das Maßstabsgitter, jeder Aufruf der Funktionen stat() die Bezeichnung, den Wert und einen farbigen waagerechten Balken für den Graphen.
Sie können sie folgende Werte eintragen:
Beim Aufruf scala()
- Text (Statistiktitel)
- Farbe1 (Zwischenraum)
- Farbe2 (Strichfarbe)
- Maßstab (Multiplikator)
|
Beim Aufruf stat()
- Text (Bezeichnung)
- Zahlenwert für die Breite
- Farbe des Balkens
- Maßstab (Multiplikator)
|
Die Funktionsaufrufe im Beispiel:
scala('Statistikitel',transp,grau,139,1)
stat('Bezeichnung 01',blau,139,1)
stat('Bezeichnung 02',gelb,86,1)
erzeugen diesen Graphen:
Das Script ist erweiterbar oder mit anderen Funktionen kombinierbar, wenn die Werte z.B. dynamisch durch ein anderes Script eingetragen werden.
Skalierung
Der letzte Eintrag für die Werteübergabe in der Funktion hat Einfluss auf die Stauchung / Streckung. Er ist ein Multiplikator für den Maßstab (kleiner Wert: breite Statistik).
Abgelegt in der Variablen "massstab", Bsp1 = 1, Bsp 2 = 0.5
scala('Statistikitel',transp,grau,139,0.5)
stat('Bezeichnung 01',blau,139,0.5)
stat('Bezeichnung 02',gelb,86,0.5)
Funktion des Scripts
Grafiken werden nach Vorgabe der Werte im Funktionsaufruf in eine Tabellenzeile und Tabellenzellen geschrieben. (Zip-Datei der Grafiken herunterladen)
Die einzelnen Funktionsaufrufe werden einfach in einleitende und schließende <table>-Tags notiert.
Die Funktionen übernehmen das Schreiben der <tr> und <td> - Tags.
Die Tabellenbreite wird durch die Inhalte erzwungen. Wert 200 für Balkenbreite entspricht 200 Pixel.
Wird die Tabelle zu breit, tragen sie einen anderen Wert für den Maßstab ein.
Maßstab (Teiler) = 2 ändert die Balkenbreite von 200 auf 100 Pixel.
Maßstab (Teiler) = 0.5 ändert die Balkenbreite von 200 auf 400 Pixel.
Die 3 Funktionsaufrufe:
scala('Statistikitel',weiss,grau,139,0.5)
stat('Bezeichnung 01',blau,139,0.5)
stat('Bezeichnung 01',gelb,86,0.5)
Aufwand:
- Script im Head notieren
- Table-Tags im Body notieren
- Funktionsaufruf notieren
Ergebnis dieser drei Aufrufe:
30.05.2008, Erweiterung um den Farbwert 'transparent'
Im Statistiktitel oben sehen sie den Eintrag 'weiss', der einen weißen Hintergrund / Zwischenraum innerhalb der Strichdarstellung der Skala generiert. Durch die Einbindung einer transparenten Grafik haben sie die Möglichkeit die Textzeile farbig zu hinterlegen ohne störneden weißfarbigen Hintergrund der Skala.
Weitere Beispiele
Aufruf der Funktion scala() mit: scala('Statistikitel',transp,grau,xxx,yyy)
Hintergrundfarbe der Tabellenzeile: #F8F8F8
Einbindung der Images:
var weiss = "images/block10-39.gif";
var schwarz = "images/block10-27.gif";
var rot = "images/block10-14.gif";
var gruen = "images/block10-09.gif";
var violett = "images/block10-23.gif";
var blau = "images/block10-21.gif";
var gelb = "images/block10-24.gif";
var grau = "images/block10-34.gif";
var transp = "images/transpixel.gif";
Images in der Reihenfolge der Liste oben (Rand auf '1' gestellt):
          
Weitere Images (insgesamt 44) dieser Reihe gibts in meiner MINI-IMAGE-BOX im Menü 'Aufzählungszeichen / Listelemente (erster Menüpunkt - Block 10 x 10).
 MINI-IMAGE-BOX 
|
WWW.WEB-TOOLBOX.NET
DOWNLOAD IMAGES 
ZURÜCK