Elemento Grafico Funzione

Un elemento Grafico Funzione rende curve di funzioni matematiche con assi, riempimento e stile configurabili. L'espressione viene valutata in un ambiente sandbox.

Gli elementi Grafico Funzione condividono i campi comuni da Elemento Base e Elemento Vista.

Proprietà del Grafico Funzione

Proprietà	Tipo	Richiesto	Esempio	Intervallo di valori	Descrizione
type	string	true	-	Function Graph	Il tipo di elemento. Per gli elementi Grafico Funzione, questo è sempre "Grafico Funzione".
expression	string	true	Math.sin(x)	-	L'espressione matematica da tracciare. Usa la sintassi Math di JavaScript con x come variabile.
range	array	false	[-10, 10]	-	Il range dell'asse x come un array a due elementi [min, max].
samples	number	false	-	> 0	Il numero di punti campione utilizzati per tracciare la curva. Valori più alti producono curve più lisce.
thickness	number	false	-	> 0	Lo spessore della curva della funzione, in pixel.
color	string	false	-	-	Il colore della curva della funzione, in formato esadecimale.
backgroundColor	string	false	-	-	Il colore di sfondo dell'area del grafico, in formato esadecimale.
backgroundOpacity	number	false	-	0 - 1	L'opacità dello sfondo.
threshold	number	false	-	-	La soglia massima del valore y per il ritaglio. I punti oltre questo valore non vengono renderizzati.
flipY	boolean	false	-	-	Se invertire la direzione dell'asse Y.
fillColor	string	false	-	-	Il colore di riempimento sotto la curva, in formato esadecimale.
fillOpacity	number	false	-	0 - 1	L'opacità dell'area di riempimento sotto la curva. Imposta a 0 per disabilitare il riempimento.

Proprietà degli Assi

Proprietà	Tipo	Richiesto	Esempio	Intervallo di valori	Descrizione
showAxis	boolean	false	-	-	Se visualizzare gli assi delle coordinate.
axisColor	string	false	-	-	Il colore delle linee degli assi, in formato esadecimale.
axisOpacity	number	false	-	0 - 1	L'opacità delle linee degli assi.
axisTickCount	number	false	-	-	Il numero di tacche su ciascun asse.
axisThickness	number	false	-	-	Lo spessore delle linee degli assi, in pixel.
showAxisArrow	boolean	false	-	-	Se mostrare le punte delle frecce alle estremità degli assi.
axisArrowSize	number	false	-	-	La dimensione delle punte delle frecce degli assi, in pixel.

Esempio

Onda Seno

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
}

Funzione Quadratica Riempita

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
}

Note

L'espressione viene valutata in un ambiente sandbox con accesso all'oggetto JavaScript Math. Usa Math.sin(x), Math.pow(x, 2), Math.exp(x), ecc.
La variabile x itera sul range specificato con il numero dato di samples.
Imposta fillOpacity maggiore di 0 per riempire l'area tra la curva e l'asse x.
Usa threshold per ritagliare valori y estremi per funzioni con asintoti (ad esempio, 1/x).

Overview

Element

Effect