用纯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控制它们的高度来反映数值大小。
想象一下，我们有一组数据，比如不同产品的销售额。我们可以用一个无序列表
- 来包裹这些数据项，每个
代表一个柱子。
立即学习“前端免费学习笔记（深入）”；
这里我用了CSS变量--height和--color来动态设置每个柱子的高度和颜色。这种做法，我个人觉得比直接在CSS里写死要灵活得多，虽然数据还是写在HTML里，但至少样式和结构稍微分开了点。
接下来是CSS部分，让这些
.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图表在实际项目中的优势与局限性？
说实话，纯CSS图表在实际项目中的地位挺微妙的。它有自己独特的优势，但局限性也相当明显。
优势方面：
php订单系统可以整合支付宝接口
一、系统设置：用Dreamweaver等网页设计软件在代码视图下打开【dddingdan/config.php】系统设置文件，按注释说明进行系统设置。 二、系统使用：WFPHP在线订单系统是无台后的，不用数据库，也不用安装，解压源码包后，先进行系统设置，然后把整个【dddingdan】文件夹上传到服务器。在网页中要插入订单系统的位置，插入系统调用代码： 注意：id=01就表示使用样式01，如果要使
0 查看详情 轻量与高性能： 这是它最大的卖点。没有JavaScript库的引入，文件体积小，加载速度快，对网络和设备性能要求低。对于那些内容为主、对交互性要求不高的静态站点或博客，这简直是福音。易于主题化和定制： 所有的样式都写在CSS里，你可以通过修改几行CSS变量或者替换样式表，就能彻底改变图表的外观。这比去研究一个JS库的API来定制主题要直接得多。脱离JavaScript依赖： 在某些特定环境下，比如内容安全策略（CSP）非常严格，或者JavaScript被禁用时，纯CSS图表依然能正常显示。这在一些政府或企业内网应用中可能有用。SEO友好： 毕竟数据和标签都在HTML结构里，搜索引擎抓取起来毫无压力，有利于内容的索引和排名。响应式设计： 结合Flexbox或Grid布局，纯CSS图表天生就能很好地适应不同屏幕尺寸，无需额外的JS代码来处理布局变化。
局限性方面：
交互性缺失： 这是硬伤。你无法轻松实现复杂的鼠标悬停提示（tooltip）、点击事件触发数据筛选、数据钻取、拖拽缩放等高级交互功能。虽然可以利用:hover和:focus做一些简单的视觉反馈，但离真正的交互式图表还差得很远。数据绑定与动态更新困难： 数据通常需要硬编码在HTML或通过CSS变量注入，这意味着数据更新时需要重新生成HTML或CSS。对于实时数据或频繁变化的数据，这几乎不可行。JavaScript库在这方面有天然优势，能直接绑定数据模型。图表类型受限： 纯CSS能做的图表类型非常有限。柱状图、简单的条形图、进度条、两三段的饼图（用conic-gradient实现多段饼图虽然理论可行，但复杂度和兼容性是个问题）是比较容易实现的。但折线图、散点图、堆叠图、雷达图、漏斗图这些，几乎不可能纯CSS实现，或者说实现起来的代价和复杂度远超其价值。可维护性挑战： 当图表变得稍微复杂一点，比如需要显示多组数据、有复杂的刻度线或网格时，纯CSS代码会变得非常冗长和难以管理。HTML结构也可能为了适应CSS样式而变得不够语义化。动画效果有限： 虽然CSS3的transition和animation可以实现不错的入场动画或状态切换动画，但相比JS库提供的流畅、复杂、基于数据变化的动画，还是有差距。
所以，我的建议是，如果你的项目需要展示的数据量不大，图表样式相对固定，且对交互性要求不高，那么纯CSS图表是一个值得考虑的方案。但如果涉及到大数据、实时更新、复杂交互，或者需要多种图表类型，那还是老老实实选择ECharts、Chart.js、D3.js这些专业的JavaScript图表库吧。
如何用CSS实现不同类型的图表？
除了上面提到的柱状图，纯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来显示进度。
.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图表可维护性与可访问性的技巧？
既然决定要用纯CSS做图表，那么在可维护性和可访问性上多花点心思，绝对是值得的。不然，随着项目的发展，它可能很快变成一个难以触碰的“雷区”。
提升可维护性：
拥抱CSS变量（Custom Properties）： 就像我上面柱状图的例子，把颜色、高度基准、间距等可变参数定义成CSS变量。这样，修改图表样式时，只需要改动变量的值，而不是在多处查找替换。这对于主题切换或快速调整样式非常有用。语义化的HTML结构： 尽量让HTML结构本身就带有意义。例如，用
- 和
来表示一组数据项，用
conic-gradient或者复杂的定位）旁边，留下清晰的注释，解释你的意图和实现原理。这对于后续的维护者（甚至未来的你自己）来说，都是巨大的帮助。数据嵌入方式： 尽量通过data-*属性将数据嵌入到HTML元素中，而不是直接写在CSS变量里。虽然CSS变量能直接用，但data-*属性更符合HTML的数据存储语义，未来如果需要JavaScript来增强图表功能，这些数据也更容易被JS读取和处理。
提升可访问性：
语义化HTML是基础： 再次强调，使用正确的HTML标签至关重要。屏幕阅读器会根据这些标签来理解页面的结构和内容。提供替代文本： 对于纯视觉的图表，必须提供替代文本或描述。使用
aria-label或aria-describedby：aria-label提供一个简洁的描述，aria-describedby可以指向页面中一个更详细的描述元素。如果数据点有标签，确保它们是可读的，并且与视觉效果一致。颜色对比度： 确保图表中的颜色（背景色、数据条颜色、文本颜色等）具有足够的对比度，以便色盲用户或视力不佳的用户也能清晰地辨认。可以使用WCAG（Web Content Accessibility Guidelines）推荐的对比度工具进行检查。键盘导航考虑： 虽然纯CSS图表本身通常不具备交互性，但如果你的图表元素（比如每个柱子）是可聚焦的（例如，你给它们加了:hover效果，并希望用户能通过键盘tab键聚焦），那么要确保它们能够被键盘正确访问到，并且有可见的焦点指示器（:focus样式）。避免纯视觉传达信息： 不要仅仅通过颜色或形状来传达关键信息。例如，如果某个柱子代表“警告”，除了颜色变红，最好也通过文字标签、图标或模式来明确指示。
总的来说，纯CSS图表是Web开发中一个有趣的技巧，它在特定场景下能发挥优势。但选择它，就意味着你要接受它在功能和交互上的限制，并需要在可维护性和可访问性上付出额外的努力。
以上就是怎样用CSS制作数据统计图表—纯CSS图表设计的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1101149.html
微信扫一扫 
支付宝扫一扫 
