企业官网建设流程全解析

K线图 HTML5 实现设计文档

1. 项目概述

1.1 项目简介

• 项目名称: HTML5 K线图
• 项目类型: 金融数据可视化前端组件
• 核心功能: 基于HTML5 Canvas技术实现的股票K线图（蜡烛图）及成交量展示
• 目标用户: 金融从业者、投资者、量化交易开发者

1.2 技术选型

2. 系统架构

2.1 整体架构

┌─────────────────────────────────────────────────┐ │ index.html │ ├─────────────────────────────────────────────────┤ │ ┌─────────────────────────────────────────┐ │ │ │ Header 区域 │ │ │ │ (标题 + 副标题信息) │ │ │ └─────────────────────────────────────────┘ │ │ ┌─────────────────────────────────────────┐ │ │ │ K线图画布区域 │ │ │ │ ┌───────────────────────────────────┐ │ │ │ │ │ Candlestick Area │ │ │ │ │ │ (蜡烛图渲染 + 价格坐标轴) │ │ │ │ │ └───────────────────────────────────┘ │ │ │ └─────────────────────────────────────────┘ │ │ ┌─────────────────────────────────────────┐ │ │ │ 成交量图画布区域 │ │ │ │ ┌───────────────────────────────────┐ │ │ │ │ │ Volume Bar Area │ │ │ │ │ │ (成交量柱状图 + 日期坐标轴) │ │ │ │ │ └───────────────────────────────────┘ │ │ │ └─────────────────────────────────────────┘ │ │ ┌─────────────────────────────────────────┐ │ │ │ Control Buttons │ │ │ │ [重置视图] [十字光标] │ │ │ └─────────────────────────────────────────┘ │ │ ┌─────────────────────────────────────────┐ │ │ │ Tooltip │ │ │ │ (鼠标悬停数据显示框) │ │ │ └─────────────────────────────────────────┘ │ └─────────────────────────────────────────────────┘

2.2 模块划分

3. 数据结构设计

3.1 K线数据模型

{date:String,// 日期 "YYYY-MM-DD"open:Number,// 开盘价high:Number,// 最高价low:Number,// 最低价close:Number,// 收盘价volume:Number// 成交量}

3.2 全局状态变量

4. 界面设计

4.1 布局规格

4.2 画布边距 (Padding)

constpadding={top:20,// 顶部留白right:80,// 右侧留白（价格轴）bottom:30,// 底部留白（日期轴）left:10// 左侧留白};

4.3 颜色规范

4.4 字体规范

5. 功能详细设计

5.1 K线图渲染 (drawKline)

功能描述: 在Canvas上绘制蜡烛图

实现步骤:

1. 清空画布:ctxKline.clearRect(0, 0, width, height)

2. 计算价格范围:

   • 遍历可见数据，找出 minPrice (最低价) 和 maxPrice (最高价)
   • 价格范围上下扩展5%边距

3. 绘制网格线:

   • 绘制5条水平网格线
   • 右侧标注价格刻度

4. 绘制蜡烛:

   • 遍历每个数据点
   • 绘制上下影线 (high → low)
   • 绘制实体方块 (open ↔ close)
   • 根据涨跌设置颜色

5. 绘制日期轴:

   • 底部显示日期标签
   • 自适应步长显示

蜡烛图绘制公式:

影线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)) * chartHeight

5.2 成交量图渲染 (drawVolume)

功能描述: 在下方Canvas绘制成交量柱状图

实现步骤:

1. 计算最大成交量: 遍历可见数据找出maxVolume

2. 绘制柱状图:

   • 柱状图高度 = (volume / maxVolume) * chartHeight
   • 颜色与K线颜色一致（半透明）

5.3 十字光标 (drawCrosshair)

功能描述: 显示鼠标位置的十字参考线

实现步骤:

1. 绘制十字线: 虚线样式 (#fff, 30%透明度)

2. 绘制价格标签: 右侧价格轴高亮显示当前价格

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 ≤ maxOffset

6. 交互设计

6.1 鼠标事件

6.2 按钮控制

6.3 Tooltip显示规则

显示条件: 鼠标移动到有效蜡烛位置

显示内容:

• 日期
• 开盘价 (颜色区分涨跌)
• 收盘价 (颜色区分涨跌)
• 最高价 (红色)
• 最低价 (青色)
• 成交量 (M为单位)

7. 模拟数据生成算法

7.1 生成规则

初始价格:100每日价格变动:(Math.random()-0.48)*5收盘价=开盘价+变动 最高价=max(开盘价,收盘价)+random*3最低价=min(开盘价,收盘价)-random*3成交量=1000000+random*10000000

7.2 数据量

• 时间跨度: 365天
• 数据点: 365条K线数据

8. 响应式设计

8.1 自适应策略

8.2 Canvas尺寸计算

canvasKline.width=container.clientWidth-20canvasKline.height=container.clientHeight*0.75-20canvasVolume.width=container.clientWidth-20canvasVolume.height=container.clientHeight*0.25-20

9. 性能优化

9.1 优化措施

10. 扩展计划

10.1 短期扩展

• 添加MA5/MA10/MA20均线
• 添加MACD指标
• 添加布林带指标
• 支持键盘快捷键操作

10.2 中期扩展

• 支持真实股票数据API接入
• 添加多股票对比功能
• 添加图表类型切换（K线/折线/柱状）
• 数据导出功能（CSV/JSON）

10.3 长期扩展

• 添加技术指标库
• 支持自定义指标脚本
• 添加警报功能（价格/成交量异动）
• 移动端适配

11. 浏览器兼容性

12. 文件结构

K线图/ ├── index.html # 主文件 (包含HTML/CSS/JS) └── README.md # 设计文档

13. 使用说明

13.1 本地运行

1. 双击打开index.html
2. 或使用本地服务器:python -m http.server 8080
3. 浏览器访问:http://localhost:8080

13.2 操作指南

下载代码