大概效果如下：
可以自定義函數和x的定義域。
我們可以使用數學表達式解析庫來解析用戶輸入的函數方程，并根據給定的 x 區間計算函數的值，然后使用圖表庫繪制圖形。
在這里，我將使用 math.js 庫來解析數學表達式，并使用 Chart.js 庫來繪制圖形。首先，確保你的頁面中包含了這兩個庫：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Plot Function Graph</title><script src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/9.4.4/math.min.js"></script><script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body><label for="functionInput">Enter Function:</label><input type="text" id="functionInput" placeholder="e.g., sin(x)"><br><label for="startX">Start X:</label><input type="number" id="startX" value="-10"><label for="endX">End X:</label><input type="number" id="endX" value="10"><br><button onclick="plotGraph()">Plot Graph</button><canvas id="myChart" width="400" height="200"></canvas><script>function plotGraph() {// 獲取用戶輸入的函數和 x 區間var userInputFunction = document.getElementById('functionInput').value;var startX = parseFloat(document.getElementById('startX').value);var endX = parseFloat(document.getElementById('endX').value);// 解析用戶輸入的函數var parser = math.parser();parser.evaluate('f(x) = ' + userInputFunction);// 計算函數值var data = [];for (var x = startX; x <= endX; x += 0.1) {var y = parser.evaluate('f(' + x + ')');data.push({x: x, y: y});}// 繪制圖表var ctx = document.getElementById('myChart').getContext('2d');var myChart = new Chart(ctx, {type: 'line',data: {datasets: [{label: 'Function Graph',data: data,fill: false,borderColor: 'rgb(75, 192, 192)',tension: 0.1}]},options: {scales: {x: {type: 'linear',position: 'bottom'},y: {beginAtZero: true}}}});}</script>
</body>
</html>
)
)
