HTML无法直接绘制分组柱状图，必须依赖JavaScript图表库（如Chart.js）或SVG手动绘制；纯HTML+CSS仅能模拟简陋静态效果，不适用于真实数据场景。
HTML 本身不能直接画分组柱状图——它只是结构标记语言，没有绘图能力。真正实现分组柱状图，必须借助 JavaScript 图表库（如 Chart.js、ECharts）或 SVG 手动绘制。纯 HTML+CSS 只能模拟极简静态效果，不推荐用于真实数据场景。
用 Chart.js 实现分组柱状图最省事
Chart.js 是轻量、易上手的主流方案，原生支持 bar 类型的分组（stacked 或 grouped），默认就是分组模式（非堆叠）。
- 确保引入 Chart.js：通过 CDN 加载
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> -
type: 'bar'，且datasets中每个对象代表一组柱子（如“2023”“2024”），同一索引位置的数据自动横向并列 - 关键配置：
indexAxis: 'x'（横轴为类别，默认值可省略），responsive: true让图表自适应容器 - 避免踩坑：不要手动设置
stacked: true，否则变成堆叠图；若误设，所有分组会垂直叠加成一根柱子
const ctx = document.getElementById('myChart').getContext('2d');
new Chart(ctx, {
type: 'bar',
data: {
labels: ['Jan', 'Feb', 'Mar'],
datasets: [
{ label: 'Sales 2023', data: [12, 19, 3] },
{ label: 'Sales 2024', data: [8, 15, 10] }
]
}
});用 SVG 手动画分组柱状图要控制好坐标和间距
适合定制化强、不依赖第三方库的场景，但需自己算位置。核心是：每组柱子共享一个 x 区间，内部按宽度和间隔均分。
- 先确定画布尺寸、柱宽
barWidth、组内间距gapInGroup、组间间距gapBetweenGroups - 对每个数据组，计算其左边缘偏移：
baseX + groupIndex * (groupWidth + gapBetweenGroups)，其中groupWidth = barCount * barWidth + (barCount - 1) * gapInGroup - 高度由数据映射而来，注意 SVG y 轴向下增长，所以
y = height - scaledValue - 容易漏掉：未设置
<svg viewbox="..."></svg>导致缩放异常；未给<rect></rect>设置fill导致柱子透明
别用纯 HTML+CSS 模拟分组柱状图
有人尝试用 <div> 套 <code><div> + <code>height + display: inline-block 拼出柱子。这种做法在真实项目中基本不可行。
立即学习“前端免费学习笔记（深入）”；
- 无法对齐不同组的同类别柱子（浏览器盒模型受字体、行高、margin 折叠干扰）
- 响应式下高度比例极易错乱，
vh/%无法可靠映射数值大小 - 无障碍支持差，没语义、无数据绑定、键盘不可操作
- 哪怕只加个 tooltip 或点击事件，就得重写大半逻辑
分组柱状图的“分组”本质是数据维度对齐（同一横坐标下多系列并列），这个逻辑必须由图表库或 SVG 坐标系统承载。想绕过 JS 直接用 HTML 解决，只会把问题从“怎么画”转移到“怎么修对齐”和“怎么同步更新”。
