HTML柱状图制作教程，零基础也能学会

<div style="height: 60px; background: #4285f4; width: 40px;"></div>

这种写法的问题很实际：

• 高度需手动换算（比如最大值 100 → 高度 100px，那值为 30 就得设 30px），数据一变就要全改
• 没坐标轴、没标签、没悬停提示，用户看不出数值和含义
• 响应式困难：宽度缩小时柱子挤成线，高度比例全乱
• 无障碍支持为零：screen reader 完全读不出这是图表、数据是什么

推荐方案：用 Chart.js 快速渲染可访问 bar chart

Chart.js 是轻量、默认支持响应式、自带 ARIA 标签、无需手算比例的主流选择。只需三步：

• 在 HTML 中引入 Chart.js（CDN）：

  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

• 放一个 容器：

  <canvas id="myBarChart" width="400" height="200"></canvas>

• 用 JS 初始化图表（自动按数据最大值归一化高度）：

  const ctx = document.getElementById('myBarChart').getContext('2d');<br>new Chart(ctx, {<br>  type: 'bar',<br>  data: {<br>    labels: ['Jan', 'Feb', 'Mar'],<br>    datasets: [{<br>      label: 'Sales',<br>      data: [12, 19, 3],<br>      backgroundColor: '#4285f4'<br>    }]<br>  }<br>

注意：width/height 在 上只是初始像素尺寸，Chart.js 默认启用响应式（responsive: true），会自动缩放适配容器。

如果非要用原生 HTML+CSS 模拟（仅限示意/静态场景）

仅当数据固定、无交互、不需适配、且明确接受维护成本时才考虑。关键控制点：

• 用 flex 或 grid 布局排布柱子，别用浮动或绝对定位
• 高度统一用百分比（如 height: 75%），配合父容器设定 max-height 和 position: relative 作基准
• 每个柱子用
  补基础语义
• 加 title 属性或伪元素显示数值（但移动端不保证触发）：

  .bar::after { content: attr(data-value); }

这种写法下，data-value="12" 必须和 height 手动同步，漏改一个就图表失真。

真正要用柱状图，别卡在“纯 HTML”上——Chart.js 一行 CDN、十几行配置就能跑起来；想深度定制，选 D3.js；连 JS 都不想碰，就导出 SVG 图片嵌入。最耗时间的从来不是写代码，而是把数据对齐坐标、处理空值、应对小屏幕截断——这些，手写