HTML图表怎么绘制？无需JS的5种CSS统计图方案
在前端开发中，绘制统计图表通常会首选 ECharts、Chart.js 等强大的 JavaScript 库。然而，在某些轻量级场景下，或者为了追求极致的加载速度与无障碍访问体验，我们完全可以抛弃沉重的 JS 依赖，仅依靠 HTML 和 CSS 来实现美观且实用的统计图。本文将介绍5种无需 JS 的纯 CSS 统计图方案，让你领略 CSS 的强大魅力。更多前端可视化技巧可以参考 www.ipipp.com。
一、 纯CSS柱状图
柱状图是最常见的统计图之一。我们可以利用 CSS3 的 Flexbox 布局，结合动态的内联样式（控制高度百分比），轻松实现垂直柱状图。核心思路是将容器的对齐方式设置为底部对齐（align-items: flex-end）。
HTML结构如下：
<div class="bar-chart"> <div class="bar" style="height: 80%;"><span>80%</span></div> <div class="bar" style="height: 50%;"><span>50%</span></div> <div class="bar" style="height: 90%;"><span>90%</span></div> <div class="bar" style="height: 65%;"><span>65%</span></div> </div>
CSS样式如下：
.bar-chart {
display: flex;
align-items: flex-end; /* 底部对齐 */
height: 200px;
gap: 15px;
padding: 10px;
border-bottom: 2px solid #333;
}
.bar {
width: 40px;
background: linear-gradient(to top, #4CAF50, #8BC34A); /* 渐变增加美感 */
border-radius: 4px 4px 0 0;
position: relative;
transition: height 0.5s ease;
}
.bar span {
position: absolute;
top: -20px;
left: 50%;
transform: translateX(-50%);
font-size: 12px;
color: #333;
}二、 纯CSS环形图
环形图常用于展示占比。传统做法比较复杂，但借助 CSS3 的 conic-gradient（圆锥渐变），我们可以仅用一行 CSS 代码就画出完美的环形图。再配合伪元素遮盖中心，形成环形效果。
HTML结构如下：
<div class="donut-chart" style="--percent: 70;"></div>
CSS样式如下：
.donut-chart {
width: 150px;
height: 150px;
border-radius: 50%;
/* 利用圆锥渐变绘制占比 */
background: conic-gradient(
#FF5722 0% calc(var(--percent) * 1%),
#eee calc(var(--percent) * 1%) 100%
);
position: relative;
}
/* 利用伪元素挖空中心 */
.donut-chart::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100px;
height: 100px;
background: #fff;
border-radius: 50%;
}三、 纯CSS进度条图
进度条图是柱状图的变体，更适合展示单一指标的完成度。通过控制内部子元素的宽度百分比，并配合圆角与渐变，可以打造极具现代感的进度条。
HTML结构如下：
<div class="progress-container"> <div class="progress-bar" style="width: 75%;">75%</div> </div>
CSS样式如下：
.progress-container {
width: 100%;
background: #eee;
border-radius: 20px;
overflow: hidden;
box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);
}
.progress-bar {
background: linear-gradient(90deg, #2196F3, #21CBF3);
color: white;
text-align: right;
padding-right: 15px;
line-height: 24px;
height: 24px;
font-size: 12px;
border-radius: 20px;
transition: width 0.4s ease;
}四、 纯CSS面积/折线图模拟
虽然 CSS 无法绘制真正意义上基于坐标系的折线图，但我们可以巧妙利用 clip-path 多边形裁剪特性，来模拟面积图的趋势走向，这在展示大致走势的轻量级场景中非常有效。
HTML结构如下：
<div class="area-chart"></div>
CSS样式如下：
.area-chart {
width: 300px;
height: 150px;
background: linear-gradient(to top, rgba(33,150,243,0.5), rgba(33,150,243,0.1));
/* 通过多边形顶点绘制面积走势 */
clip-path: polygon(
0% 100%, /* 左下角 */
0% 60%, /* 起点 */
25% 80%, /* 趋势点1 */
50% 40%, /* 趋势点2 */
75% 70%, /* 趋势点3 */
100% 20%, /* 终点 */
100% 100% /* 右下角 */
);
}五、 纯CSS树状图
树状图常用于展示层级或比例分布，利用 CSS Grid 或 Flexbox 的自动缩放特性（flex-grow），我们可以让子模块根据数据比例自动占据相应的空间。
HTML结构如下：
<div class="treemap"> <div class="tree-item" style="flex-grow: 5; background: #FF9800;">50%</div> <div class="tree-item" style="flex-grow: 3; background: #FFC107;">30%</div> <div class="tree-item" style="flex-grow: 2; background: #FFEB3B;">20%</div> </div>
CSS样式如下：
.treemap {
display: flex;
width: 100%;
height: 150px;
gap: 4px;
}
.tree-item {
display: flex;
align-items: center;
justify-content: center;
color: #333;
font-weight: bold;
font-size: 14px;
border-radius: 4px;
transition: opacity 0.3s;
}
.tree-item:hover {
opacity: 0.8;
}结语
通过以上5种方案可以看出，CSS 在数据可视化方面有着不容小觑的表达能力。无需 JS 的纯 CSS 图表不仅体积小巧、加载极快，而且在禁用 JavaScript 的环境下依然能够正常展示数据。当然，如果你的项目需要复杂的交互（如悬停提示框、动态数据更新等），还是建议使用专业的 JS 图表库；但在追求轻量与视觉表现力时，这些纯 CSS 方案绝对是你手中的利器。