# 移动端K线图网页开发完整提示词


## 项目目标
开发一个在手机上完美运行的K线图可视化工具，不使用任何外部库，完全用原生技术实现。

## 核心功能

1. 基础结构
- 顶部工具条：标题和按钮
- 中间画布：显示K线图
- 底部状态栏：统计数据

2. 核心功能
- 生成100组随机K线数据
- 绘制K线图（阳线绿色，阴线红色）
- 显示价格坐标轴和时间坐标轴
- 绘制背景网格

3. 交互功能
- 单指拖动平移视图
- 双指捏合缩放视图
- 鼠标/触摸移动时显示十字线
- 横线右侧显示价格数值
- 竖线下方显示时间信息
- 悬停K线时显示详细信息

4. 控制功能
- 生成K线数据按钮
- 重置按钮
- 十字线开关按钮
- 状态栏显示：上涨、下跌、平盘数量，总数据量

## 技术实现要点

1. 画布绘制
- 使用HTML5 Canvas
- 实现坐标映射：数据坐标→屏幕坐标
- 绘制K线：矩形主体+上下影线

2. 数据处理
- 每根K线包含：时间、开盘价、收盘价、最高价、最低价、成交量
- 生成随机但合理的K线数据

3. 交互处理
- 鼠标事件：mousemove、mouseleave
- 触摸事件：touchstart、touchmove、touchend
- 实现拖动、缩放逻辑

4. 响应式设计
- 适配各种手机屏幕
- 触摸目标尺寸≥44px
- 媒体查询适配小屏幕

## 代码结构建议

1. 初始化画布
2. 生成K线数据
3. 绘制网格和坐标轴
4. 绘制K线
5. 添加交互事件
6. 更新状态栏

## 视觉设计要点
- 深色主题背景
- 蓝色坐标轴
- 绿色上涨K线，红色下跌K线
- 半透明悬停效果

## 移动端优化要点
- 禁用用户缩放
- 优化触摸体验
- 快速加载性能