Die folgende Grafik wurde per JavaScript mit Hilfe des JSG-Moduls generiert. Beachte dass beim Verändern der Fenstergrösse die Grösse der Grafik automatisch neu berechnet und die Grafik neu gezeichnet wird.
var jsg = NewGraph2D( { BorderColor: 'gray', DrawFunc: Draw, AutoScalePix: true, ScaleRef: 650 } ); function Draw(g) { // definiere die Abbildungstransformation g.SetViewportRel( 25, 20, 5, 20, true, false ); g.SetWindow( -1.05, -1.05, 1.05, 1.05 ); // Zeichne hellgraues Gitter g.SetLineAttr( '#CCC', 1 ); g.Grid( 0.1, 0.1 ); // Zeichne die kurzen Striche am Achsenkreuz und am Rahmen g.SetLineAttr( 'black', 1 ); g.TicsX( 0, 0.1, 4, 4 ); g.TicsX( -1.05, 0.1, 4, 0 ); g.TicsY( 0, 0.1, 4, 4 ); g.TicsY( -1.05, 0.1, 4, 0 ); // Zeichne das Achsenkreuz g.SetAreaAttr( 'white', 'black', 2 ); g.Axes( 0, 0, 'Arrow1', 10 ); // Beschrifte die Achsen g.SetTextAttr( 'Arial', 11, 'black', 'normal', 'normal', 'center', 'middle' ); g.TicLabelsX( 0, 0.2, -5, 1, 1, true, false ); g.TicLabelsX( -1.05, 0.2, -3, 1, 1, false, false ); g.TicLabelsY( 0, 0.2, -7, 1, 1, true, false ); g.TicLabelsY( -1.05, 0.2, -4, 1, 1, false, false ); // Zeichne den dicken Rahmen g.SetLineAttr( 'black', 1 ); g.Frame(); // Berechne und Zeichne die rote Figur var x, y; var t = 0.0; var dt = 0.1*Math.PI; var w1 = 0.1; var w2 = 4*w1; g.SetLineAttr( 'red', 2 ); g.PenUp(); while ( t <= 20.001*Math.PI ) { x = Math.sin(w1*t+0.1); y = Math.sin(w2*t); g.LineTo( x, y ); t += dt; } // Zeichne an einigen Stellen auf der Figur Kreis-Markierungen g.SetMarkerAttr( 'Circle', 8, 'black', 'white', 1 ); t = 0; dt = 0.4*Math.PI; while ( t <= 20.001*Math.PI ) { x = Math.sin(w1*t+0.1); y = Math.sin(w2*t); g.Marker( x, y ); t += dt; } // Zeichne den Titel g.SelectTrans( 'canvas' ); g.SetTextAttr( 'Arial', 16, 'black', 'bold', 'normal', 'center', 'top' ); g.Text( 'This is a Title', g.CanvasWidth/2, 1 ); }