WaBis

walter.bislins.ch

JSG: JsGraph

JsGraph ist die Haupt-Klasse des JsGraph-Moduls. Für Properties und Funktionen der JsGraph Klasse siehe:

JsGraph Klasse

JsGraph = {
siehe: Properties;
}

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() (Ziel-SeiteJSG: Vorlagen)
Return: JsGraph

JsGraphDef

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

GraphDef = {
Id: String; Optional; Default = 'JsGraph<n>'
HTML-ID für den Canvas, wobei <n> eine laufende Nummer ab 1 ist
Width: Integer(>1) or String; Optional; Default = '100%'
Breite des Div-Elementes in Pixel oder Prozent. Für Pixel-Angaben kann eine ganze Zahl oder ein String übergeben werden, für Prozent-Angaben muss ein String der Form '100%' angegeben werden. 100% Breite entspricht der Breite des übergeordnete Container-Elements.
Height: Integer(>1) or String; Optional; Default = '75%'
Höhe des Div-Elementes in Pixel oder Prozent der Breite. Für Pixel-Angaben kann eine ganze Zahl oder ein String übergeben werden, für Prozent-Angaben muss ein String der Form '33%' übergeben werden. Die Höhe bezieht sich auf die Breite des Canvas und wird dynamisch angepasst bei einem Resize des Browser-Fensters.
BorderWidth: Integer(>0); Optional; Default = 1
Breite des Rahmens um den Canvas in Pixel
BorderColor: String; Optional; Default = ''
Farbe des Rahmens, falls BorderWidth > 0 ist. Wenn nicht angegeben, gilt die Standardfarbe der Klasse JsGraph
GraphClass: String; Optional; Default = 'JsGraph'
Der Grafik-Container erhält diese Klasse. Die inneren Elemente erhalten davon abgeleitet Klassen
GraphFormat: String; Optional; Default = ''
Zusätzliche Klasse für den Container, z.B: 'VMargin' für einen Abstand oben und unten zu anderen Elementen
DrawFunc: Function or null; Optional; Default = null
Function(JsGraph), in welcher die Grafik gezeichnet wird → SetDrawFunc()
DeferedDrawFunc: Function or null; Optional; Default = null
Function(JsGraph), die mit der Verzögerung DeferedDrawTime nach der DrawFunc gerufen wird → SetDeferedDrawFunc()
DeferedDrawTime: Integer(>0); Optional; Default = 50
Verzögerung zwischen dem Aufruf von DrawFunc und DeferedDrawFunc.
BeforeResetFunc: Function or null; Optional; Default = null
Function(JsGraph), welche vor der DrawFunc und gerufen wird, noch bevor intern die Funktion Reset() gerufen wird.
OnClick: Function or null; Optional; Default = null
Function(xEvent,JsGraph), welche bei einem Klick in den Canvas gerufen werden soll → AddEventHandler()
EventHandlers: Array of EventHandlerDef; Optional; Default = undefined
Eine Liste von Eventhandler für den Canvas
AutoReset: boolean; Optional; Default = true
Wenn true wird vor dem Aufruf der DrawFunc die Funktion Reset() gerufen.
AutoRedrawOnImgLoad: boolean; Optional; Default = true
Siehe DrawImage()
HighResolution: Boolean; Optional; Default = true
true → Zeichnet auf Retina-Displays in hoher Auflösung (langsamer).
ScaleRef: Integer(>0); Optional; Default = 800
Referenzbreite des Containers in Pixel → SetScaleRef()
AutoScalePix: Boolean; Optional; Default = false
true → Skaliert Pixelwerte entsprechend ScaleRef → ScalePix()
LimitScalePix: Boolean; Optional; Default = true
true → Skalierung vergrössert nicht, verkleinert nur → ScalePix()
ScalePixInt: Boolean; Optional; Default = false
true → automatisches ScalePix() liefert immer ganze Zahlen
MinLineWidth: Number(>0); Optional; Default = 0.5
Minimale Strickdicke bei automatischem ScalePix()
MinTextSize: Number(>0); Optional; Default = 1
Minimale Textgrösse bei automatischem ScalePix()
MinMarkerSize: Number(>0); Optional; Default = 1
Minimale Grösser der Markersymbole bei automatischem ScalePix()
DefaultAttrs: JsgAttrs; Optional; Default = {}
Standardwerte für diverse Attribute → SetAttrs()
}
EventHandlerDef = {
Event: String;
Event-Typ siehe JavaScript addEventListener(), z.B. 'click'
Func: Function(xEvent,JsGraph);
Event Handler Funktion
Capture: Boolean; Optional; Default = false
siehe addEventListener()
}

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.

Weitere Infos zur Seite
Erzeugt Dienstag, 2. Februar 2016
von wabis
Zum Seitenanfang
Geändert Mittwoch, 14. Februar 2018
von wabis