Functie Grafiek Element

Een Functie Grafiek element rendert wiskundige functiecurves met configureerbare assen, opvulling en styling. De expressie wordt geëvalueerd in een sandbox-omgeving.

Functie Grafiek elementen delen de gemeenschappelijke velden van Basis Element en Weergave Element.

Functie Grafiek Eigenschappen

Eigenschap	Type	Vereist	Voorbeeld	Waardenbereik	Omschrijving
type	string	true	-	Function Graph	Het type van het element. Voor Functie Grafiek elementen is dit altijd "Functie Grafiek".
expression	string	true	Math.sin(x)	-	De wiskundige expressie om te plotten. Gebruikt JavaScript Math-syntaxis met x als de variabele.
range	array	false	[-10, 10]	-	Het bereik van de x-as als een array met twee elementen [min, max].
samples	number	false	-	> 0	Het aantal monsterpunten dat wordt gebruikt om de curve te plotten. Hogere waarden produceren soepelere curves.
thickness	number	false	-	> 0	De lijndikte van de functiecurve, in pixels.
color	string	false	-	-	De kleur van de functiecurve, in hex-formaat.
backgroundColor	string	false	-	-	De achtergrondkleur van het grafiekgebied, in hex-formaat.
backgroundOpacity	number	false	-	0 - 1	De opaciteit van de achtergrond.
threshold	number	false	-	-	Maximale y-waarde drempel voor knippen. Punten voorbij deze waarde worden niet weergegeven.
flipY	boolean	false	-	-	Of de Y-as richting omgekeerd moet worden.
fillColor	string	false	-	-	De opvulkleur onder de curve, in hex-formaat.
fillOpacity	number	false	-	0 - 1	De opaciteit van de gebiedsopvulling onder de curve. Stel in op 0 om opvulling uit te schakelen.

As Eigenschappen

Eigenschap	Type	Vereist	Voorbeeld	Waardenbereik	Omschrijving
showAxis	boolean	false	-	-	Of de coördinaatassen moeten worden weergegeven.
axisColor	string	false	-	-	De kleur van de aslijnen, in hex-formaat.
axisOpacity	number	false	-	0 - 1	De opaciteit van de aslijnen.
axisTickCount	number	false	-	-	Het aantal tickmarks op elke as.
axisThickness	number	false	-	-	De dikte van de aslijnen, in pixels.
showAxisArrow	boolean	false	-	-	Of pijlpunten aan de uiteinden van de assen moeten worden weergegeven.
axisArrowSize	number	false	-	-	De grootte van de aspijlpunten, in pixels.

Voorbeeld

Sinusgolf

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
}

Opgevulde Kwadratische Functie

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
}

Opmerkingen

De expressie wordt geëvalueerd in een sandbox-omgeving met toegang tot het JavaScript Math object. Gebruik Math.sin(x), Math.pow(x, 2), Math.exp(x), enz.
De variabele x iterates over het gespecificeerde bereik met het gegeven aantal monsters.
Stel fillOpacity in op meer dan 0 om het gebied tussen de curve en de x-as op te vullen.
Gebruik threshold om extreme y-waarden te knippen voor functies met asymptoten (bijv. 1/x).

Overview

Element

Effect