无第三方库基于HTML5 Canvas的自适应水平柱状图：Y轴柱体定位公式求解

核心问题修正 #

现有代码存在两个核心逻辑偏差，导致柱高和定位计算无法生效：

• 变量命名与坐标轴映射错位：原本计算的StepSizeY实际是水平方向数值轴的刻度步长，纵轴（分类排布方向）的计算逻辑完全缺失
• 几何维度混淆：尝试用data.length / gridWidth计算柱宽，本质是把纵向排布的柱高计算逻辑套用到了横向宽度维度上，结果量纲为1/像素，没有实际几何意义

基础参数对齐 #

首先统一绘图区域的基准参数，所有计算基于以下已定义的变量开展：

• gridWidth：绘图区（扣除左右边距后的有效横向宽度），即水平数值轴的总像素长度
• gridHeight：绘图区（扣除上下边距后的有效纵向高度），即垂直分类轴的总像素长度
• marginLeft / marginTop：绘图区相对于Canvas左上角的横向、纵向偏移量
• RangeX：数据集的数值最大值跨度，即数值轴的表示范围
• data：分类数据集，每一项对应一根水平柱

动态柱高与定位计算公式 #

水平柱沿Canvas纵向（Y轴方向）从上到下依次排布，所有参数实时基于当前绘图区尺寸计算，天然支持尺寸自适应。

1. 单根柱的纵向高度计算
   为避免柱子紧贴边缘或相邻柱，预留总绘图高度20%的空间作为所有排布间隙：

   // 数据项总数
   const itemCount = data.length;
   // 预留20%的总高度作为间隙占比
   const gapRatio = 0.2;
   // 剩余80%的绘图高度平分给所有柱子，得到单根柱的动态高度
   const barHeight = (gridHeight * (1 - gapRatio)) / itemCount;
   

2. 单根柱的Y向定位坐标计算
   间隙均匀分布在柱与柱之间、以及整个绘图区的上下边缘，保证布局对称：

   // 单个间隙的实际高度：总间隙高度平分到（柱数+1）个间隙位（柱上、柱间、柱下）
   const gapHeight = (gridHeight * gapRatio) / (itemCount + 1);
   // 第i根柱（从0开始计数）的左上角Y坐标
   const barTopY = marginTop + gapHeight + i * (barHeight + gapHeight);
   

3. 柱体绘制参数匹配
   原有逻辑中pixel = gridWidth / RangeX是正确的像素映射关系，即数值轴上1个单位对应的横向像素长度，结合上面算出的纵向参数，完整的柱体绘制逻辑为：

   // 取第i项的实际数值
   const itemValue = data[i].value;
   // rect方法参数为：(矩形左上角X, 矩形左上角Y, 矩形横向宽度, 矩形纵向高度)
   this.SampleLayerContext.rect(
     marginLeft,
     barTopY,
     itemValue * pixel,
     barHeight
   );
   

自适应联动实现 #

当Canvas宽高发生变化时，执行以下流程即可实现全图同步调整：

• 重新计算扣除边距后的gridWidth、gridHeight实际值
• 重新计算barHeight、每根柱对应的barTopY坐标
• 清空Canvas画布，按顺序重绘坐标轴、刻度、柱体
• 所有参数无硬编码固定值，完全基于当前Canvas尺寸实时推导，无需额外适配逻辑

常见排查点 #

• 避免使用固定像素值定义柱高或间隙：当数据项数量变化或Canvas尺寸大幅调整时，固定值会导致布局拥挤或过度留白，基于比例的计算可以适配任意场景
• 注意Canvas坐标系规则：Canvas默认以左上角为(0,0)原点，Y轴向下为正，无需做反向坐标换算即可直接使用计算得到的barTopY值

内容的提问来源于stack exchange，提问作者Muhammad Zaid Nisar