CSS变量无法自动响应数据变化，必须用JavaScript手动更新；calc()需预计算比例防兼容问题；多柱场景宜用data属性+全局变量或直接设style.height。
CSS 变量本身不能直接响应数据变化来“动态”更新柱高，它只提供可配置的静态值；真要实现数据驱动的高度变化，必须配合 JavaScript 注入变量值。
为什么不能只靠 :root 变量自动响应数据
CSS 变量（--bar-height）是声明时求值的，浏览器不会监听 JS 中数组或对象的变化并自动重算。即使你用 document.documentElement.style.setProperty('--bar-height', '240px') 手动更新，也得你自己写逻辑触发——变量只是“管道”，不是“反应式引擎”。
- 常见错误现象：改了 JS 里的数据数组，但柱子高度没变 → 忘了调用
setProperty更新 CSS 变量 - 变量命名易混淆：用
--h表示最大高度，又用--value表示当前数据，但没做归一化计算 → 柱子超出容器或压成一条线 - 性能隐患：每帧都调用
setProperty更新多个柱子变量 → 触发大量样式重计算，卡顿明显
calc() 配合变量做比例缩放的实操要点
把原始数据映射为相对高度，核心是用 calc() 把数值转成百分比或像素，再乘以基准高度。例如最大值为 100，当前值为 65，则高度 = calc(65 / 100 * var(--h))。
- 必须确保除数不为零：JS 中提前过滤或兜底，如
Math.max(data[i], 1) - 避免小数精度溢出：CSS 中
calc(0.65 * 300px)没问题，但calc(65/100*300px)在部分旧版 Safari 里会解析失败 → 推荐 JS 预算好系数，传--ratio: 0.65，CSS 里写height: calc(var(--ratio) * var(--h)) - 不要在
calc()里混用单位：比如calc(var(--ratio) * 300px + 2em)是合法的，但calc(var(--ratio) * 300 + 2em)会因单位缺失报错
多柱场景下变量管理的避坑方式
一个图表有 12 根柱子，别给每根都定义 --bar-1-height 到 --bar-12-height —— 维护爆炸且无法用 CSS 通配选择器控制。
立即学习“前端免费学习笔记（深入）”；
- 推荐做法：用数据属性（
data-value="65"）存原始值，JS 批量读取后统一注入一个全局比例变量（如--max-value: 100），再让每根柱子用自身data-value和该变量算高度 - 更稳妥的做法：放弃逐柱变量，改用
style.height直接设内联样式（el.style.height = `${ratio * h}px`），既绕过 CSS 变量限制，又避免重复重排 - 如果坚持用变量，务必加命名空间前缀，比如
--chart-a-bar-3-ratio，防止不同图表间冲突
真正难的不是怎么写 calc()，而是决定什么时候该放弃 CSS 变量、转而用 JS 控制内联样式——尤其当数据频繁更新或需动画过渡时，CSS 变量 + transition 的组合反而容易因重绘时机不可控导致跳帧。这时候，老老实实用 requestAnimationFrame 驱动 style.height，反而更稳。
