纯CSS无法提供真实数据支持，仅能通过JS注入的数值（如--score: 85）映射为高度、颜色等视觉表现；需用setProperty写入、calc()配合单位转换、hsl()动态调色，并严控数值范围与更新时机。
纯 CSS 无法为图表提供真实的数据支持——它不解析、不校验、不响应数据变更。所谓“用 CSS 变量驱动图表”，本质是把已知数值（由 JS 注入或静态预设）映射为视觉表现，比如高度、颜色、旋转角度等。关键在怎么传、怎么算、怎么防崩。
var() 怎么接收 JS 注入的数值
CSS 变量本身不主动获取值，必须由 JS 显式写入。常见错误是直接在 HTML 标签里硬编码 style="--value: 85"，但实际项目中多数数值来自异步接口或状态计算。
- 全局变量用
document.documentElement.style.setProperty('--score', score)，适合全页共用一个数据源（如仪表盘总分） - 局部变量推荐绑定到具体元素：
chartEl.style.setProperty('--score', score)，避免污染全局作用域 - 批量渲染时别在循环里反复调用
setProperty，先收集所有值，再统一写入或用 CSS 自定义属性批量更新（如通过setAttribute('style', ...)拼接字符串） - 注意：
setProperty触发重排，对上百个图表项，优先用will-change: height或改用 CSS 动画帧控制
calc() 把数字转成宽度/高度时单位怎么配
calc() 是把变量转成尺寸的核心，但单位错一点就失效。典型现象是进度条不动、柱状图塌成一条线、或者数值超 100 后溢出容器。
-
width: calc(var(--score) * 1%)前提是父容器有明确宽度（如width: 300px），否则百分比无意义 -
height: calc(var(--value) * 2px)可行，因为var(--value)是无单位数（如--value: 42），乘以带单位值合法 - 禁止写
width: calc(var(--score) px)—— 缺少运算符，语法错误 - 数值范围必须由 JS 控制：若后端返回
--score: 150，而你期望 0–100，CSS 不会报错也不会截断，只会按 150% 渲染，导致布局破裂
颜色深浅随数值变化用 hsl() 最稳
用 rgba() 加透明度模拟深浅，结果依赖背景色，换主题就翻车；用一堆预设类名（.level-10、.level-90）又难维护。hsl() + CSS 变量是更可控的路径。
-
background-color: hsl(210, 60%, calc(60% - var(--intensity) * 0.4%))—— 数值越大，亮度越低，符合“高分亮、低分暗”的直觉 - 系数
0.4%是经验值：保证--intensity: 100时亮度不低于 20%，避免发黑不可读 - 别用
hsl(var(--hue), ...)动态调色相，人眼对色相变化不敏感，且易造成视觉混乱 - HSL 的亮度范围是 0%–100%，超出会被浏览器静默截断，所以
calc()输出必须兜底，例如加媒体查询限制最大值
伪元素和 transform 能否替代 JS 渲染图表
可以做简单示意（如单个进度条、三档状态灯），但不能替代 SVG 或 Canvas 渲染真实图表。根本限制在于：CSS 无法生成 DOM 节点、无法遍历数组、无法条件判断、无法监听数据变化。
-
::before和::after只能基于已有元素渲染一层伪内容，无法动态生成 N 个柱状图项 -
transform: scaleY(var(--height-factor))可控，但 scaleY 会缩放边框和文字，需额外重置transform-origin和font-size - hover 或 media query 触发的变量变更（如
@media (prefers-reduced-motion)）只能响应用户环境，不能响应数据流 - 真正需要交互、缩放、tooltip、坐标轴的图表，JS 注入变量只是辅助样式层，核心逻辑仍在 JS 中
最易被忽略的一点：CSS 变量不是响应式数据管道，而是单向快照。JS 写入一次，CSS 就用一次；JS 不重写，变量值就不会变——哪怕数据源早已刷新。图表动效是否平滑、数值超限时是否崩溃、换肤后颜色是否准确，全系于 JS 注入时机与约束逻辑是否严密。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
