Elemento Gráfico de Função

Um elemento Gráfico de Função renderiza curvas de funções matemáticas com eixos, preenchimento e estilo configuráveis. A expressão é avaliada em um ambiente isolado.

Os elementos Gráficos de Função compartilham os campos comuns do Elemento Básico e Elemento de Visualização.

Propriedades do Gráfico de Função

Propriedade	Tipo	Necessário	Exemplo	Faixa de Valores	Descrição
type	string	true	-	Function Graph	O tipo do elemento. Para elementos Gráficos de Função, isso é sempre "Gráfico de Função".
expression	string	true	Math.sin(x)	-	A expressão matemática a ser plotada. Usa a sintaxe Math do JavaScript com x como a variável.
range	array	false	[-10, 10]	-	O intervalo do eixo x como um array de dois elementos [min, max].
samples	number	false	-	> 0	O número de pontos de amostra usados para plotar a curva. Valores mais altos produzem curvas mais suaves.
thickness	number	false	-	> 0	A espessura da linha da curva da função, em pixels.
color	string	false	-	-	A cor da curva da função, em formato hexadecimal.
backgroundColor	string	false	-	-	A cor de fundo da área do gráfico, em formato hexadecimal.
backgroundOpacity	number	false	-	0 - 1	A opacidade do fundo.
threshold	number	false	-	-	Limite máximo de y para recorte. Pontos além desse valor não são renderizados.
flipY	boolean	false	-	-	Se deve inverter a direção do eixo Y.
fillColor	string	false	-	-	A cor de preenchimento sob a curva, em formato hexadecimal.
fillOpacity	number	false	-	0 - 1	A opacidade da área de preenchimento sob a curva. Defina como 0 para desativar o preenchimento.

Propriedades do Eixo

Propriedade	Tipo	Necessário	Exemplo	Faixa de Valores	Descrição
showAxis	boolean	false	-	-	Se deve exibir os eixos de coordenadas.
axisColor	string	false	-	-	A cor das linhas do eixo, em formato hexadecimal.
axisOpacity	number	false	-	0 - 1	A opacidade das linhas do eixo.
axisTickCount	number	false	-	-	O número de marcas de graduação em cada eixo.
axisThickness	number	false	-	-	A espessura das linhas do eixo, em pixels.
showAxisArrow	boolean	false	-	-	Se deve mostrar cabeçotes de seta nas extremidades dos eixos.
axisArrowSize	number	false	-	-	O tamanho dos cabeçotes de seta do eixo, em pixels.

Exemplo

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
}

Função Quadrática Preenchida

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

A expressão é avaliada em um ambiente isolado com acesso ao objeto JavaScript Math. Use Math.sin(x), Math.pow(x, 2), Math.exp(x), etc.
A variável x itera sobre o intervalo especificado com o número dado de amostras.
Defina fillOpacity maior que 0 para preencher a área entre a curva e o eixo x.
Use threshold para recortar valores extremos de y para funções com assíntotas (por exemplo, 1/x).

Overview

Element

Effect