Diese Seite benötigt die Unterstützung von JavaScript 1.1
Bitte aktivieren Sie JavaScript in Ihrem Browser und klicken Sie auf ‘Aktualisieren’

Balkendiagramm

Beschreibung

Manche Ausgaben erfordern ein Balkendiagramm. Die folgende JavaScript-Anwendung gestaltet dies komfortabel.

JavaScript erzeugt dazu ein Frame, der auf eine StyleSheet-Datei zurückgreift, um die Darstellung optimal anzupassen.

Syntax

DiaZeichnen(MaxZeilen, Maximum, WertListe, RubrikenListe, UeberSchrift, UnterSchrift)

`MaxZeilen`	Zahl. In wieviele Segmente soll der Balken, der angezeigt wird, zerlegt werden ? Dies ist eine Frage nach der Rundung der Werte, bei 20 Balken werden Werte zwischen 0 und 100% auf 5% gerundet und in 5%-Schritten angezeigt. `MaxZeilen` > 2
`Maximum`	Zahl. Auf welches Maximum sollen die Balken bezogen werden ? Wenn die Bevölkerungsanteile der Kontinente einezeichent werden sollen, wäre das Maximum die Gesamtbevölkerung der Erde, also ca. 6 Mrd.
`WertListe`	Array vom Typ Zahlen. Aus diesen Werten wird die Höhe der Balken berechnet. Im Beispiel der Bevölkerungsstatistik würde es die Einwohnerzahlen der 5 Kontinente beinhalten.
`RubrikenListe`	Array vom Typ String. Mit diesen Texten werden die Balken beschriftet. Im Beispiel der Bevölkerungsstatistik würde es die Namen der Kontinente enthalten.
`UeberSchrift`	String. Überschrifttext des Diagramms, wird in <TITLE>-Tag wiederholt.
`UnterSchrift`	String. Erläuterungstext zum Diagramm

Anmerkungen

Der HTML-Code in dieser Seite enthält zur Vereinfachung die Funktion Auswertung welche von einer Schaltfläche im Formular aufgerufen wird und dann die Daten an DiaZeichnen übergibt.
Das Beispiel zeigt drei Spalten, theoretisch sind aber beliebig viele Spalten möglich.
Beim Netscape-Navigator ist das neue Fenster nicht veränderbar und der Quelltext nicht einsehbar.

Funktions-Demo

Das folgende Formular demonstriert die Wirkung der Funktion.

Spalte	Überschrift	Wert
1
2
3

Code

  <SCRIPT LANGUAGE="JavaScript1.1" TYPE="text/javascript"><!--

  function Auswertung(Schaltflaeche)
  {
    var Formular = Schaltflaeche.form
    var Rubriken = new Array(3)
    Rubriken[0] = Formular.Titel0.value
    Rubriken[1] = Formular.Titel1.value
    Rubriken[2] = Formular.Titel2.value

    var Werte = new Array(3)
    Werte[0] = Formular.Wert0.value
    Werte[1] = Formular.Wert1.value
    Werte[2] = Formular.Wert2.value
    DiaZeichnen(10,100,Werte,Rubriken,"Titel: Beispiel","Untertitel: Das Ergebnis")
  }


  function DiaZeichnen(MaxZeilen, Maximum, WertListe, RubrikenListe, UeberSchrift, UnterSchrift)
  {
     var BreiteBalken = 5 // Verhältnis zwischen Balkenspalte und Trennspalte, hier 1:5

     var HtmlText = "<HTML><HEAD><TITLE>" + UeberSchrift
     HtmlText += "<\/TITLE><\/HEAD><BODY><H1 ALIGN=CENTER>"
     HtmlText += UeberSchrift + "<\/H1><CENTER><TABLE BORDER=0 CELLPADDING=0 CELLSPACING=1 WIDTH=\"100\%\">\n<CAPTION>"
     HtmlText += UnterSchrift + "<\/CAPTION><TR>\n";
     for (Pos=0; Pos < WertListe.length; Pos++)
       {
          WertListe[Pos] = Math.floor((WertListe[Pos] / Maximum) * MaxZeilen + .5)
          if (MaxZeilen == WertListe[Pos])
               { HtmlText += "<TD WIDTH=\"" + BreiteBalken + "\%\" BGCOLOR=#008000>&nbsp;<\/TD>\n" }
          else { HtmlText += "<TD WIDTH=\"" + BreiteBalken + "\%\" BGCOLOR=#EEEEEE>&nbsp;<\/TD>\n" }

          if(Pos < WertListe.length -1)
            { HtmlText += "<TD ROWSPAN=" + MaxZeilen + " WIDTH=\"1\%\">&nbsp;<\/TD>\n" }
       }
     HtmlText += "<\/TR>\n"

     for (Zeile = 2; Zeile <= MaxZeilen; Zeile++) {
       HtmlText += "<TR>\n"
       for (Pos = 0; Pos < WertListe.length; Pos++) {
           if (MaxZeilen < WertListe[Pos] + Zeile) {
              HtmlText += "<TD BGCOLOR=\"#008000\" WIDTH=\"" + BreiteBalken + "\%\">&nbsp;<\/TD>\n" }
           else {
              HtmlText += "<TD BGCOLOR=#EEEEEE WIDTH=\"" + BreiteBalken + "\%\">&nbsp;<\/TD>\n" }
       }
       HtmlText += "<\/TR>\n"
     }
     HtmlText += "<\/TR>\n"
     for (Pos=0; Pos < RubrikenListe.length; Pos++)
     { HtmlText += "<TH WIDTH=\"" + BreiteBalken + "\%\" ALIGN=\"CENTER\"><P ALIGN=\"CENTER\">" + RubrikenListe[Pos] + "<\/TH>\n"
       if(Pos < RubrikenListe.length -1)
                 { HtmlText += "<TH WIDTH=\"1\%\">&nbsp;<\/TH>\n" }
     }

     HtmlText += "<\/TR><\/TABLE><\/CENTER><\/BODY><\/HTML>"
     window.open("", "Testauswertung").document.write(HtmlText);
  }
  // -->

  </SCRIPT>