K线图 HTML5 实现设计文档1. 项目概述1.1 项目简介项目名称: HTML5 K线图项目类型: 金融数据可视化前端组件核心功能: 基于HTML5 Canvas技术实现的股票K线图蜡烛图及成交量展示目标用户: 金融从业者、投资者、量化交易开发者1.2 技术选型技术项选择说明渲染技术HTML5 Canvas高性能2D图形渲染脚本语言JavaScript (ES6)原生支持无依赖样式技术CSS3深色主题设计数据源模拟数据生成365天股票模拟数据2. 系统架构2.1 整体架构┌─────────────────────────────────────────────────┐ │ index.html │ ├─────────────────────────────────────────────────┤ │ ┌─────────────────────────────────────────┐ │ │ │ Header 区域 │ │ │ │ (标题 副标题信息) │ │ │ └─────────────────────────────────────────┘ │ │ ┌─────────────────────────────────────────┐ │ │ │ K线图画布区域 │ │ │ │ ┌───────────────────────────────────┐ │ │ │ │ │ Candlestick Area │ │ │ │ │ │ (蜡烛图渲染 价格坐标轴) │ │ │ │ │ └───────────────────────────────────┘ │ │ │ └─────────────────────────────────────────┘ │ │ ┌─────────────────────────────────────────┐ │ │ │ 成交量图画布区域 │ │ │ │ ┌───────────────────────────────────┐ │ │ │ │ │ Volume Bar Area │ │ │ │ │ │ (成交量柱状图 日期坐标轴) │ │ │ │ │ └───────────────────────────────────┘ │ │ │ └─────────────────────────────────────────┘ │ │ ┌─────────────────────────────────────────┐ │ │ │ Control Buttons │ │ │ │ [重置视图] [十字光标] │ │ │ └─────────────────────────────────────────┘ │ │ ┌─────────────────────────────────────────┐ │ │ │ Tooltip │ │ │ │ (鼠标悬停数据显示框) │ │ │ └─────────────────────────────────────────┘ │ └─────────────────────────────────────────────────┘2.2 模块划分模块职责文件位置数据生成模块生成模拟股票数据inline script渲染模块Canvas绑制逻辑drawKline(), drawVolume()交互模块鼠标事件处理event listeners工具模块辅助函数resizeCanvas(), getDataAtPosition()3. 数据结构设计3.1 K线数据模型{date:String,// 日期 YYYY-MM-DDopen:Number,// 开盘价high:Number,// 最高价low:Number,// 最低价close:Number,// 收盘价volume:Number// 成交量}3.2 全局状态变量变量名类型默认值说明dataArray[]全部K线数据visibleStartNumber0可视区域起始索引visibleCountNumber60可视区域数据条数scaleNumber1缩放比例 (0.5-5)offsetXNumber0水平偏移量mouseXNumber-1鼠标X坐标mouseYNumber-1鼠标Y坐标showCrosshairBooleantrue十字光标显示状态4. 界面设计4.1 布局规格区域高度比例背景色边框Header50px固定#16213e底部1px #0f3460K线图区域75%#1a1a2e无成交量区域25%#1a1a2e无4.2 画布边距 (Padding)constpadding{top:20,// 顶部留白right:80,// 右侧留白价格轴bottom:30,// 底部留白日期轴left:10// 左侧留白};4.3 颜色规范用途颜色代码说明上涨K线#e94560红色下跌K线#00d9ff青色背景色#1a1a2e深蓝黑标题背景#16213e深蓝边框色#0f3460蓝灰网格线#333333暗灰文字色#666666中灰主强调色#e94560红色4.4 字体规范用途字体大小标题Microsoft YaHei18px副标题Microsoft YaHei14px坐标轴标签Microsoft YaHei10px提示框文字Microsoft YaHei12px5. 功能详细设计5.1 K线图渲染 (drawKline)功能描述: 在Canvas上绘制蜡烛图实现步骤:清空画布:ctxKline.clearRect(0, 0, width, height)计算价格范围:遍历可见数据找出 minPrice (最低价) 和 maxPrice (最高价)价格范围上下扩展5%边距绘制网格线:绘制5条水平网格线右侧标注价格刻度绘制蜡烛:遍历每个数据点绘制上下影线 (high → low)绘制实体方块 (open ↔ close)根据涨跌设置颜色绘制日期轴:底部显示日期标签自适应步长显示蜡烛图绘制公式:影线X位置 蜡烛X 蜡烛宽度 / 2 实体顶部Y priceToY(Math.max(open, close)) 实体底部Y priceToY(Math.min(open, close)) 实体高度 Math.max(1, 实体底部Y - 实体顶部Y) priceToY(price) padding.top chartHeight - ((price - minPrice) / (maxPrice - minPrice)) * chartHeight5.2 成交量图渲染 (drawVolume)功能描述: 在下方Canvas绘制成交量柱状图实现步骤:计算最大成交量: 遍历可见数据找出maxVolume绘制柱状图:柱状图高度 (volume / maxVolume) * chartHeight颜色与K线颜色一致半透明5.3 十字光标 (drawCrosshair)功能描述: 显示鼠标位置的十字参考线实现步骤:绘制十字线: 虚线样式 (#fff, 30%透明度)绘制价格标签: 右侧价格轴高亮显示当前价格5.4 缩放功能触发方式: 鼠标滚轮事件实现逻辑:zoomFactor deltaY 0 ? 0.9 : 1.1 // 向下滚动缩小向上滚动放大 newScale scale * zoomFactor 缩放范围: 0.5 ≤ scale ≤ 5 visibleCount Math.floor(60 / scale)5.5 平移功能触发方式: 鼠标拖拽实现逻辑:deltaX 当前鼠标X - 上次鼠标X offsetX deltaX 边界限制: minOffset ≤ offsetX ≤ maxOffset6. 交互设计6.1 鼠标事件事件元素功能mousemoveK线图画布显示tooltip 触发十字光标mouseleaveK线图画布隐藏tooltip 清除十字光标wheelK线图画布缩放视图mousedownK线图画布开始拖拽mouseup画布(全局)结束拖拽mousemoveK线图画布平移视图(拖拽中)6.2 按钮控制按钮功能重置视图恢复scale1, visibleCount60, offsetX0十字光标切换十字光标显示/隐藏6.3 Tooltip显示规则显示条件: 鼠标移动到有效蜡烛位置显示内容:日期开盘价 (颜色区分涨跌)收盘价 (颜色区分涨跌)最高价 (红色)最低价 (青色)成交量 (M为单位)7. 模拟数据生成算法7.1 生成规则初始价格:100每日价格变动:(Math.random()-0.48)*5收盘价开盘价变动 最高价max(开盘价,收盘价)random*3最低价min(开盘价,收盘价)-random*3成交量1000000random*100000007.2 数据量时间跨度: 365天数据点: 365条K线数据8. 响应式设计8.1 自适应策略触发时机调整内容页面加载初始化Canvas尺寸窗口resize重新计算Canvas尺寸并重绘8.2 Canvas尺寸计算canvasKline.widthcontainer.clientWidth-20canvasKline.heightcontainer.clientHeight*0.75-20canvasVolume.widthcontainer.clientWidth-20canvasVolume.heightcontainer.clientHeight*0.25-209. 性能优化9.1 优化措施优化项实现方式减少重绘仅在数据/状态变化时调用draw()虚线缓存十字光标使用setLineDash范围裁剪clearRect只清空实际区域可见数据只渲染visibleStart到visibleCount的数据10. 扩展计划10.1 短期扩展添加MA5/MA10/MA20均线添加MACD指标添加布林带指标支持键盘快捷键操作10.2 中期扩展支持真实股票数据API接入添加多股票对比功能添加图表类型切换K线/折线/柱状数据导出功能CSV/JSON10.3 长期扩展添加技术指标库支持自定义指标脚本添加警报功能价格/成交量异动移动端适配11. 浏览器兼容性浏览器最低版本支持情况Chrome60✅ 完全支持Firefox55✅ 完全支持Safari11✅ 完全支持Edge79✅ 完全支持IE-❌ 不支持12. 文件结构K线图/ ├── index.html # 主文件 (包含HTML/CSS/JS) └── README.md # 设计文档13. 使用说明13.1 本地运行双击打开index.html或使用本地服务器:python -m http.server 8080浏览器访问:http://localhost:808013.2 操作指南操作方式放大鼠标向上滚动缩小鼠标向下滚动左右移动鼠标左键拖拽查看数据鼠标悬停在K线上重置点击重置视图按钮光标点击十字光标按钮切换下载代码