Elemento de Gráfico de Función

Un elemento de Gráfico de Función renderiza curvas de funciones matemáticas con ejes, relleno y estilo configurables. La expresión se evalúa en un entorno aislado.

Los elementos de Gráfico de Función comparten los campos comunes de Elemento Básico y Elemento de Vista.

Propiedades del Gráfico de Función

Prop	Tipo	Requerido	Ejemplo	Rango de Valores	Descripción
type	string	true	-	Function Graph	El tipo de elemento. Para los elementos de Gráfico de Función, esto es siempre "Gráfico de Función".
expression	string	true	Math.sin(x)	-	La expresión matemática a graficar. Usa la sintaxis de Math de JavaScript con x como variable.
range	array	false	[-10, 10]	-	El rango del eje x como un array de dos elementos [min, max].
samples	number	false	-	> 0	El número de puntos de muestra utilizados para graficar la curva. Valores más altos producen curvas más suaves.
thickness	number	false	-	> 0	El grosor de la línea de la curva de función, en píxeles.
color	string	false	-	-	El color de la curva de función, en formato hexadecimal.
backgroundColor	string	false	-	-	El color de fondo del área del gráfico, en formato hexadecimal.
backgroundOpacity	number	false	-	0 - 1	La opacidad del fondo.
threshold	number	false	-	-	Umbral máximo de valor y para recorte. Los puntos más allá de este valor no se renderizan.
flipY	boolean	false	-	-	Si se debe invertir la dirección del eje Y.
fillColor	string	false	-	-	El color de relleno debajo de la curva, en formato hexadecimal.
fillOpacity	number	false	-	0 - 1	La opacidad del área de relleno debajo de la curva. Establecer en 0 para desactivar el relleno.

Propiedades del Eje

Prop	Tipo	Requerido	Ejemplo	Rango de Valores	Descripción
showAxis	boolean	false	-	-	Si se deben mostrar los ejes de coordenadas.
axisColor	string	false	-	-	El color de las líneas de los ejes, en formato hexadecimal.
axisOpacity	number	false	-	0 - 1	La opacidad de las líneas de los ejes.
axisTickCount	number	false	-	-	El número de marcas en cada eje.
axisThickness	number	false	-	-	El grosor de las líneas de los ejes, en píxeles.
showAxisArrow	boolean	false	-	-	Si se deben mostrar cabezas de flecha en los extremos de los ejes.
axisArrowSize	number	false	-	-	El tamaño de las cabezas de flecha de los ejes, en píxeles.

Ejemplo

Onda Senoidal

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
}

Función Cuadrática Rellena

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
}

Notas

La expresión se evalúa en un entorno aislado con acceso al objeto JavaScript Math. Usa Math.sin(x), Math.pow(x, 2), Math.exp(x), etc.
La variable x itera sobre el rango especificado con el número dado de muestras.
Establece fillOpacity mayor que 0 para rellenar el área entre la curva y el eje x.
Usa threshold para recortar valores y extremos y para funciones con asíntotas (por ejemplo, 1/x).

Overview

Element

Effect