Html生成自定义函数的图形(2024/5/10)

大概效果如下:

可以自定义函数和x的定义域。

我们可以使用数学表达式解析库来解析用户输入的函数方程,并根据给定的 x 区间计算函数的值,然后使用图表库绘制图形。

在这里,我将使用 math.js 库来解析数学表达式,并使用 Chart.js 库来绘制图形。首先,确保你的页面中包含了这两个库:

html 复制代码
<!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>
相关推荐
sucool_lb4 分钟前
GEM5学习(5): ARM 架构功耗仿真
arm开发·学习
尚久龙14 分钟前
安卓学习 之 图片控件和图片按钮
android·java·学习·手机·android studio·安卓
守.护24 分钟前
云计算学习笔记——HTTP服务、NFS服务篇
笔记·学习·云计算
wdfk_prog40 分钟前
[Linux]学习笔记系列 -- lib/dump_stack.c 栈回溯打印(Stack Trace Dumping) 内核调试与错误诊断的基石
linux·运维·服务器·c语言·笔记·学习
i.ajls43 分钟前
无监督学习,推荐系统以及强化学习笔记
笔记·学习·机器学习
dragoooon341 小时前
[优选算法专题二滑动窗口——串联所有单词的子串]
数据结构·c++·学习·算法·leetcode·学习方法
向阳花开_miemie1 小时前
Android音频学习(十七)——音频数据流转
学习·音视频
聆风吟º1 小时前
【Spring Boot 报错已解决】Web server failed to start. Port 8080 was already in use.
spring boot·笔记·技术干货
Suckerbin1 小时前
LAMPSecurity: CTF6靶场渗透
笔记·安全·web安全·网络安全
Brookty1 小时前
【算法】双指针(二)复写零
学习·算法