canvas画柱状图核心是数据到像素的线性映射：先确定绘图区（如520×340），设左下为原点（y轴翻转）；x轴按等距+间隙布局柱子；y轴以minval/maxval定缩放比，柱高=(d−minval)×scale，y坐标=顶部−柱高；负值时基线动态定位，统一用(minval,maxval)线性映射。
Canvas画柱状图时，核心是把数据值映射到像素坐标，关键在于确定“数据范围→画布空间”的缩放比例和偏移量。
明确画布可用绘图区域
避免被边框或外边距干扰，先用getBoundingClientRect()获取实际可绘区域，或手动预留边距（如左/下各40px，右/上各20px）。假设画布宽600×高400，留白后绘图区为：width = 520, height = 340，原点设在左下角（需Y轴翻转）。
计算X轴柱子位置与宽度
假设有n个数据项，每根柱子需等距排列并留间隙：
- 总可用水平空间 = 绘图区宽度
- 单柱理论宽度 = (绘图区宽度 × 0.6) / n（保留60%宽度给柱体，其余为间隙）
- 柱子左边缘横坐标 = 左边距 + i × (单柱宽度 + 间隙)，i从0开始
例如5个数据、绘图宽520px：单柱宽 ≈ (520×0.6)/5 = 62.4px，间隙取10px，则第0根柱子x = 40 + 0×72.4 = 40，第1根x = 40 + 72.4 = 112.4，依此类推。
计算Y轴高度映射比例
Y方向是重点换算：数据最大值要对应绘图区高度（从底部起），最小值对应0高度（即基线）：
- 设数据最大值为maxVal，最小值为minVal
- Y方向缩放比例 = 绘图区高度 / (maxVal − minVal)
- 某数据d对应柱高 = (d − minVal) × 缩放比例
- Canvas中绘制时，y坐标 = 绘图区顶部y − 柱高（因Canvas原点在左上）
例如数据[12, 35, 8, 42] → min=8, max=42 → range=34；绘图高340px → scale=10；值42对应柱高=(42−8)×10=340px，正好顶到绘图区顶部。
处理零值与负值的常见策略
若数据含负数，基线（y=0对应的数据值）不再在底部，而需动态计算：
- 基线在绘图区中的y像素位置 = 绘图区顶部 − (0 − minVal) × scale
- 正数柱子向上延伸，负数柱子向下延伸（从基线开始画矩形）
- 避免硬编码“0在底部”，始终以minVal和maxVal为基准做线性映射
这样无论全正、全负或跨零，比例逻辑一致，只需一次scale计算和统一偏移调整。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
