Overview

ทรัพย์สิน	ประเภท	จำเป็น	ตัวอย่าง	ช่วงค่า	คำอธิบาย
type	string	true	-	Function Graph	ประเภทขององค์ประกอบ สำหรับองค์ประกอบกราฟฟังก์ชัน จะเป็น "Function Graph" เสมอ
expression	string	true	Math.sin(x)	-	นิพจน์ทางคณิตศาสตร์ที่จะพล็อต ใช้ไวยากรณ์ JavaScript Math โดยมี x เป็นตัวแปร
range	array	false	[-10, 10]	-	ช่วงแกน x เป็นอาร์เรย์สององค์ประกอบ [min, max]
samples	number	false	-	> 0	จำนวนจุดตัวอย่างที่ใช้ในการพล็อตเส้นโค้ง ค่าที่สูงกว่าจะทำให้เส้นโค้งเรียบขึ้น
thickness	number	false	-	> 0	ความหนาของเส้นฟังก์ชันในพิกเซล
color	string	false	-	-	สีของเส้นฟังก์ชันในรูปแบบเฮกซ์
backgroundColor	string	false	-	-	สีพื้นหลังของพื้นที่กราฟในรูปแบบเฮกซ์
backgroundOpacity	number	false	-	0 - 1	ความโปร่งใสของพื้นหลัง
threshold	number	false	-	-	ค่าขีดสูงสุดของ y สำหรับการตัดแต่ง จุดที่เกินค่านี้จะไม่ถูกแสดง
flipY	boolean	false	-	-	ว่าจะกลับทิศทางแกน Y หรือไม่
fillColor	string	false	-	-	สีเติมใต้เส้นโค้งในรูปแบบเฮกซ์
fillOpacity	number	false	-	0 - 1	ความโปร่งใสของพื้นที่เติมใต้เส้นโค้ง ตั้งค่าเป็น 0 เพื่อปิดการเติม

คุณสมบัติของแกน

ทรัพย์สิน	ประเภท	จำเป็น	ตัวอย่าง	ช่วงค่า	คำอธิบาย
showAxis	boolean	false	-	-	ว่าจะแสดงแกนพิกัดหรือไม่
axisColor	string	false	-	-	สีของเส้นแกนในรูปแบบเฮกซ์
axisOpacity	number	false	-	0 - 1	ความโปร่งใสของเส้นแกน
axisTickCount	number	false	-	-	จำนวนเครื่องหมายติ๊กบนแต่ละแกน
axisThickness	number	false	-	-	ความหนาของเส้นแกนในพิกเซล
showAxisArrow	boolean	false	-	-	ว่าจะมีหัวลูกศรที่ปลายของแกนหรือไม่
axisArrowSize	number	false	-	-	ขนาดของหัวลูกศรแกนในพิกเซล

ตัวอย่าง

คลื่นไซน์

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
}

ฟังก์ชันพหุนามที่เติมเต็ม

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
}

หมายเหตุ

expression จะถูกประเมินในสภาพแวดล้อมที่ถูกแยกออกโดยเข้าถึงวัตถุ JavaScript Math ใช้ Math.sin(x), Math.pow(x, 2), Math.exp(x), เป็นต้น
ตัวแปร x จะวนรอบตาม range ที่กำหนดด้วยจำนวน samples ที่กำหนด
ตั้งค่า fillOpacity ให้มากกว่า 0 เพื่อเติมพื้นที่ระหว่างเส้นโค้งและแกน x
ใช้ threshold เพื่อตัดค่าของ y ที่สุดขีดสำหรับฟังก์ชันที่มีอสมการ (เช่น 1/x)