함수 그래프 요소는 구성 가능한 축, 채우기 및 스타일링을 사용하여 수학 함수 곡선을 렌더링합니다. 표현식은 샌드박스 환경에서 평가됩니다.
함수 그래프 요소는 기본 요소 및 뷰 요소에서 공통 필드를 공유합니다.
| 소품 | 유형 | 필수 | 예시 | 값 범위 | 설명 |
|---|---|---|---|---|---|
| type | string | true | - | Function Graph | 요소의 유형입니다. 함수 그래프 요소의 경우 항상 "함수 그래프"입니다. |
| expression | string | true | Math.sin(x) | - | 플롯할 수학적 표현식입니다. x를 변수로 사용하는 JavaScript Math 구문을 사용합니다. |
| range | array | false | [-10, 10] | - | x축 범위로 두 요소 배열 [min, max]입니다. |
| samples | number | false | - | > 0 | 곡선을 플롯하는 데 사용되는 샘플 포인트 수입니다. 값이 높을수록 곡선이 부드럽습니다. |
| thickness | number | false | - | > 0 | 함수 곡선의 선 두께(픽셀 단위)입니다. |
| color | string | false | - | - | 함수 곡선의 색상(16진수 형식)입니다. |
| backgroundColor | string | false | - | - | 그래프 영역의 배경 색상(16진수 형식)입니다. |
| backgroundOpacity | number | false | - | 0 - 1 | 배경의 불투명도입니다. |
| threshold | number | false | - | - | 클립을 위한 최대 y값 임계값입니다. 이 값을 초과하는 점은 렌더링되지 않습니다. |
| flipY | boolean | false | - | - | Y축 방향을 뒤집을지 여부입니다. |
| fillColor | string | false | - | - | 곡선 아래의 채우기 색상(16진수 형식)입니다. |
| fillOpacity | number | false | - | 0 - 1 | 곡선 아래의 영역 채우기 불투명도입니다. 채우기를 비활성화하려면 0으로 설정하세요. |
| 소품 | 유형 | 필수 | 예시 | 값 범위 | 설명 |
|---|---|---|---|---|---|
| showAxis | boolean | false | - | - | 좌표 축을 표시할지 여부입니다. |
| axisColor | string | false | - | - | 축 선의 색상(16진수 형식)입니다. |
| axisOpacity | number | false | - | 0 - 1 | 축 선의 불투명도입니다. |
| axisTickCount | number | false | - | - | 각 축의 눈금 표시 수입니다. |
| axisThickness | number | false | - | - | 축 선의 두께(픽셀 단위)입니다. |
| showAxisArrow | boolean | false | - | - | 축 끝에 화살촉을 표시할지 여부입니다. |
| axisArrowSize | number | false | - | - | 축 화살촉의 크기(픽셀 단위)입니다. |
{
"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
}
{
"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
}
expression은 JavaScript Math 객체에 접근할 수 있는 샌드박스 환경에서 평가됩니다. Math.sin(x), Math.pow(x, 2), Math.exp(x) 등을 사용하세요.x는 주어진 samples 수로 지정된 range를 반복합니다.fillOpacity를 0보다 크게 설정하세요.1/x)의 극단적인 y값을 클립하려면 threshold를 사용하세요.