Funktion Graph Element

Ein Funktion Graph Element rendert mathematische Funktionskurven mit konfigurierbaren Achsen, Füllungen und Stilen. Der Ausdruck wird in einer sandboxed Umgebung ausgewertet.

Funktion Graph Elemente teilen die gemeinsamen Felder von Basis Element und Ansichts Element.

Eigenschaften des Funktion Graphs

Eigenschaft	Typ	Erforderlich	Beispiel	Wertbereich	Beschreibung
type	string	true	-	Function Graph	Der Typ des Elements. Für Funktion Graph Elemente ist dies immer "Funktion Graph".
expression	string	true	Math.sin(x)	-	Der mathematische Ausdruck, der geplottet werden soll. Verwendet die JavaScript Math-Syntax mit x als Variable.
range	array	false	[-10, 10]	-	Der x-Achsenbereich als ein zweielementiges Array [min, max].
samples	number	false	-	> 0	Die Anzahl der Stichprobenpunkte, die verwendet werden, um die Kurve zu plotten. Höhere Werte erzeugen glattere Kurven.
thickness	number	false	-	> 0	Die Linienstärke der Funktionskurve in Pixeln.
color	string	false	-	-	Die Farbe der Funktionskurve im Hex-Format.
backgroundColor	string	false	-	-	Die Hintergrundfarbe des Graphbereichs im Hex-Format.
backgroundOpacity	number	false	-	0 - 1	Die Opazität des Hintergrunds.
threshold	number	false	-	-	Maximaler y-Wert-Schwellenwert für das Beschneiden. Punkte jenseits dieses Wertes werden nicht gerendert.
flipY	boolean	false	-	-	Ob die Y-Achsenrichtung umgekehrt werden soll.
fillColor	string	false	-	-	Die Füllfarbe unter der Kurve im Hex-Format.
fillOpacity	number	false	-	0 - 1	Die Opazität der Flächenfüllung unter der Kurve. Setzen Sie auf 0, um die Füllung zu deaktivieren.

Eigenschaften der Achsen

Eigenschaft	Typ	Erforderlich	Beispiel	Wertbereich	Beschreibung
showAxis	boolean	false	-	-	Ob die Koordinatenachsen angezeigt werden sollen.
axisColor	string	false	-	-	Die Farbe der Achsenlinien im Hex-Format.
axisOpacity	number	false	-	0 - 1	Die Opazität der Achsenlinien.
axisTickCount	number	false	-	-	Die Anzahl der Tickmarken auf jeder Achse.
axisThickness	number	false	-	-	Die Dicke der Achsenlinien in Pixeln.
showAxisArrow	boolean	false	-	-	Ob Pfeilspitzen an den Enden der Achsen angezeigt werden sollen.
axisArrowSize	number	false	-	-	Die Größe der Achsenpfeilspitzen in Pixeln.

Beispiel

Sinuswelle

functionGraphElement.json

 
{
  "id": "graph-001",
  "type": "Function Graph",
  "start": 0,
  "duration": 5,
  "trackIndex": 0,
  "x": 200,
  "y": 200,
  "width": 400,
  "height": 200,
  "anchorX": 200,
  "anchorY": 100,
  "rotation": 0,
  "scaleX": 1,
  "scaleY": 1,
  "alpha": 1,
  "expression": "Math.sin(x)",
  "range": [-10, 10],
  "samples": 200,
  "thickness": 2,
  "color": "#C55F73",
  "backgroundColor": "#000000",
  "backgroundOpacity": 1,
  "showAxis": true,
  "axisColor": "#ffffff",
  "axisTickCount": 10
}

Ausgefüllte quadratische Funktion

functionGraphFilled.json

 
{
  "id": "graph-002",
  "type": "Function Graph",
  "start": 0,
  "duration": 8,
  "trackIndex": 0,
  "x": 300,
  "y": 250,
  "width": 500,
  "height": 300,
  "anchorX": 250,
  "anchorY": 150,
  "rotation": 0,
  "scaleX": 1,
  "scaleY": 1,
  "alpha": 1,
  "expression": "x * x - 4",
  "range": [-5, 5],
  "samples": 300,
  "thickness": 3,
  "color": "#4A90E2",
  "fillColor": "#4A90E2",
  "fillOpacity": 0.3,
  "backgroundColor": "#1a1a2e",
  "backgroundOpacity": 0.9,
  "showAxis": true,
  "axisColor": "#cccccc",
  "axisThickness": 2,
  "showAxisArrow": true,
  "axisArrowSize": 10
}

Hinweise

Der Ausdruck wird in einer sandboxed Umgebung mit Zugriff auf das JavaScript Math Objekt ausgewertet. Verwenden Sie Math.sin(x), Math.pow(x, 2), Math.exp(x), usw.
Die Variable x iteriert über den angegebenen Bereich mit der gegebenen Anzahl von Proben.
Setzen Sie fillOpacity größer als 0, um den Bereich zwischen der Kurve und der x-Achse auszufüllen.
Verwenden Sie threshold, um extreme y-Werte für Funktionen mit Asymptoten (z.B. 1/x) zu beschneiden.

Overview

Element

Effect