Phần Tử Đồ Thị Hàm Số

Một phần tử Đồ Thị Hàm Số hiển thị các đường cong hàm toán học với các trục, độ đầy và phong cách có thể cấu hình. Biểu thức được đánh giá trong một môi trường được cách ly.

Các phần tử Đồ Thị Hàm Số chia sẻ các trường chung từ Phần Tử Cơ Bản và Phần Tử Xem.

Thuộc Tính Đồ Thị Hàm Số

Thuộc tính	Loại	Bắt buộc	Ví dụ	Phạm vi giá trị	Mô tả
type	string	true	-	Function Graph	Loại của phần tử. Đối với các phần tử Đồ Thị Hàm Số, điều này luôn là "Đồ Thị Hàm Số".
expression	string	true	Math.sin(x)	-	Biểu thức toán học để vẽ. Sử dụng cú pháp JavaScript Math với x là biến.
range	array	false	[-10, 10]	-	Phạm vi trục x dưới dạng mảng hai phần tử [min, max].
samples	number	false	-	> 0	Số lượng điểm mẫu được sử dụng để vẽ đường cong. Giá trị cao hơn tạo ra các đường cong mượt mà hơn.
thickness	number	false	-	> 0	Độ dày của đường hàm, tính bằng pixel.
color	string	false	-	-	Màu sắc của đường hàm, ở định dạng hex.
backgroundColor	string	false	-	-	Màu nền của khu vực đồ thị, ở định dạng hex.
backgroundOpacity	number	false	-	0 - 1	Độ mờ của nền.
threshold	number	false	-	-	Ngưỡng giá trị y tối đa để cắt. Các điểm vượt quá giá trị này sẽ không được hiển thị.
flipY	boolean	false	-	-	Liệu có đảo ngược hướng trục Y hay không.
fillColor	string	false	-	-	Màu sắc của khu vực dưới đường cong, ở định dạng hex.
fillOpacity	number	false	-	0 - 1	Độ mờ của khu vực làm đầy dưới đường cong. Đặt thành 0 để vô hiệu hóa việc làm đầy.

Thuộc Tính Trục

Thuộc tính	Loại	Bắt buộc	Ví dụ	Phạm vi giá trị	Mô tả
showAxis	boolean	false	-	-	Liệu có hiển thị các trục tọa độ hay không.
axisColor	string	false	-	-	Màu sắc của các đường trục, ở định dạng hex.
axisOpacity	number	false	-	0 - 1	Độ mờ của các đường trục.
axisTickCount	number	false	-	-	Số lượng dấu tick trên mỗi trục.
axisThickness	number	false	-	-	Độ dày của các đường trục, tính bằng pixel.
showAxisArrow	boolean	false	-	-	Liệu có hiển thị đầu mũi tên ở các đầu của các trục hay không.
axisArrowSize	number	false	-	-	Kích thước của các đầu mũi tên trục, tính bằng pixel.

Ví Dụ

Sóng Sin

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
}

Hàm Bậc Hai Đầy

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
}

Ghi Chú

Biểu thức expression được đánh giá trong một môi trường được cách ly với quyền truy cập vào đối tượng JavaScript Math. Sử dụng Math.sin(x), Math.pow(x, 2), Math.exp(x), v.v.
Biến x lặp qua range đã chỉ định với số lượng samples đã cho.
Đặt fillOpacity lớn hơn 0 để làm đầy khu vực giữa đường cong và trục x.
Sử dụng threshold để cắt các giá trị y cực đoan cho các hàm có tiệm cận (ví dụ, 1/x).

Overview

Element

Effect