canvas手写k线图需固定蜡烛宽度2～4像素、y轴归一化映射、时间戳升序对齐、offsetx滚动控制、成交量对数压缩及统一坐标系；核心是数据结构与坐标逻辑组织。
用纯 HTML + Canvas 手写 K 线图，不依赖任何图表库
Canvas 是目前在浏览器中绘制高性能 K 线图最可控、最轻量的方式。DOM 元素（比如 <div> 堆叠）或 SVG 在处理上千根 K 线时会明显卡顿，而 Canvas 可以轻松渲染 5000+ 根且保持 60fps。关键不是“能不能画”，而是“怎么组织数据结构和坐标映射逻辑”。<p>核心步骤：准备 OHLC 数据 → 计算 canvas 坐标系 → 绘制蜡烛体/影线/成交量 → 实现横向滚动（非缩放）。</p>
<p>常见错误现象：<code>ctx.fillRect() 画出来蜡烛太细看不清、时间轴刻度错位、高低价超出画布却没裁剪、鼠标 hover 拿不到对应 K 线索引。
- 蜡烛宽度建议固定为
2～4像素，避免用data.length做除法动态算宽（会导致不同周期图表宽度不一致） - Y 轴必须做归一化：先取整个数据集的
minLow和maxHigh，再按(price - minLow) / (maxHigh - minLow)映射到画布高度区间 - 务必用
ctx.save()/ctx.restore()包裹坐标变换，否则后续绘图容易偏移
OHLC 数据格式与时间轴对齐要点
K 线本质是时间序列，但 HTML 没有内置时间轴概念。你传给 Canvas 的每根 K 线，必须带明确的时间戳（毫秒数），且所有时间戳需升序排列。否则 ctx.moveTo() 连线或滚动计算会出错。
使用场景：从接口拿到的是字符串日期（如 "2024-03-15T09:30:00"）？必须转成 new Date(str).getTime()；如果是 Unix 秒级时间戳，记得 ×1000。
容易踩的坑：new Date("2024-03-15") 在 Safari 下可能返回 Invalid Date（ISO 格式缺时分秒），稳妥写法是 new Date("2024-03-15T00:00:00")。
- 时间轴刻度建议按“可视区域首尾时间差”动态生成，例如差值
（1 小时）就每 5 分钟一个刻度，> 86400000（1 天）就每天一个刻度 - 不要直接用
Date.toLocaleDateString()渲染刻度文字——它受用户系统 locale 影响，中文 Windows 可能显示“2024年3月15日”，导致宽度不可控；改用date.getFullYear() + "-" + (date.getMonth()+1) + "-" + date.getDate()
实现左右拖拽滚动（非缩放）的关键逻辑
用户想看更早或更晚的数据，但又不想重载整个图表——这时候不能靠 CSS transform: translateX()，那只是视觉位移，坐标系没变，hover 判断和十字光标都会错乱。
正确做法是维护一个 offsetX 偏移量（单位：像素），在每次 draw() 时，把每根 K 线的 X 坐标减去它。同时限制 offsetX 范围：最小为 0（最左），最大为 totalWidth - canvas.width（最右）。
性能影响：滚动时只重绘可见区域内的 K 线（用二分查找快速定位起始索引），而非全量遍历 data 数组。
- 监听
mousedown→mousemove时更新offsetX += deltaX，注意防抖（requestAnimationFrame节流） - 滚动后要重新计算 Y 轴范围吗？不需要——除非用户手动拉伸窗口高度；默认保持原
minLow/maxHigh即可 - 如果数据量极大（>10 万根），滚动时应配合分页加载，此时
offsetX需转换为请求参数from=timestamp&limit=500
成交量柱状图叠加与颜色适配
成交量通常画在主图下方独立区域，高度约为主图 1/4。它的 Y 轴逻辑和 K 线不同：不是价格，而是交易量，且分布极不均匀（常有尖峰）。直接用最大成交量做归一化，会导致大部分柱子贴底不可见。
解决方案：用 Math.log(volume + 1) 做对数压缩，或取前 95% 分位数作为上限（quantile(data.volumes, 0.95)）。
容易被忽略的细节：K 线和成交量的 X 坐标必须严格对齐。哪怕只差 1 像素，也会看起来像“错位”。确保两者共用同一套 timeToX() 函数，且输入时间戳完全一致。
- 成交量颜色建议用半透明：
ctx.fillStyle = "rgba(0, 128, 255, 0.6)"，避免遮挡下方网格线 - 当某根 K 线
close > open时，蜡烛绿色；否则红色。但成交量柱不随涨跌变色——统一色即可，否则视觉干扰太大 - 如果开启“隐藏成交量”，不要用
display: none，而是在drawVolume()中直接 return；否则 canvas 缓存逻辑可能混乱
真正难的不是画一根蜡烛，而是让时间轴、价格轴、滚动、hover 提示、多周期切换全部同步响应。尤其是当用户快速拖拽 + 鼠标悬停 + 同时切换 1m/5m/1d 周期时，状态管理很容易脱节。建议把时间范围、价格范围、偏移量、当前选中索引都收进一个 chartState 对象里，所有绘制逻辑只读不写它。
