 SELFHTML aktuell Artikel JavaScript | |
 |
Lutz Tautenhahn:
|
 |
|
 | |
| E-Mail: |  lutz.tautenhahn@t-online.de |
|---|---|
| Homepage-URL: |  http://home.t-online.de/home/lutz.tautenhahn/index_d.html |
Bei Fragen zu diesem Beitrag bitte den Autor des Beitrags kontaktieren!
JavaScript Diagram Builder v. 2.1 ist eine Bibliothek einiger Objekte und Funktionen, mit deren Hilfe auf einfache Weise
Diagramme in Web-Seiten dargestellt werden können. Die Datei diagram.js enthält alle erforderlichen Objekte
und Funktionen. Diese Datei muss in den Header der Web-Seite eingefügt werden:
<SCRIPT type="text/javascript" src="diagram.js"></SCRIPT>
Das Script funktioniert am besten mit Microsoft Internet Explorer 5.x und Netscape 6.x unter Windows oder mit Netscape 6.x
unter Linux, aber auch mit Netscape 4.x und Opera 5.x unter Windows und Linux mit einigen Einschränkungen. Andere Browser und Systeme wurden nicht getestet.
Der leichteste Weg, ein Diagramm in einer Webseite darzustellen,
besteht darin, ein gif- oder jpg-Bild des Diagramms mittels img-Tag in die Webseite einzufügen.
Oftmals gibt es aber die Anforderung, ein Diagramm in Abhänigigkeiten von bestimmten Benutzereingaben darzustellen.
Dann muss dieses Diagramm in Echtzeit generiert werden.
Dazu könnte man versuchen, über eine ASP-, CGI-, PHP- oder Perl-Seite eine gif- oder jpg-Datei des Diagramms
serverseitig zu erzeugen und in die Webseite einzufügen. Jedoch hat nicht jeder Homepage-Besitzer einen Provider,
der das ermöglicht. Ein Nachteil der Methode wäre auch, dass sie nur im Online-Modus funktioniert.
Nicht geeignet wäre sie dadurch beispielsweise für interaktive HTML-Seiten, die von CD-ROM aufgerufen oder lokal
installiert werden sollen.
Eine andere Möglichkeit ist, ein Java-Applet in die HTML-Seite einzufügen, welches das Diagramm darstellt. Das wird jedoch
vermutlich eine längere Wartezeit zum Download und zur Initialisierung des Java-Applets verursachen.
Die Lösung des Problems besteht darin, ein Diagramm mittels JavaScript darzustellen.
Der JavaScript Diagram Builder v. 2.1 ist urheberrechtlich geschützte Freeware (freie Software). Sie wird
"so wie sie ist" zur Verfügung gestellt, ohne eine Garantie irgendeiner Art.
Wenn Sie Programmfehler entdecken oder Vorschläge für zukünftige Versionen haben, dann schreiben Sie mir
bitte eine Email.
Der im folgenden vorgestellte JavaScript Diagram Builder 2.1 ist aus einer persönlichen Notwendigkeit entstanden: Ich programmiere selbst in verschiedenen Programmiersprachen und verwende JavaScript gern zum Testen von Algorithmen, bevor ich dazu eventuell ein Programm in einer "richtigen" Programmiersprache schreibe. Dazu war es auch öfters notwendig, Daten grafisch darzustellen. Also habe ich mir die Zeit genommen und das Diagramm-Objekt, welches ich bereits vor mehreren Jahren in C++ programmiert hatte, nach JavaScript portiert und noch etwas erweitert, und herausgekomen ist der vorliegende JavaScript Diagram Builder.
Das Objekt 'Diagram' stellt die Möglichkeit bereit, ein Diagramm an einer definierten Position des Dokuments in einer definierten Größe zu zeichnen. Eine passende Skale wird automatisch entsprechend der angegebenen xmin-, xmax-, ymin- und ymax-Werte gezeichnet. Das Diagramm stellt - auch wenn es nicht dargestellt wird - einige nützliche Funktionen zur Umwandlung von Bildschirm- in Welt-Koordinaten (und umgekehrt) bereit.
Anzeigebeispiel: So sieht's aus
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>JavaScript Diagram Builder - Das Objekt 'Diagram'</title>
<SCRIPT type="text/javascript">
if ((document.layers)&&(history.length==1)) location.href=location.href+"#";
</SCRIPT>
<SCRIPT type="text/javascript" src="diagram.js"></SCRIPT>
</head>
<body>
<DIV STYLE="position:absolute; top:0"></DIV>
<SCRIPT type="text/javascript">
document.open();
var D=new Diagram();
D.SetFrame(80, 50, 420, 250);
D.SetBorder(10, 50, 0, 4);
D.SetText("X-Skale","Y-Skale", "Titel");
D.Draw("#80FF80", "#0000FF", true, "Klick mich !", "DiagramClick()");
document.close();
function DiagramClick()
{ alert("Verwenden Sie hier Ihre eigene Funktion."); }
</SCRIPT>
</body>
</html>
Mit var D=new Diagram() wird eine neue Diagramm-Instanz erzeugt, auf welche im folgenden mit dem Namen
D zugegriffen werden kann.
D.SetFrame(links, oben, rechts, unten) gibt den Bereich an, welchen
der Rahmen des Diagramms im Dokument einnimmt.
D.SetBorder(X-links, X-rechts, Y-unten, Y-oben) gibt die reellen X- und Y-Werte an, welche an den
Diagramm-Grenzen angenommen werden sollen.
Mit D.SetText(X-Skale, Y-Skale, Titel) wird die Skalenbeschriftung und Überschrift des Diagramms
festgelegt.
Danach kann das Diagramm gezeichnet werden. Das geschieht mit
D.Draw(HintergrundFarbe, TextFarbe, SkalenbeschriftungVorhanden, TooltipText, ClickAktion).
Die letzten beiden Parameter sind dabei optional.
Das Diagramm ist dabei noch ohne Inhalt, zur Darstellung der eigentlichen Werte können weitere Objekte wie Balken
und Punkte verwendet werden. Zur Ermittlung der Position der zusätzlichen Objekte können dazu die
Diagramm-Funktionen ScreenX, ScreenY, RealX und RealY
verwendet werden.
var D = new Diagram() //Konstruktor
D.SetFrame(theLeft, theTop, theRight, theBottom) //Bildschirm
D.SetBorder(theLeftX, theRightX, theBottomY, theTopY) //Welt
D.SetText(theScaleX, theScaleY, theTitle) //Skalenbeschriftung
D.ScreenX(theRealX) //Koordinatentransformation Welt->Bildschirm
D.ScreenY(theRealY) //Koordinatentransformation Welt->Bildschirm
D.RealX(theScreenX) //Koordinatentransformation Bildschirm->Welt
D.RealY(theScreenY) //Koordinatentransformation Bildschirm->Welt
D.Draw(theDrawColor, theTextColor, isScaleText[, theTooltipText[, theAction]]) //Zeichnen
D.SetVisibility(isVisible) //Anzeigen oder Verbergen
D.SetTitle(theTitle) //TooltipText
D.Delete() //DIV-Objekt von D aus dem Dokument löschen
delete D //Destruktor
D.XScale // 0 = keine Skale; 1 = numerisch (default); 2, 3, ... = Datum/Zeit
D.YScale // 0 = keine Skale; 1 = numerisch (default); 2, 3, ... = Datum/Zeit
Wegen eines Fehlers in Netscape 4.x muss der folgende Code in die Web-Seite eingefügt weden
bevor die Objekte verwendet werden:
<DIV STYLE="position:absolute; top:0"></DIV>
Außerdem muss für Netscape 4.x die Datei transparent.gif im Verzeichnis der Web-Seite vorhanden
sein.
Das Objekt 'Bar' wird verwendet, um einen Balken darzustellen, insbesondere um ihn in ein Diagramm zu zeichnen. Um die richtige Bildschirm-Position und Größe für einen Balken zu finden, können die Funktionen ScreenX, ScreenY, RealX und RealY des 'Diagram'-Objekts verwendet werden. Es ist auch möglich, einen Balken nach dem Zeichnen zu verschieben, seine Größe zu ändern, zu verbergen und zu löschen.
Anzeigebeispiel: So sieht's aus
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>JavaScript Diagram Builder - Das Objekt 'Bar'</title>
<SCRIPT type="text/javascript">
if ((document.layers)&&(history.length==1)) location.href=location.href+"#";
</SCRIPT>
<SCRIPT type="text/javascript" src="diagram.js"></SCRIPT>
</head>
<body bgcolor=#ffffff>
<DIV STYLE="position:absolute; top:0"></DIV>
<SCRIPT type="text/javascript">
document.open();
var D=new Diagram();
D.SetFrame(80, 60, 520, 260);
D.SetBorder(-1, 13, 0, 1000);
D.SetText("","", "Website Hits 2001");
D.XScale=0;
D.Draw("#FFFF80", "#004080", false);
Monat=new Array("Jan", "Feb", "Mrz", "Apr", "Mai", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Dez");
var i, j, y;
for (i=0; i<12; i++)
{ y=500+Math.random()*400;
j=D.ScreenX(i+0.5);
if (i%2==0)
new Bar(j-15, D.ScreenY(y), j+15, D.ScreenY(0), "#0000FF", Monat[i], "#FFFFFF", "Hits je Monat");
else
new Bar(j-15, D.ScreenY(y), j+15, D.ScreenY(0), "#FF0000", Monat[i], "#000000", "Hits je Monat");
}
document.close();
</SCRIPT>
</body>
</html>
Nach dem Zeichnen des Diagramms werden in der Schleife
for (i=0; i<12; i++) mit dem Konstuktor new Bar(...)
12 'Bar'-Objekte erzeugt, welche abwechselnd rot und blau sein sollen. Daher die Unterscheidung
if (i%2==0) ... else ....
Die Parameter im Konstruktor sind für das Aussehen
des Objekts verantwortlich und werden in der Liste weiter unten angegeben.
Mit y=500+Math.random()*400 wird die Höhe
eines Objekts (im Skalenmaßstab) zufällig festgelegt. Die Umrechnung in
y-Pixel-Koordinaten erfolgt durch die Funktion D.ScreenY(y), welche direkt im
Konstruktor als Parameter verwendet wird. Dabei ist D
der Name des 'Diagram'-Objekts, in dem das 'Bar'-Objekt dargestellt werden soll.
var B = new Bar(theLeft, theTop, theRight, theBottom, theDrawColor, theText, theTextColor
[, theTooltipText[, theAction]])B.SetVisibility(isVisible) //Anzeigen oder Verbergen
B.SetText(theText) //Text
B.SetTitle(theTitle) //TooltipText
B.MoveTo(theLeft, theTop) //Verschieben
B.ResizeTo(theLeft, theTop, theWidth, theHeight) //Größe ändern
B.Delete() //DIV-Objekt von B aus dem Dokument löschen
delete B //Destruktor
Das 'Box'-Objekt ist dem 'Bar'-Objekt ähnlich. Es hat 2 zusätzliche Eigenschaften: Rahmendicke und Rahmenfarbe. 'Bar'- und 'Box'-Objekte können auch mit einem Image-Tag anstelle des Textes verwendet werden. Auf diese Weise können die Objekte auch in 3D-Ansicht dargestellt werden. Für transparente Objekte (das Diagramm im folgenden Beispiel ) verwenden Sie als Hintergrundfarbe "".
Anzeigebeispiel: So sieht's aus
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>JavaScript Diagram Builder - Das Objekt 'Box'</title>
<SCRIPT type="text/javascript">
if ((document.layers)&&(history.length==1)) location.href=location.href+"#";
</SCRIPT>
<SCRIPT type="text/javascript" src="diagram.js"></SCRIPT>
</head>
<body bgcolor=#ffffff>
<DIV STYLE="position:absolute; top:0"></DIV>
<SCRIPT type="text/javascript">
document.open();
var D=new Diagram();
D.SetFrame(80, 60, 520, 260);
D.SetBorder(Date.UTC(2000,11,15,0,0,0), Date.UTC(2001,11,15,0,0,0), 0, 1000);
D.SetText("","", "Website Hits 2001");
D.XScale=4;
D.Draw("", "#004080", false);
var i, j, y, y0=D.ScreenY(0);
for (i=0; i<12; i++)
{ y=D.ScreenY(500+Math.random()*400);
j=D.ScreenX(Date.UTC(2001,i,1,0,0,0));
if (i%2==0)
new Box(j-12, y, j+12, y0, "#0000FF",
"<img src='v_blue.gif' width=22 height="+eval(y0-y-2)+" border=0>",
"#FFFFFF", 1, "#000000");
else
new Box(j-12, y, j+12, y0, "#FF0000",
"<img src='v_red.gif' width=22 height="+eval(y0-y-2)+" border=0>",
"#000000", 1, "#000000");
}
document.close();
</SCRIPT>
</body>
</html>
Dieses Beispiel unterscheidet sich von dem vorherigen dadurch, dass das Diagramm
transparent ist. Dies geschieht durch D.Draw("", "#004080", false);,
wobei der erste Parameter "" eine transparente Hintergrundfarbe ergibt. Das kann auch bei 'Bar'-
und 'Box'-Objekten verwendet werden, um einen transparenten Hintergrund zu erzeugen.
Bei den hier verwendeten 'Box'-Objekten wurde ein Image-Tag anstelle des Textes verwendet:
<img src='v_blue.gif' width=22 height="+eval(y0-y-2)+" border=0>.
Das ist genauso auch bei 'Bar'-Objekten möglich. Es ist dabei darauf zu achten, dass die
Angaben width und height genau der Größe des Objekts
entsprechen, damit das Bild den Hintergrund des Objekts vollständig überdeckt.
var B = new Box(theLeft, theTop, theRight, theBottom, theDrawColor, theText, theTextColor
[, theBorderWidth[, theBorderColor[, theTooltipText[, theAction]]]])B.SetVisibility(isVisible) //Anzeigen oder Verbergen
B.SetText(theText) //Text
B.SetTitle(theTitle) //TooltipText
B.MoveTo(theLeft, theTop) //Verschieben
B.ResizeTo(theLeft, theTop, theWidth, theHeight) //Größe ändern
B.Delete() //DIV-Objekt von B aus dem Dokument löschen
delete B //Destruktor
Das Objekt 'Dot' wird verwendet, um einen Punkt oder ein anderes kleines Symbol in ein Diagram zu zeichnen. Zur Ermittlung der Bildschirmposition für ein 'Dot'-Objekt können wieder die Funktionen des 'Diagram'-Objekts ScreenX, ScreenY, RealX und RealY verwendet werden. Es ist auch möglich ein 'Dot'-Objekt zu verschieben, zu verbergen und zu löschen, nachdem es gezeichnet worden ist.
Anzeigebeispiel: So sieht's aus
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>JavaScript Diagram Builder - Das Objekt 'Dot'</title>
<SCRIPT type="text/javascript">
if ((document.layers)&&(history.length==1)) location.href=location.href+"#";
</SCRIPT>
<SCRIPT type="text/javascript" src="diagram.js"></SCRIPT>
</head>
<body>
<DIV STYLE="position:absolute; top:0"></DIV>
<SCRIPT type="text/javascript">
document.open();
var D=new Diagram();
D.SetFrame(80, 60, 640, 360);
D.SetBorder(6, 18, 1, 6);
D.SetText("","", "Dot objects");
D.Draw("#FF80FF", "#000000", false);
var Size, Type, x, d=Math.floor(Math.random()*6);
Color=new Array("#000000","#FF0000","#0000FF","#000000","#FF0000","#0000FF");
for (Size=6; Size<=18; Size++)
{ x=D.ScreenX(Size);
for (Type=1; Type<=6; Type++)
new Dot(x, D.ScreenY(Type), Size, Type+d, Color[Type-1], "Type:"+eval(Type+d)+", Size:"+Size);
}
document.close();
</SCRIPT>
</body>
</html>
In diesem Diagramm wird durch die Schleifen for (Size=6; Size<=18; Size++) und
for (Type=1; Type<=6; Type++) ein Raster von 13×6=78 'Dot'-Objekten dargestellt,
jedes Objekt entspricht dabei einer anderen Größe-Typ-Kombination. Die 'Dot'-Objekte werden
dabei als Schriftzeichen dargestellt, die so verschoben werden, daß deren Mittelpunkt den
angegebenen X- und Y-Parametern im Konstruktor entsprechen.
Bitte beachten Sie, dass es dabei unter Umständen bei gewissen Browsern/Plattformen
zu geringfügigen Abweichungen in der Darstellung kommen kann.
var D = new Dot(theX, theY, theSize, theType, theColor[, theTooltipText
[, theAction]]) //Konstruktor und Anzeige, theSize=6..18, theType=1..6
D.SetVisibility(isVisible) //Anzeigen oder Verbergen
D.SetTitle(theTitle) //TooltipText
D.MoveTo(theX, theY) //Verschieben
D.Delete() //DIV-Objekt von D aus dem Dokument löschen
delete D //Destruktor
Das Objekt 'Pixel' wird verwendet, um einen Pixel zu zeichnen. Um die entsprechende Bildschirmposition für ein 'Pixel'-Objekt zu erhalten, können die Funktionen des 'Diagram'-Objekts ScreenX, ScreenY, RealX und RealY verwendet werden. Es ist auch möglich, ein 'Pixel'-Objekt zu bewegen, zu verbergen und zu löschen, nachdem es gezeichnet worden ist. Zeichnen Sie nicht zu viele Pixel, damit der Aufbau der Web-Seite nicht zu lange dauert.
Anzeigebeispiel: So sieht's aus
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>JavaScript Diagram Builder - Das Objekt 'Pixel'</title>
<SCRIPT type="text/javascript">
if ((document.layers)&&(history.length==1)) location.href=location.href+"#";
</SCRIPT>
<SCRIPT type="text/javascript" src="diagram.js"></SCRIPT>
</head>
<body>
<DIV STYLE="position:absolute; top:0"></DIV>
<SCRIPT type="text/javascript">
document.open();
var D=new Diagram();
D.SetFrame(80, 60, 540, 360);
D.SetBorder(0, eval(2*Math.PI), -1, 1);
D.SetText("", "", "<B>Einige Funktionen</B>");
D.Draw("#DDDDDD", "#000000", false, "");
var i, j, x;
for (i=80; i<=540; i++)
{ x = D.RealX(i);
j= D.ScreenY(Math.sin(x));
new Pixel(i, j, "#FF0000");
j= D.ScreenY(Math.cos(x));
new Pixel(i, j, "#0000FF");
}
new Bar(560, 100, 680, 120, "#0000FF", "f(x)=cos(x)", "#FFFFFF");
new Bar(560, 160, 680, 180, "#FF0000", "f(x)=sin(x)", "#000000");
document.close();
</SCRIPT>
</body>
</html>
Bei diesem Diagramm wurde mit D.SetText("", "", "<B>Einige Funktionen</B>");
eine fette Überschrift erzeugt. Die angegebene Zeichen werden nämlich als
normale HTML-Zeichen interpretiert. Die Schleife for (i=80; i<=540; i++)
entspricht genau der zuvor mit D.SetFrame(80, 60, 540, 360); angegebenen
Breite des Diagramms. Für jeden Pixel-Wert in X-Richtung i wird mit x = D.RealX(i);
der zugehörige reelle Wert bestimmt. Auf diesen Wert wird dann eine mathematische Funktion
angewandt und der Rückgabewert mit D.ScreenY(Math.sin(x)); sofort in den
zugehörigen Pixel-Wert in Y-Richtung j umgewandelt. Danach wird dazu ein 'Pixel'-Objekt mit den
Koordinaten i und j erzeugt. Bitte beachten Sie, daß das 'Pixel'-Objekt je nach
Browser und Plattform aus 1×2 oder auch 2×2
zusammenhängenden Bildschirmpunkten besteht, d. h. als fetter Punkt dargestellt wird.
var P = new Pixel(theX, theY, theColor) //Konstruktor und Anzeige
P.SetVisibility(isVisible) //Anzeigen oder Verbergen
P.MoveTo(theX, theY) //Verschieben
P.Delete() //DIV-Objekt von P aus dem Dokument löschen
delete P //Destruktor
Die Diagramme im folgenden Beispiel sind (wie auch alle bisherigen Beispiele) statisch in dem Sinn, dass nachdem
die Objekte erzeugt wurden, diese nicht mehr geändert werden.
In diesem Beispiel werden verschiedene Zeit-Skalen dargestellt, welche im Bereich von Sekunden bis zu Jahren sein können.
Unglücklicherweise gibt es viele verschiedene Zeit-Formate auf der Welt (z.B. Tag.Monat, Tag-Monat,
Monat/Tag). Wenn Sie ein anderes Zeitformat verwenden wollen, dann können Sie dieses zur Funktion _DateFormat()
in der Datei diagram.js hinzufügen.
Anzeigebeispiel: So sieht's aus
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>JavaScript Diagram Builder - Statisches Beispiel</title>
<SCRIPT type="text/javascript">
if ((document.layers)&&(history.length==1)) location.href=location.href+"#";
</SCRIPT>
<SCRIPT type="text/javascript" src="diagram.js"></SCRIPT>
</head>
<body>
<DIV STYLE="position:absolute; top:0"></DIV>
<SCRIPT type="text/javascript">
document.open();
var D1=new Diagram();
D1.SetFrame(90, 50, 600, 270);
D1.SetBorder(
Date.UTC(2001,11,1,8,0,0), Date.UTC(2001,11,1,17,0,0),
Date.UTC(2003,0,1,0,0,0), Date.UTC(2001,11,1,0,0,0));
D1.XScale=2;
D1.YScale=2;
D1.SetText("","", "<B>Unser Telefondienst 2002</B>");
D1.Draw("#C0C080", "#004080", false,"Klicken Sie auf einen Balken, um die Telefonnummer zu erhalten.");
Name=new Array("Peter", "Paul", "Mike");
Job=new Array("Projekt-Manager", "Assistent", "Entwickler");
Color=new Array("#FF0000" ,"#00FF00" ,"#0000FF");
BGColor=new Array("#000000" ,"#000000" ,"#FFFFFF");
Phone=new Array("000-11-23", "123-45-67", "333-66-99");
for (var i=0; i<12; i++) new Bar(
D1.ScreenX(Date.UTC(2001,11,1,8+random(4),30*random(2),0)),
D1.ScreenY(Date.UTC(2002,i,1,0,0,0))-8,
D1.ScreenX(Date.UTC(2001,11,1,13+random(4),30*random(2),0)),
D1.ScreenY(Date.UTC(2002,i,1,0,0,0))+8,
Color[i%3], Name[i%3], BGColor[i%3], Job[i%3], "ShowPhoneNum("+eval(i%3)+")");
function ShowPhoneNum(ii)
{ alert("Wählen Sie "+Phone[ii]+", um mit "+Name[ii]+" zu sprechen.");
}
//2nd diagram
var D2=new Diagram();
D2.SetFrame(90, 330, 500, 520);
D2.SetBorder(Date.UTC(2001,11,1,0,0,0), Date.UTC(2001,11,17,0,0,0), 0, 50);
D2.XScale=2;
D2.SetText("","", "<B>Preise für einige ausgewählte Waren</B>");
D2.Draw("#C0C0FF", "#004080", false);
var Price=25+random(20);
for (i=1; i<=17; i++)
{ Price+=random(3)-1;
new Dot( D2.ScreenX(Date.UTC(2001,11,i,0,0,0)), D2.ScreenY(Price),
12, 0, "#FF0000", Price+" €");
}
Price=20+random(20);
for (i=1; i<=17; i++)
{ Price+=random(3)-1;
new Dot( D2.ScreenX(Date.UTC(2001,11,i,0,0,0)), D2.ScreenY(Price),
12, 1, "#FF8000", Price+" €");
}
Price=15+random(20);
for (i=1; i<=17; i++)
{ Price+=random(3)-1;
new Dot( D2.ScreenX(Date.UTC(2001,11,i,0,0,0)), D2.ScreenY(Price),
12, 2, "#FFFF00", Price+" €");
}
new Bar(520, 380, 600, 400, "#FF0000", "Äpfel", "#000000");
new Bar(520, 420, 600, 440, "#FF8000", "Orangen", "#000000");
new Bar(520, 460, 600, 480, "#FFFF00", "Bananen", "#000000");
document.close();
function random(vv)
{ return(Math.floor(Math.random()*vv));
}
</SCRIPT>
</body>
</html>
Wenn in einem Diagramm eine Zeit-Skale verwendet werden soll, dann muss
bei D.SetBorder(...)die Anzahl der Millisekunden angegeben werden,
die zwischen dem 1.1.1970 und der Ober- bzw. Untergrenze der Skale liegt.
Es ist sinnvoll, dazu die Funktion Date.UTC(...) unmittelbar
als Parameter zu verwenden. Vor dem Zeichnen muss mit D.XScale=2 der Skalentyp
auf Datum/Zeit umgestellt werden. Anstelle von 2 kann auch 3 oder
4 verwendet werden, bei selbstdefienierten Formaten auch noch höhere Parameter.
Die Skalenbeschriftung hat dann gegebenenfalls ein anderes Aussehen.
Wenn in einem Diagramm mit Zeit-Skale noch weitere Objekte dargestellt werden sollen,
kann zur Ermittlung der Bildschirmposition ebenfalls die Funktion Date.UTC(...)
in Verbindung mit ScreenX() und ScreenY() verwendet
werden. Die Variable x=D.ScreenX(Date.UTC(2001,10,11,11,11,0)) entspricht
beispielsweise der Bildschirm-Position in X-Richtung vom 11.11. 11 Uhr 11 des Jahres 2001.
In diesem Beispiel wird eine Funktion, welche im Input-Feld eingegeben wurde, im angegebenen X- und Y-Intervall
dargestellt. Es können die Standard-Operatoren
+ - * / ( )
die Konstanten des JavaScript-Math-Objektes
E LN2 LN10 LOG2E LOG10E PI SQRT1_2 SQRT2
und die Functionen des Math-Objektes
abs acos asin atan ceil cos exp floor log max min pow random round
sin sqrt tan
verwenden werden, um eine Funktion zu definieren.
Zuerst werden beim Laden der Seite ein neues 'Diagram'-Objekt und neue 'Pixel'-Objekte erzeugt.
Nack dem Klicken auf "Zeichnen" werden die Eigenschaften der bereits existierenden Objekte verändert,
um die neue Funktion darzustellen.
Dieses Beispiel wird nur mit IE 5.x oder Netscape 6.x korrekt funktionieren.
Anzeigebeispiel: So sieht's aus
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>JavaScript Diagram Builder - Dynamisches Beispiel</title>
<SCRIPT type="text/javascript">
if ((document.layers)&&(history.length==1)) location.href=location.href+"#";
</SCRIPT>
<SCRIPT type="text/javascript" src="diagram.js"></script>
<SCRIPT type="text/javascript">
if (document.getElementById)
document.write("<SCRIPT Language=\"JavaScript\" SRC=\"evalsave.js\"><\/SCRIPT>");
</SCRIPT>
</head>
<body>
<DIV STYLE="position:absolute; top:0"></DIV>
<form name="inputform">
<TABLE BORDER="0" CELLPADDING="2" CELLSPACING="2" WIDTH="720">
<TR><TD width="40"></TD>
<TD width="50" align=right>x-min:</TD>
<TD width="80" align=left><input name="xmin" value="-4" size="8"></TD>
<TD width="50" align=right>x-max:</TD>
<TD width="80" align=left><input name="xmax" value="4" size="8"></TD>
<TD width="50" align=right>y-min:</TD>
<TD width="80" align=left><input name="ymin" value="-0.2" size="8"></TD>
<TD width="50" align=right>y-max:</TD>
<TD width="80" align=left><input name="ymax" value="0.5" size="8"></TD>
<TD></TD>
</TR>
<TR><TD align=right>y=</TD>
<TD colspan=8 align=left><input name="fx" value="1/sqrt(2*PI)*exp(-x*x/2)+sin(PI*x)/10" size=56></TD>
<TD><input type=button value="Zeichnen" onClick="javascript:Zeichnen()"></TD>
</TR>
</TABLE>
</form>
<SCRIPT type="text/javascript">
document.open();
var D=new Diagram();
D.SetFrame(60, 175, 635, 500);
D.SetBorder(-1, 1, -1, 1);
D.SetText("x","y", "y=f(x)");
D.Draw("#DDDDDD", "#000000", true, "");
var i, j, x, y;
j= D.ScreenY(0);
P=new Array(636);
for (i=60; i<=635; i++)
P[i]=new Pixel(i, j, "#0000FF");
document.close();
function Zeichnen()
{ if (navigator.userAgent.search("Opera")>=0)
{ alert("Sorry, this doesn't work with Opera. Use IE 5.x or Netscape 6.x instead.");
return;
}
if ((navigator.appName=="Netscape")&&(parseInt(navigator.appVersion)<5))
{ if (!confirm("This is not a save operation with Netscape 4.x."+
" It can cause a crash of the browser."+
" Do you want to continue anyway?"))
return;
}
var xmin=parseFloat(document.inputform.xmin.value);
var xmax=parseFloat(document.inputform.xmax.value);
var ymin=parseFloat(document.inputform.ymin.value);
var ymax=parseFloat(document.inputform.ymax.value);
if (isNaN(xmin)) { alert("x-min is not a number"); return; }
else xmin=parseFloat(xmin);
if (isNaN(xmax)) { alert("x-max is not a number"); return; }
else xmax=parseFloat(xmax);
if (isNaN(ymin)) { alert("y-min is not a number"); return; }
else ymin=parseFloat(ymin);
if (isNaN(ymax)) { alert("y-max is not a number"); return; }
else ymax=parseFloat(ymax);
D.SetBorder(xmin, xmax, ymin, ymax);
D.Draw("#DDDDDD", "#000000", true, "y="+document.inputform.fx.value);
for (i=60; i<=635; i++)
{ x = D.RealX(i);
if (window.EvalSave)
{ y=EvalSave(document.inputform.fx.value);
if (y=="")
{ alert(document.inputform.fx.value+" kann nicht ausgewertet werden für x="+x);
return;
}
}
else
{ with (Math) y=eval(document.inputform.fx.value);
}
if ((ymin<=y)&&(y<=ymax)) P[i].MoveTo(i, D.ScreenY(y));
else P[i].SetVisibility(false);
}
}
</SCRIPT>
</body>
</html>
Beim Laden der Seite wird zuerst ein Diagramm im X-Bereich von 60 bis
635 gezeichnet. Danach wird mit P=new Array(636) ein Array von
Variablen erzeugt, welche später als Referenz zu den erzeugten 'Pixel'-Objekten
verwendet werden. Mit for(i=60;i<=635;i++) P[i]=new Pixel(i,j,"#0000FF")
werden 635-60=575 Pixel-Objeke erzeugt, welche zunächst alle auf der Koordinatenachse
y=0 liegen (da j=D.ScreenY(0) ist).
Beim Klicken auf den Button
"Zeichnen" wird die Funktion Zeichnen() aufgerufen. Es werden dabei
zuerst alle Parameter aus der Form ausgelesen und überprüft. Danach wird das Diagramm mit D.SetBorder(xmin,xmax,ymin,ymax)
neu skaliert und mit D.Draw(...) an die selbe Stelle neu gezeichnet.
Mit x=D.RealX(i); wird der zum Pixel-Wert in X-Richtung gehörende reelle
Wert ermittelt und mit y=EvalSave(document.inputform.fx.value) bzw. mit
with (Math) y=eval(document.inputform.fx.value) wird der zugehörige Funktionswert
ermittelt. Die Funktion EvalSave()musste in eine externe Datei ausgelagert,
werden, um sie vor alten Browsern zu verstecken, da sie das Konstrukt
try ... catch ... verwendet, welches bei Netscape 4.7 bereits beim
Parsen zu einem JavaScript-Fehler führt.
Zum Schluß werden die bereits vorhandenen
Pixel-Objekte mit P[i].MoveTo(i, D.ScreenY(j)) an die zum Funktionswert
gehörende Bildschirmposition bewegt, falls diese Position innerhalb der Diagrammgrenzen liegt,
andernfalls werden sie mit P[i].SetVisibility(false) verborgen.
Bitte beachten Sie, dass ein Objekt stets sichtbar ist, nachdem es verschoben wurde oder seine
Größe verändert wurde, daher ist es nicht erforderlich nach dem Aufruf von
P[i].MoveTo(...) die Funktion P[i].SetVisibility(true) aufzurufen.
Um das Funktionsanzeige-Beispiel auch mit älteren oder weniger leistungsfähigen Browsern als IE 5.x
und Netscape 6.x zum Laufen zu bringen, kann man jedoch auch, anstatt dynamisch die Eigenschaften
der Objekte zu ändern, zwei Frames verwenden - der erste für die Eingabe und der zweite
für das Diagramm.
Nach dem Klicken auf "Zeichnen" schreibt der erste Frame die Parameter in Variablen im Parent-window und lädt
den zweiten Frame neu (location.href=url verwenden, nicht history.go(0)!). Der zweite Frame liest die Variablen aus
dem Parent-window und zeichnet das Diagramm mit der Funktion entsprechend der angegebenen Parameter.
Das funktioniert mit allen Browsern.
Anzeigebeispiel: So sieht's aus
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>JavaScript Diagram Builder - Das Objekt 'Diagram'</title>
<SCRIPT type="text/javascript">
if ((document.layers)&&(history.length==1)) location.href=location.href+"#";
</SCRIPT>
<SCRIPT type="text/javascript" src="diagram.js"></SCRIPT>
<SCRIPT type="text/javascript">
if (document.getElementById)
document.write("<SCRIPT Language=\"JavaScript\" SRC=\"evalsave.js\"><\/SCRIPT>");
;</SCRIPT>
</head>
<body>
<DIV STYLE="position:absolute; top:0"></DIV>
<SCRIPT type="text/javascript">
var i, x, y, xmin=parent.xmin, xmax=parent.xmax, ymin=parent.ymin, ymax=parent.ymax, fx=parent.fx;
document.open();
var D=new Diagram();
D.SetFrame(60, 45, 635, 370);
D.SetBorder(xmin, xmax, ymin, ymax);
D.SetText("x","y", "y=f(x)");
D.Draw("#DDDDDD", "#000000", true, "y="+fx);
document.close();
Zeichnen();
function Zeichnen()
{ for (i=60; i<=635; i++)
{ x = D.RealX(i);
if (window.EvalSave)
{ y=EvalSave(fx);
if (y=="")
{ alert(fx+" kann nicht ausgewertet werden für x="+x);
return;
}
}
else
{ with (Math) y=eval(fx);
}
if ((ymin<=y)&&(y<=ymax)) new Pixel(i, D.ScreenY(y), "#0000FF");
}
}
</SCRIPT>
</body>
</html>
Der angezeigte Quellcode entspricht dem im unteren Frame. Beim Laden der Seite werden die
Parameter aus dem parent-window gelesen (xmin=parent.xmin usw.). Der
nachfolgende Code ist mit dem der Funktion Zeichnen() aus dem vorherigen
Beispiel fast identisch. Es wird hier jedoch ein neues 'Diagram'-Objekt und neue
'Pixel'-Objekte erzeugt, anstatt die Eigenschaften bereits vorhandener Objekte zu
verändern.
Der JavaScript Diagram Builder funktioniert ab Version 2.0 mit Microsoft Internet Explorer 5.x, Netscape 6.x, Netscape 4.x und Opera 5.x unter Windows und mit Netscape 6.x, Netscape 4.x und Opera 5.x unter Linux. Die meisten der Methoden, welche dynamisch die Eigenschaften der Objekte ändern, funktionieren nur mit Internet Explorer und Netscape 6 korrekt. Mit dem folgenden Beispiel können die Methoden für die einzelnen Objekte getestet werden.
Anzeigebeispiel: So sieht's aus
Die Funktionsfähigkeit der Methoden für die einzelnen Objekte ist in nachfolgender Tabelle für unterschiedliche Browser und Plattformen dargestellt. Bitte beachten Sie das bei Verwendung von Diagrammen in Ihren Webseiten.
| Windows | Linux | |||||||
|---|---|---|---|---|---|---|---|---|
| Objekt | Methode | IE | N6 | N4 | O5 | N6 | N4 | O5 |
Diagram | Draw |
ja | ja | ja | nein | ja | ja | nein |
SetVisibility |
ja | ja | ja | nein | ja | ja | nein | |
SetTitle |
ja | ja | nein | nein | ja | nein | nein | |
Delete |
ja | ja | ja | nein | ja | ja | nein | |
Bar & Box | SetVisibility |
ja | ja | ja | ja | ja | ja | ja |
SetText |
ja | ja | ja | nein | ja | ja | nein | |
SetTitle |
ja | ja | nein | ja | ja | nein | ja | |
MoveTo |
ja | ja | ja | ja | ja | ja | ja | |
ResizeTo |
ja | ja | ja | nein | ja | ja | nein | |
Delete |
ja | ja | ja | nein | ja | ja | nein | |
Dot | SetVisibility |
ja | ja | ja | ja | ja | ja | ja |
SetTitle |
ja | ja | nein | ja | ja | nein | ja | |
MoveTo |
ja | ja | ja | ja | ja | ja | ja | |
Delete |
ja | ja | ja | nein | ja | ja | nein | |
Pixel | SetVisibility |
ja | ja | ja | ja | ja | ja | ja |
MoveTo |
ja | ja | ja | ja | ja | ja | ja | |
Delete |
ja | ja | ja | nein | ja | ja | nein | |
Wegen eines Fehlers in Netscape 4.x (N4) muss der folgende Code in die Webseite geschrieben werden
bevor die 'Diagram'-Objekte verwendet werden:
<DIV STYLE="position:absolute; top:0"></DIV>
Außerdem muss für N4 die Datei transparent.gif im Verzeichnis der Webseite enthalten sein.
Weiterhin bereitet N4 Probleme wenn eine Seite mit einem Diagramm in ein neues Fenster geöffnet wird, dann wird das
externe Script nicht eingebunden. Um diesen Fehler zu umgehen, muß die Seite neu geladen werden, automatisch
geschieht das mit
<SCRIPT type="text/javascript">if ((document.layers)&&(history.length==1)) location.href=location.href+"#";</SCRIPT>
welches im Head vor dem einzubindenden externen Script eingefügt werden muss.
Tooltip-Text funktioniert prinzipiell nicht mit N4. Das Klicken auf ein 'Bar'- oder 'Box'-Objekt funktioniert nur dann mit
N4, wenn auf den Text geklickt wird.
Bei N4 unter Linux ist es nicht möglich, die absolute Fontgröße zu beeinflussen. Die Objekte werden nur dann korrekt dargestellt, wenn als Standard-Fontgröße "14" eingestellt ist. Folglich werden hier auch alle 'Dot'-Objekte in der gleichen Größe dargestellt, unabhängig vom gewählten Size-Parameter.
Einige Browser drucken nicht die Hintergrundfarbe der Objekte (betrifft 'Diagram', 'Bar' und 'Box').
Wenn Sie ein Diagramm erzeugen wollen, das auch mit Hintergrundfarbe gedruckt werden kann, können Sie den folgenden
Trick benutzen: Zeichnen Sie ein 'Bar'-Objekt, bevor das Diagram gezeichnet wird, an die selbe Position wie das Diagramm und verwenden Sie ein Image-Tag anstelle des Textes beim 'Bar'-Objekt, z. B. so:
BG=new Bar(10, 20, 110, 70, "#FF0000", "<img src='red.gif' width=100 height=50 border=0>", "#000000");
Die letzte Bemerkung betrifft Namen von Variablen, Funktionen und IDs: Der Diagram Builder verwendet einige globale
Variablen und Funktionen, die alle mit dem Zeichen "_" beginnen (z. B. "_
D=new Diagram();
D.SetFrame(10, 20, 110, 70);
...
D.Draw(...);
Draw()"). Um Fehler zu vermeiden, die durch mehrfache Verwendung von Variablen- oder Funktionsnamen verursacht werden, sollten in Ihrem Script keine Namen verwendet
werden, welche mit dem Zeichen "_" beginnen. Zusätzlich werden ID's für die Objekte verwendet, die mit
Dia, Bar, Box, Dot oder Pix beginnen. Verwenden Sie keine ID's in Ihrer HTML-Seite, die mit einer dieser Zeichenketten beginnen (verwenden Sie beispielsweise nicht <div id='Dia1'>...</div>).
Wie schon die Objekt- und Methodennamen vermuten lassen, ist die Original-Version des JavaScript Diagram Builder in englischer Sprache erstellt worden, deshalb wird hier zusätzlich auch eine englische Version der Dokumentation zum Download angeboten. Die aktuelle Versionsnummer ist 2.1.
diagram.zip diagramm.zip Quelltext
