deepseek v3-0324实现数学方程式绘制曲线功能
以下是一个使用纯HTML、CSS和国内可访问的JavaScript库（使用MathJax和ECharts）渲染数学方程式的网页代码：这个HTML页面具有以下特点：美观的界面设计：使用了现代化的CSS样式，包括圆角、阴影和柔和的颜色功能完整：使用的国内可访问的JS库：响应式设计：适应不同屏幕大小交互功能：注意：这个实现对于简单方程效果很好，但对于复杂方程可能需要更复杂的解析器。如果需要更强大的数学表
·
以下是一个使用纯HTML、CSS和国内可访问的JavaScript库（使用MathJax和ECharts）渲染数学方程式的网页代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>数学方程式可视化</title>
<!-- 使用国内CDN引入ECharts -->
<!-- 使用国内CDN引入ECharts -->
<!-- <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script> -->
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.3/echarts.min.js"></script>
<!-- 使用国内CDN引入MathJax -->
<!-- <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script> -->
<script src="https://cdn.bootcdn.net/ajax/libs/mathjax/3.2.2/es5/tex-mml-chtml.min.js"></script>
<style>
body {
font-family: 'Microsoft YaHei', sans-serif;
margin: 0;
padding: 20px;
background-color: #f5f7fa;
color: #333;
}
.container {
max-width: 900px;
margin: 0 auto;
background-color: white;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
padding: 20px;
}
h1 {
color: #2c3e50;
text-align: center;
margin-bottom: 30px;
}
.input-area {
display: flex;
gap: 10px;
margin-bottom: 20px;
}
#equation-input {
flex: 1;
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
font-size: 16px;
}
button {
padding: 10px 20px;
background-color: #3498db;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
transition: background-color 0.3s;
}
button:hover {
background-color: #2980b9;
}
.equation-display {
text-align: center;
margin: 20px 0;
padding: 15px;
background-color: #f8f9fa;
border-radius: 5px;
min-height: 50px;
}
#chart-container {
width: 100%;
height: 500px;
margin-top: 20px;
}
.controls {
display: flex;
justify-content: space-between;
margin-top: 10px;
}
.zoom-controls {
display: flex;
gap: 10px;
}
</style>
</head>
<body>
<div class="container">
<h1>数学方程式可视化工具</h1>
<div class="input-area">
<input type="text" id="equation-input" placeholder="输入方程式，例如: y=x^2+1, sin(x), x^2+y^2=1" value="y=x^2+1">
<button id="plot-button">绘制图形</button>
</div>
<div class="equation-display">
<div id="equation-render"></div>
</div>
<div id="chart-container"></div>
<div class="controls">
<div class="zoom-controls">
<button id="zoom-in">放大</button>
<button id="zoom-out">缩小</button>
<button id="reset-zoom">重置</button>
</div>
<div>
<label for="x-range">X轴范围: </label>
<input type="number" id="x-min" value="-5" step="1" style="width: 50px;">
<span> 到 </span>
<input type="number" id="x-max" value="5" step="1" style="width: 50px;">
</div>
</div>
</div>
<script>
// 初始化图表
const chartDom = document.getElementById('chart-container');
const myChart = echarts.init(chartDom);
// 默认选项
let option = {
title: {
text: '函数图像',
left: 'center'
},
tooltip: {
trigger: 'axis',
formatter: (params) => {
return `x: ${params[0].value[0].toFixed(2)}<br>y: ${params[0].value[1].toFixed(2)}`;
}
},
xAxis: {
name: 'x',
type: 'value',
min: -5,
max: 5,
axisLine: { lineStyle: { color: '#2c3e50' } }
},
yAxis: {
name: 'y',
type: 'value',
min: -10,
max: 10,
axisLine: { lineStyle: { color: '#2c3e50' } }
},
series: [],
grid: {
left: '10%',
right: '10%',
bottom: '15%',
top: '20%',
containLabel: true
},
animation: true
};
// 绘制函数图像
function plotFunction(equation) {
// 更新显示的方程
document.getElementById('equation-render').innerHTML = `$$${equation}$$`;
MathJax.typeset();
// 解析方程
let func;
try {
// 简单处理方程，实际应用中应该使用更复杂的解析器
if (equation.startsWith('y=')) {
const expr = equation.substring(2);
func = new Function('x', `return ${expr.replace(/\^/g, '**')}`);
} else if (equation.includes('=')) {
// 隐式方程处理更复杂，这里简化处理
alert('暂不支持隐式方程，请输入y=f(x)形式的方程');
return;
} else {
func = new Function('x', `return ${equation.replace(/\^/g, '**')}`);
}
} catch (e) {
alert('方程解析错误: ' + e.message);
return;
}
// 获取X轴范围
const xMin = parseFloat(document.getElementById('x-min').value);
const xMax = parseFloat(document.getElementById('x-max').value);
// 生成数据点
const data = [];
const step = (xMax - xMin) / 500;
for (let x = xMin; x <= xMax; x += step) {
try {
const y = func(x);
if (isFinite(y)) {
data.push([x, y]);
}
} catch (e) {
// 忽略计算错误
}
}
// 更新图表选项
option.xAxis.min = xMin;
option.xAxis.max = xMax;
// 自动计算Y轴范围
const yValues = data.map(item => item[1]);
const yMin = Math.min(...yValues);
const yMax = Math.max(...yValues);
const yPadding = Math.max(1, (yMax - yMin) * 0.1);
option.yAxis.min = yMin - yPadding;
option.yAxis.max = yMax + yPadding;
option.series = [{
name: equation,
type: 'line',
showSymbol: false,
smooth: true,
lineStyle: {
width: 3,
color: '#e74c3c'
},
data: data
}];
myChart.setOption(option, true);
}
// 事件监听
document.getElementById('plot-button').addEventListener('click', () => {
const equation = document.getElementById('equation-input').value.trim();
if (equation) {
plotFunction(equation);
}
});
document.getElementById('zoom-in').addEventListener('click', () => {
option.xAxis.min *= 0.8;
option.xAxis.max *= 0.8;
option.yAxis.min *= 0.8;
option.yAxis.max *= 0.8;
myChart.setOption(option);
});
document.getElementById('zoom-out').addEventListener('click', () => {
option.xAxis.min *= 1.2;
option.xAxis.max *= 1.2;
option.yAxis.min *= 1.2;
option.yAxis.max *= 1.2;
myChart.setOption(option);
});
document.getElementById('reset-zoom').addEventListener('click', () => {
const xMin = parseFloat(document.getElementById('x-min').value);
const xMax = parseFloat(document.getElementById('x-max').value);
option.xAxis.min = xMin;
option.xAxis.max = xMax;
// 重新计算Y轴范围
const series = option.series[0];
if (series && series.data) {
const yValues = series.data.map(item => item[1]);
const yMin = Math.min(...yValues);
const yMax = Math.max(...yValues);
const yPadding = Math.max(1, (yMax - yMin) * 0.1);
option.yAxis.min = yMin - yPadding;
option.yAxis.max = yMax + yPadding;
}
myChart.setOption(option);
});
// 初始绘制
window.addEventListener('load', () => {
plotFunction('y=x^2+1');
});
// 响应式调整
window.addEventListener('resize', function() {
myChart.resize();
});
</script>
</body>
</html>
这个HTML页面具有以下特点：
-
美观的界面设计：使用了现代化的CSS样式，包括圆角、阴影和柔和的颜色
-
功能完整：
- 可以输入各种数学方程式（如y=x^2+1, sin(x)等）
- 实时渲染方程式的数学显示
- 绘制函数图像
- 支持放大、缩小和重置视图
- 可以调整X轴范围
-
使用的国内可访问的JS库：
- ECharts (来自jsdelivr.net国内CDN) - 用于绘制图表
- MathJax (来自jsdelivr.net国内CDN) - 用于渲染数学公式
-
响应式设计：适应不同屏幕大小
-
交互功能：
- 鼠标悬停显示坐标值
- 平滑的曲线绘制
- 动画效果
注意：这个实现对于简单方程效果很好，但对于复杂方程可能需要更复杂的解析器。如果需要更强大的数学表达式解析功能，可以考虑使用math.js等库，但这些可能需要从国外CDN获取。
欢迎加入DeepSeek 技术社区。在这里，你可以找到志同道合的朋友，共同探索AI技术的奥秘。
更多推荐
6
0- 0
已为社区贡献8条内容
所有评论(0)