纯HTML无法直接绘制堆叠柱状图，必须借助SVG、Canvas或Chart.js等方案；SVG适合固定数据轻量需求，需手动计算y坐标与高度并注意坐标原点；Chart.js推荐大多数场景，需启用scales.y.stacked和统一stack名；CSS+div仅适用于静态示意。
纯 HTML 无法直接绘制堆叠柱状图——它没有绘图能力，必须借助 <svg>、<canvas> 或第三方库。直接写 <div> 拼高度只能模拟最简静态效果，且无法响应数据变化、缺失坐标轴和交互。
用 SVG 手动画堆叠柱状图（适合固定数据+轻量需求）
核心是计算每个分段的 y 坐标和 height，用多个 <rect> 堆在同一个 x 位置上。需提前归一化数据到像素高度（比如总高 200px），再按比例分配各段。
常见错误：忘记从上往下堆（SVG 坐标原点在左上角），导致颜色顺序错乱；或未累加 y 值，所有矩形重叠在顶部。
- 先算每组数据的总和，确定基准高度比例
- 对每个分段，
y = 上一段的 y + 上一段的 height，首段y = 图表高度 - 总高度 × 比例 - 务必设置
fill和明确的width，否则视觉不可见
<svg width="300" height="200"> <!-- 第一组：A=30, B=50, C=20，总和100 → 比例1:1 --> <rect x="20" y="100" width="40" height="30" fill="#3498db"/> <rect x="20" y="70" width="40" height="50" fill="#2ecc71"/> <rect x="20" y="20" width="40" height="20" fill="#e74c3c"/> </svg>
用 Chart.js 渲染响应式堆叠柱状图（推荐大多数场景）
Chart.js 的 stacked 选项开箱即用，但容易忽略两个关键配置点：一个是 scales.y.stacked 必须设为 true，另一个是每个数据集的 stack 名要一致（默认都是 "stack0"，但显式声明更稳妥）。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
使用场景：需要动态更新、带 tooltip、缩放、导出或适配移动端时，硬写 SVG 成本远高于引入轻量库。
- 引入 Chart.js：
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> - HTML 中放一个
<canvas id="myChart"></canvas> - JS 初始化时，在
options.scales.y.stacked和datasets[i].stack同时启用
用 CSS + div 模拟（仅限示意、无数据驱动）
仅适用于 PPT 式静态展示，比如文档里快速画个示意图。本质是用 display: flex 或 position: relative/absolute 把多个 <div> 垂直叠在一起，靠 height 和 background-color 表达分段。
容易踩的坑：百分比高度依赖父容器有明确 height；无法对齐刻度；鼠标悬停无法识别具体分段；数据变就得手动改 CSS。
- 父容器必须设
height，子<div>用%高度才有效 - 用
flex-direction: column-reverse可避免手动算 top 值（让第一个 div 在底部） - 别指望它能和真实图表库一样处理负值、空数据或动画
真正做数据可视化时，堆叠逻辑本身不难，难的是坐标轴对齐、标签自动避让、响应式缩放和无障碍支持——这些都建议交给成熟库处理。手写 SVG 适合定制化强、数据极简且不常变的场景；CSS 模拟只该出现在内部文档草稿里。
