想要在 HTML Canvas 中实现折线图和柱状图的数据可视化，核心在于掌握数据到画布坐标的映射关系、原生 Canvas API 的绘制方法，以及坐标换算等关键环节。同时，还要合理处理 Y 轴翻转、批量坐标预计算、局部重绘、自动布局、响应式适配和交互封装等一系列实际问题。
在 HTML Canvas 中实现折线图和柱状图，重点是把原始数据准确映射到画布坐标，再通过原生 API 绘制路径或矩形，同时妥善处理坐标计算、样式设置和更新逻辑。这样的图表实现方式不依赖第三方图表库，具备轻量、灵活、可控性强等优势，尤其适合嵌入式页面、高频数据刷新场景，或对图表定制化要求较高的项目。
折线图：单路径批量绘制 + 坐标预计算
想提升 Canvas 折线图性能，关键是避免每一帧重复计算坐标，也要尽量减少频繁调用 moveTo/lineTo：
- 数据加载完成后，立即将所有
(value → canvasY)批量转换为像素坐标，并存成[x0,y0,x1,y1,...]这样的平铺数组；由于 Canvas 原点在左上角，y 坐标需要翻转：canvasY = height - paddingBottom - scaleY * (value - minValue) - 绘制折线时只调用一次
ctx.beginPath()，先通过ctx.moveTo(x0, y0)落笔，后续统一使用ctx.lineTo(x1, y1)依次连线，最后再执行ctx.stroke() - 为了进一步优化显示效果，可设置：
ctx.imageSmoothingEnabled = false，并将ctx.lineCap = 'butt'，线宽优先使用奇数值（如 1px 或 3px），有助于提升线条清晰度 - 如果图表需要动态更新，只重绘发生变化的区域即可——例如滚动展示最近 60 个点时，只清除最左侧一列并绘制最右侧新增点，无需整块画布
clear
柱状图：按数据逐个绘制矩形 + 自动对齐布局
Canvas 柱状图实现的重点，在于柱子宽度、间距、Y 轴对齐以及标签位置都能自动适配：
- 先计算可用绘图区宽度：
chartWidth = canvas.width - leftPad - rightPad，然后根据数据数量均分，或按比例为每根柱子分配合适的barWidth - 柱形高度计算方式为：
(value / maxValue) * usableHeight，由于 Canvas 的 Y 轴方向向下增长，所以矩形的 y 坐标应写成originY - barHeight（其中 originY 为 X 轴所在的像素行） - 使用
ctx.fillRect(x, y, width, height)绘制每根柱子，并结合ctx.fillStyle设置颜色；数值标签可借助ctx.fillText(value, x + width/2, y - 5)显示在柱顶居中位置 - 横坐标标签（例如“1月”“2月”）通常放在柱子正下方，x 与柱体中心对齐，y 可固定在 originY + 20 附近，字体建议控制在 12–14px，避免文字过于拥挤
共用基础：坐标系与响应式适配
无论是折线图还是柱状图，都离不开稳定且可复用的绘图基础框架：
- 统一设置留白区域（padding）：上下左右建议各保留 30–50px，用于放置坐标轴、标题和图例等元素
- X 轴与 Y 轴可通过
ctx.beginPath() + moveTo/lineTo + stroke()手动绘制，Y 轴刻度值则可通过循环生成，并配合fillText完成文字标注 - 监听
window.resize事件后，重新设置 canvas.width/height，同时调用canvas.style.width = '100%'+canvas.style.height = 'auto'，再依据新尺寸重新计算缩放比例 - 当数据为空或遇到极端值（如全部为 0）时，要补充兜底逻辑：可以显示“暂无数据”提示文案，或自动调整 scale，避免出现除零问题
进阶提示：交互与复用封装
想让 Canvas 图表真正具备实用性，不能只停留在“画出来”这一步：
- 当鼠标 hover 到柱子或折线节点时，可通过
isPointInPath()或简单的距离判断来识别命中目标，再高亮对应数据项并显示 tooltip（可使用临时 div 浮层实现） - 建议将绘图逻辑封装成类，例如
new LineChart(ctx, data, options)，以便支持主题切换、参数复用以及导出 PNG（canvas.toDataURL('image/png')）等功能 - 如果是多系列折线图，可让每条线对应独立 path；如果是多组柱状图，则采用横向分组或堆叠方式，并调整 x 偏移；若是混合图表，通常先绘制柱状图，再叠加折线路径
