関数グラフ要素は、構成可能な軸、塗りつぶし、スタイリングを持つ数学的関数曲線を描画します。式はサンドボックス環境で評価されます。
関数グラフ要素は、基本要素およびビュー要素から共通のフィールドを共有します。
| プロパティ | タイプ | 必須 | 例 | 値の範囲 | 説明 |
|---|---|---|---|---|---|
| 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は、指定されたrange内で与えられた数のsamplesを使って反復します。fillOpacityを0より大きく設定します。1/x）のために、極端なy値をクリップするにはthresholdを使用します。