Élément Graphique de Fonction

Un élément graphique de fonction rend des courbes de fonctions mathématiques avec des axes, un remplissage et un style configurables. L'expression est évaluée dans un environnement isolé.

Les éléments graphiques de fonction partagent les champs communs de Élément de Base et Élément de Vue.

Propriétés de l'Élément Graphique de Fonction

Propriété	Type	Requis	Exemple	Plage de valeurs	Description
type	string	true	-	Function Graph	Le type de l'élément. Pour les éléments graphiques de fonction, c'est toujours "Graphique de Fonction".
expression	string	true	Math.sin(x)	-	L'expression mathématique à tracer. Utilise la syntaxe Math de JavaScript avec x comme variable.
range	array	false	[-10, 10]	-	La plage de l'axe des x sous forme de tableau à deux éléments [min, max].
samples	number	false	-	> 0	Le nombre de points d'échantillonnage utilisés pour tracer la courbe. Des valeurs plus élevées produisent des courbes plus lisses.
thickness	number	false	-	> 0	L'épaisseur de la ligne de la courbe de fonction, en pixels.
color	string	false	-	-	La couleur de la courbe de fonction, au format hexadécimal.
backgroundColor	string	false	-	-	La couleur de fond de la zone du graphique, au format hexadécimal.
backgroundOpacity	number	false	-	0 - 1	L'opacité de l'arrière-plan.
threshold	number	false	-	-	Seuil maximum de valeur y pour le clipping. Les points au-delà de cette valeur ne sont pas rendus.
flipY	boolean	false	-	-	Si l'on doit inverser la direction de l'axe Y.
fillColor	string	false	-	-	La couleur de remplissage sous la courbe, au format hexadécimal.
fillOpacity	number	false	-	0 - 1	L'opacité de la zone de remplissage sous la courbe. Définir à 0 pour désactiver le remplissage.

Propriétés des Axes

Propriété	Type	Requis	Exemple	Plage de valeurs	Description
showAxis	boolean	false	-	-	Si l'on doit afficher les axes de coordonnées.
axisColor	string	false	-	-	La couleur des lignes des axes, au format hexadécimal.
axisOpacity	number	false	-	0 - 1	L'opacité des lignes des axes.
axisTickCount	number	false	-	-	Le nombre de marques de graduation sur chaque axe.
axisThickness	number	false	-	-	L'épaisseur des lignes des axes, en pixels.
showAxisArrow	boolean	false	-	-	Si l'on doit montrer des flèches aux extrémités des axes.
axisArrowSize	number	false	-	-	La taille des flèches des axes, en pixels.

Exemple

Onde Sinusoïdale

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
}

Fonction Quadratique Remplie

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
}

Remarques

L'expression est évaluée dans un environnement isolé avec accès à l'objet JavaScript Math. Utilisez Math.sin(x), Math.pow(x, 2), Math.exp(x), etc.
La variable x itère sur la plage spécifiée avec le nombre donné de samples.
Définissez fillOpacity supérieur à 0 pour remplir la zone entre la courbe et l'axe des x.
Utilisez threshold pour couper les valeurs y extrêmes pour les fonctions avec des asymptotes (par exemple, 1/x).

Overview

Element

Effect