用纯css可以制作简单静态的数据统计图表，如柱状图、饼图和进度条等，通过html元素与css3特性实现。1. 柱状图利用flex布局和css变量控制高度与颜色，结合transition实现动画效果；2. 饼图可用conic-gradient定义各部分比例，但动态更新困难；3. 进度条通过控制内层div的宽度展示进度，支持简单的动画。优势包括轻量、高性能、易于定制和响应式设计，适用于静态站点或博客；局限在于交互性差、数据更新不便、图表类型受限且维护复杂，不适用于实时数据或高级交互需求。提升可维护性可通过css变量、语义化html和模块化css，增强可访问性则需关注颜色对比度、替代文本及键盘导航支持。
用纯CSS来制作数据统计图表，这事儿听起来有点“反直觉”，毕竟我们习惯了用JavaScript库来处理数据可视化。但实际上，对于一些相对简单、静态的数据展示，CSS确实能做到，而且效果往往出人意料地好。它主要通过巧妙地运用HTML元素的尺寸、颜色、定位以及一些CSS3的特性（比如transform、conic-gradient）来模拟图表的视觉效果，省去了JavaScript的开销，让页面加载更快，也更容易集成到纯静态的网站里。
要用纯CSS制作图表，最直观的例子就是柱状图了。它的核心思路就是把每个数据点表示成一个HTML元素，然后用CSS控制它们的高度来反映数值大小。
想象一下，我们有一组数据，比如不同产品的销售额。我们可以用一个无序列表<ul>来包裹这些数据项，每个<li>代表一个柱子。
立即学习“前端免费学习笔记（深入）”；
<div class="chart-container">
<ul class="bar-chart">
<li style="--height: 70%; --color: #4CAF50;"><span>产品A</span></li>
<li style="--height: 55%; --color: #2196F3;"><span>产品B</span></li>
<li style="--height: 90%; --color: #FFC107;"><span>产品C</span></li>
<li style="--height: 40%; --color: #9C27B0;"><span>产品D</span></li>
<li style="--height: 80%; --color: #FF5722;"><span>产品E</span></li>
</ul>
</div>这里我用了CSS变量--height和--color来动态设置每个柱子的高度和颜色。这种做法，我个人觉得比直接在CSS里写死要灵活得多，虽然数据还是写在HTML里，但至少样式和结构稍微分开了点。
接下来是CSS部分，让这些<li>真正变成柱子：
.chart-container {
width: 100%;
max-width: 600px;
margin: 40px auto;
padding: 20px;
background: #f9f9f9;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
box-sizing: border-box; /* 避免padding导致宽度溢出 */
}
.bar-chart {
display: flex;
align-items: flex-end; /* 柱子从底部开始生长 */
height: 250px; /* 图表总高度 */
list-style: none;
padding: 0;
margin: 0;
border-bottom: 1px solid #ccc; /* X轴线 */
position: relative; /* 用于定位标签 */
}
.bar-chart li {
flex-grow: 1; /* 每个柱子等宽 */
margin: 0 5px;
background-color: var(--color, #666); /* 使用自定义颜色，或默认色 */
height: var(--height, 0); /* 使用自定义高度 */
position: relative;
border-radius: 4px 4px 0 0;
transition: height 0.5s ease-out; /* 动画效果，让它看起来更生动 */
}
.bar-chart li span {
position: absolute;
bottom: -25px; /* 放在柱子下方 */
left: 50%;
transform: translateX(-50%);
white-space: nowrap;
font-size: 0.8em;
color: #555;
}
/* 可以加个hover效果，增加交互感 */
.bar-chart li:hover {
filter: brightness(1.1);
cursor: pointer;
}这样，一个基本的纯CSS柱状图就出来了。你甚至可以给它加上响应式设计，让flex-wrap在小屏幕上自动换行，或者调整flex-basis。数据标签我放在了柱子下方，当然也可以放在柱子内部顶部，或者通过伪元素显示具体数值。
说实话，纯CSS图表在实际项目中的地位挺微妙的。它有自己独特的优势，但局限性也相当明显。
优势方面：
局限性方面：
:hover和:focus做一些简单的视觉反馈，但离真正的交互式图表还差得很远。conic-gradient实现多段饼图虽然理论可行，但复杂度和兼容性是个问题）是比较容易实现的。但折线图、散点图、堆叠图、雷达图、漏斗图这些，几乎不可能纯CSS实现，或者说实现起来的代价和复杂度远超其价值。transition和animation可以实现不错的入场动画或状态切换动画，但相比JS库提供的流畅、复杂、基于数据变化的动画，还是有差距。所以，我的建议是，如果你的项目需要展示的数据量不大，图表样式相对固定，且对交互性要求不高，那么纯CSS图表是一个值得考虑的方案。但如果涉及到大数据、实时更新、复杂交互，或者需要多种图表类型，那还是老老实实选择ECharts、Chart.js、D3.js这些专业的JavaScript图表库吧。
除了上面提到的柱状图，纯CSS还能勉强应付一些其他类型的图表，但难度和复杂度会直线上升。
1. 柱状图/条形图 (Bar/Column Charts):
这个上面已经详细说了，核心就是display: flex或display: grid配合height或width来控制柱子/条的长度。
/* 柱状图，上面已给出 */
/* 条形图（横向柱状图）类似，只是把height换成width，flex-direction换成column */
.bar-chart.horizontal {
flex-direction: column; /* 垂直排列条形 */
height: auto;
width: 100%; /* 容器宽度 */
}
.bar-chart.horizontal li {
height: 30px; /* 条的高度固定 */
width: var(--width, 0); /* 宽度由数据决定 */
margin: 5px 0;
border-radius: 0 4px 4px 0; /* 圆角在右侧 */
}
.bar-chart.horizontal li span {
top: 50%;
left: 10px; /* 标签在条形左侧 */
transform: translateY(-50%);
}2. 饼图 (Pie Charts): 这个稍微有点意思，但实现起来有点“魔法”。最常见的两种纯CSS饼图是：
transform: rotate和overflow: hidden来模拟。一个圆，一半用一个颜色，另一半用另一个颜色，然后旋转其中一个半圆来表示比例。这种方式，说实话，只适用于两段数据，再多就麻烦了。conic-gradient): 这是目前纯CSS实现多段饼图最优雅的方式，但需要浏览器支持conic-gradient（现代浏览器基本都支持了）。/* 示例：使用conic-gradient的饼图 */
.pie-chart {
width: 200px;
height: 200px;
border-radius: 50%;
background: conic-gradient(
#FFC107 0% 25%, /* 25% 的黄色 */
#2196F3 25% 60%, /* 从25%到60%的蓝色 (35%) */
#4CAF50 60% 100% /* 从60%到100%的绿色 (40%) */
);
margin: 40px auto;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}这种方式，数据需要手动计算百分比和起始/结束角度，并直接写在conic-gradient里。虽然简洁，但动态性几乎没有。如果数据变化，你得手动改CSS，这显然不是一个好主意。
3. 进度条 (Progress Bars):
这个相对简单，一个外层div作为容器，一个内层div作为进度条，通过控制内层div的width来显示进度。
<div class="progress-bar-container">
<div class="progress-bar" style="--progress: 75%;"></div>
</div>.progress-bar-container {
width: 100%;
max-width: 400px;
height: 20px;
background-color: #e0e0e0;
border-radius: 10px;
overflow: hidden; /* 确保内部进度条不溢出 */
margin: 20px auto;
}
.progress-bar {
height: 100%;
width: var(--progress, 0); /* 进度 */
background-color: #4CAF50;
border-radius: 10px;
transition: width 0.6s ease-out; /* 动画效果 */
}4. 折线图 (Line Charts):
这个是纯CSS图表里最难搞的。你几乎不可能用CSS画出平滑的曲线，因为CSS没有路径绘制能力（SVG可以，但那就不是纯CSS了）。能做的，顶多是模拟阶梯状的折线图，或者用伪元素在数据点上放置标记，然后用边框或者transform来连接，但效果往往差强人意，而且非常依赖特定的HTML结构。我个人觉得，折线图如果不是SVG或者Canvas，纯CSS做出来几乎没有实用价值。
既然决定要用纯CSS做图表，那么在可维护性和可访问性上多花点心思，绝对是值得的。不然，随着项目的发展，它可能很快变成一个难以触碰的“雷区”。
提升可维护性：
<ul>和<li>来表示一组数据项，用<figure>和<figcaption>来包裹图表和标题。这不仅有助于CSS选择器更清晰，也方便未来可能需要引入的JavaScript或屏幕阅读器理解内容。conic-gradient或者复杂的定位）旁边，留下清晰的注释，解释你的意图和实现原理。这对于后续的维护者（甚至未来的你自己）来说，都是巨大的帮助。data-*属性将数据嵌入到HTML元素中，而不是直接写在CSS变量里。虽然CSS变量能直接用，但data-*属性更符合HTML的数据存储语义，未来如果需要JavaScript来增强图表功能，这些数据也更容易被JS读取和处理。提升可访问性：
<figure>和<figcaption>：<figcaption>可以作为图表的标题或简要描述。aria-label或aria-describedby：aria-label提供一个简洁的描述，aria-describedby可以指向页面中一个更详细的描述元素。:hover效果，并希望用户能通过键盘tab键聚焦），那么要确保它们能够被键盘正确访问到，并且有可见的焦点指示器（:focus样式）。总的来说，纯CSS图表是Web开发中一个有趣的技巧，它在特定场景下能发挥优势。但选择它，就意味着你要接受它在功能和交互上的限制，并需要在可维护性和可访问性上付出额外的努力。
以上就是怎样用CSS制作数据统计图表—纯CSS图表设计的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
265
收藏
