Bergervei/Javascript-Balkendiagramm

Wiki-Quelltext dieser Seite.

<language>Javascript</language>
== Felder mit Zufallszahlen ==

<code id="5c02bcdd9281f" hidden>
var rand = 50;
var maxBreite = 400 - 2 * rand;
var maxHoehe = 300 - 2 * rand;

function minMax(feld) {
 var ergebnis = new Array(0, 0);
 for (var i = 0; i < feld.length; i++) {
  if (ergebnis[0] > feld[i]) ergebnis[0] = feld[i];
  if (ergebnis[1] < feld[i]) ergebnis[1] = feld[i];
 }
 return ergebnis;
}

function balken(turtle, hoehe, breite) {
 turtle.forward(breite); turtle.left(90); 
 turtle.forward(hoehe); turtle.left(90);
 turtle.forward(breite); turtle.left(90);
 turtle.forward(hoehe); turtle.left(90);
 turtle.forward(breite); 
}

function balkenDiagramm(canvas, turtle, feld) {
 var breite = maxBreite / feld.length; 
 var extremWert = minMax(feld);
 var min = extremWert[0];
 var max = extremWert[1];
 canvas.clear();
 turtle.hide();
 turtle.move(rand, rand + max / (max - min) * maxHoehe);
 turtle.right(90);
 for (var i = 0; i < feld.length; i++)
  balken(turtle, feld[i] / (max - min) * maxHoehe, breite);
}
</code>

<code id="5c02bcdd92892">
function zufallszahl(von, bis) {
 return Math.floor(Math.random() * (bis - von + 1) + von);
}

function erzeugen(von, bis, anz) {
 var feld = new Array();
 for (var i = 0; i < anz; i++)
  feld[i] = zufallszahl(von, bis);
 return feld;
}

function ausgeben(feld) {
 var maxAnzahl = 25;
 var teilFeld = new Array();
 var i = 0, j = 0;
 while (i < feld.length) {
  j = i + maxAnzahl;
  if (j < feld.length)
   teilFeld = feld.slice(i, j);
  else
   teilFeld = feld.slice(i, feld.length);
  console.log(teilFeld);
  i = j;
 }
}
</code>

== Ausgabe und Darstellung im Balkendiagramm ==

<canvas w="400" h="300"></canvas>

<run id="5c02bcdd9290d">
var newFeld = erzeugen(1, 100, 50);
ausgeben(newFeld);
balkenDiagramm(canvas1, turtle1, newFeld);
</run>