# plotly-lite

**Repository Path**: Eric-Tech/plotly-lite

## Basic Information

- **Project Name**: plotly-lite
- **Description**: 一个纯前端的单页面函数曲线绘图工具，无需安装任何依赖，直接用浏览器打开 index.html 即可使用。支持在同一坐标系上绘制和管理多条函数曲线，自动计算并标注交点，提供图片导出功能。
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-04-01
- **Last Updated**: 2026-04-01

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 函数曲线绘图器

一个纯前端的单页面函数曲线绘图工具，无需安装任何依赖，直接用浏览器打开 `index.html` 即可使用。支持在同一坐标系上绘制和管理多条函数曲线，自动计算并标注交点，提供图片导出功能。

## 功能特性

### 支持的曲线类型

- **一元二次方程**：y = ax² + bx + c
- **二元一次方程**：ax + by + c = 0
- **指数方程**：y = a·eᵇˣ + c
- **辅助线**：由两个坐标点确定的直线，以黑色虚线样式绘制

### 添加曲线

- 支持两种输入方式：直接输入参数 或 输入点坐标
- 点坐标模式下，系统根据曲线类型自动显示所需的坐标点数量（二元一次方程 2 个点，一元二次方程和指数方程 3 个点）
- 点坐标数量不足时，支持最小二乘法自动拟合
- 每条曲线自动分配不同颜色，便于区分

### 坐标系

- 可自定义 X/Y 轴范围、刻度间距和轴标题
- 支持通过 URL 参数预设坐标轴配置（见下方说明）

### 交点计算

- 自动计算曲线与坐标轴的交点
- 自动计算曲线之间（包括辅助线）的交点
- 鼠标悬停交点显示坐标值，点击可固定显示

### 曲线编辑

- 点击曲线选中，右侧面板显示参数信息
- 支持直接修改参数或修改点坐标
- 通过点坐标创建的曲线，修改参数后点坐标标记为无效（显示 `-`），用户可随时重新输入点坐标
- 右键点击曲线弹出菜单，支持删除操作

### 导出

- 支持 PNG 和 SVG 两种格式
- 支持下载到本地或复制到剪贴板

## 使用方式

直接在浏览器中打开 `index.html` 文件即可，无需服务器或构建工具。

### URL 参数

可通过 URL 查询参数预设坐标轴配置，所有参数均为可选：

| 参数 | 说明 | 示例 |
|------|------|------|
| `xmin` | X 轴最小值 | `-5` |
| `xmax` | X 轴最大值 | `5` |
| `ymin` | Y 轴最小值 | `0` |
| `ymax` | Y 轴最大值 | `20` |
| `xtick` | X 轴刻度间距 | `1` |
| `ytick` | Y 轴刻度间距 | `2` |
| `xtitle` | X 轴标题 | `时间` |
| `ytitle` | Y 轴标题 | `温度` |

示例：

```
index.html?xmin=-5&xmax=5&ymin=0&ymax=20&xtick=1&ytick=2&xtitle=时间&ytitle=温度
```

## 技术栈

- 纯 HTML/CSS/JavaScript，零运行时依赖
- HTML5 Canvas 2D API 渲染
- 牛顿法 + 区间扫描求解曲线交点
- 最小二乘法拟合点坐标到函数参数

## 开发与测试

项目包含基于 [fast-check](https://github.com/dubzzz/fast-check) 的属性测试，覆盖坐标系配置、曲线管理、交点计算、拟合引擎、导出模块等核心逻辑。

```bash
# 安装开发依赖
npm install

# 运行测试
npm test
```

## 许可证

MIT