JsGraph Klasse

}

Die JsGraph Klasse ist die Basis-Klasse für die JsGraph3D Klasse, welche die 2D-Funktion um 3D-Funktionen erweitert.

NewGraph2D()

NewGraph2D( Params )

Params: JsGraphDef

Enthält Werte für alle Attribute, welche nicht ihre Standardwerte bekommen sollen, siehe NewGraph2D() (JSG: Vorlagen)

Return: JsGraph

JsGraphDef

Es können folgende Parameter in Params definiert werden. Alle nicht definierten Parameter erhalten Standardwerte.

}

}

Wenn DrawFunc angegeben wird, wird diese als Callback-Funktion im JsGraph Objekt installiert. Diese Funktion wird gerufen, wenn der Canvas neu gezeichnet werden muss, z.B. nach dem ersten Seitenaufbau oder nach einem Resize des Canvas.

Die Callback-Funktion kann auch mit SetDrawFunc() später installiert werden.

Wird die Breite in Pixel angegeben, wird ein Canvas mit fixer Grösse erzeugt. Wird die Breite in Prozent angegeben, wird ein dynamischer Canvas erzeugt, der seine Grösse mit der Grösse des Browser-Fensters ändert. Die effektive Grösse des Canvas kann über die Properties CanvasWidth, CanvasHeight abgefragt werden.

Beim Aufruf dieser Funktion werden drei verschachtelte HTML-Elemente erzeugt, ein Container DIV, darin ein ClippingBox DIV und darin ein Canvas. Diesen Elementen werden folgende Standard Attribute gegeben:

• Container: Id = 'JsGraph<n>', class = 'bdBoxSizing JsGraph <GraphFormat>'
• ClippingBox: Id = 'JsGraph<n>-ClippingBox', class = 'JsGraph-ClippingBox'
• Canvas: Id = 'JsGraph<n>-Canvas', class = 'JsGraph-Canvas'

Die Id und die Klassen JsGraph und können über die Parameter verändert werden. Die Zusätze '-ClippingBox' und '-Canvas' werden in jedem Fall angehängt. Über die ID und die Klassen können diese Elemente beschränkt mit Styles verändert werden. Zum Beispiel kann ein Style erstellt werden, welcher Standardmässig immer einen hellgrauen Rahmen um den Container zeichnet:

<style>
.JsGraph { border-color: #ddd; }

.bdBoxSizing {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
</style>

Canvas-Id's

Das Canvas besteht eigentlich aus drei verschachtelten Elementen. Das äusserste Element ist ein Div, welches den Rahmen Zeichnet. Das mittlere Element ist ebenfalls ein Div und fungiert als ClippingBox und Container für das Canvas-Element und alle Text-Div's. Das innerste Element ist das eigentliche Canvas selbst. Jedes dieser drei Elemente erhält eine Id, welche von Id wiefolgt abgeleitet ist:

• Id des inneren Canvas-Elementes: Id-Canvas
• Id der ClippingBox: Id-ClippingBox
• Id des äussersten-Div: Id

Beispiel

Wenn man zum Beispiel das Canvas rechtsbündig an den Rand setzen will und der Text der Webseite soll darum herum fliessen, so kann man dies mit einem CSS wiefolgt erreichen, wenn die Id = 'GraphX' ist:

<style>
#GraphX { float:right; margin-left:1em; }
#GraphX-ClippingBox { overflow:hidden; } 
</style>

<script>
var jsg = NewGraph2D( { Id: 'GraphX', Width: 600, Height: 400 } );
jsg.SetViewport( 25, 20, 565, 360 );
jsg.SetWindow( -1.05, -1.05, 1.05, 1.05 );
 :
</script>

Mit der zweiten Zeile im <style>-Tag wird das Clippen von Text am Rand des Canvas-aktiviert (siehe Clipping). Dieses Attribut wird jedoch sowieso gesetzt und braucht nicht in einem Style zusätzlich gesetzt werden.