CSS实现饼图效果_css3饼状图慢慢展示资源-CSDN文库

共2个文件

html：1个

htm：1个

需积分: 49 92 浏览量 2018-08-09 11:12:27 上传评论收藏 4KB RAR 举报

在网页设计中，数据可视化是不可或缺的一部分，饼图作为其中的一种常见图表，常用于表示不同部分占整体的比例。本文将详细介绍如何使用纯CSS技术来创建饼图效果，这对于那些希望在网页上展示数据且不依赖JavaScript库的开发者来说非常有用。我们需要理解饼图的基本原理：一个完整的饼图代表100%，每个扇区则代表相应的百分比。在CSS中，我们可以利用`border-radius`属性创建圆形，然后通过调整`transform: rotate()`的角度来划分各个扇区。创建饼图的基础HTML结构通常包括一个父容器和多个子元素，每个子元素代表一个扇区。例如： ```html <div class="pie-chart"> <div class="slice" style="transform: rotate(60deg);"></div> <div class="slice" style="transform: rotate(120deg);"></div>  </div> ``` 这里的`.slice`类表示每个扇区，通过`style`属性中的`rotate`值来定义各个扇区的起始角度。接下来，我们来设置CSS样式。为了创建一个圆形，需要为父容器设置`border-radius: 50%`。同时，为了使扇区看起来像切片，我们需要给子元素设置相同的`border-radius`，并确保它们的宽度和高度相等，这样可以形成一个正方形，然后通过`transform-origin`定位旋转的中心点。 ```css .pie-chart { width: 200px; height: 200px; border-radius: 50%; position: relative; } .slice { width: 100%; height: 100%; border-radius: 50%; position: absolute; clip: rect(0, 100px, 100px, 0); } ``` 这里的`clip: rect()`属性用于裁剪每个扇区，使其只显示部分圆形。裁剪的四个参数分别是上、右、下、左四边的距离，我们将右边界设置为当前扇区的宽度，其余三边设置为0，这样就能形成一个扇形。为了填充颜色和添加过渡效果，可以给`.slice`添加背景色和`transition`属性： ```css .slice { background-color: #your-color; transition: all 0.5s ease; } ``` 如果需要动态改变扇区的大小，可以通过JavaScript获取数据并计算每个扇区对应的`rotate`角度，然后动态更新`style`属性。例如，如果总比例为100%，第1个扇区占30%，则它的`rotate`值应为`360 * 30 / 100 = 108deg`。此外，为了增强交互性，还可以添加鼠标悬停时的高亮效果，或者点击后显示详细信息。这可以通过CSS伪类（如`:hover`）和额外的HTML元素实现。总结来说，使用纯CSS实现饼图效果需要掌握以下几个关键点： 1. 基本HTML结构，每个扇区是一个子元素。 2. 利用`border-radius`和`transform: rotate()`创建扇形。 3. 使用`clip: rect()`裁剪出每个扇区。 4. 添加背景色和过渡效果来增强视觉体验。 5. 可选地，通过JavaScript动态调整扇区大小，并实现交互效果。纯CSS实现的饼图效果虽然功能相对简单，但足以满足基本的可视化需求，而且在某些情况下，它能提供更快的加载速度和更好的性能。对于那些对前端开发有深入研究的开发者，这种纯CSS方法无疑是一种有价值的技能。

资源推荐

资源详情

资源评论

收起资源包目录

纯CSS3实现饼图效果.rar （2个子文件）

纯CSS3实现饼图效果

index.html 7KB

说明.htm 3KB

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Pure CSS3 Pie Charts</title> <style> body { font-family:Tahoma, Geneva, sans-serif; } h2 { text-align:center; } .chart { position:relative; width:500px; height:250px; } .hold { position:absolute; width:200px; height:200px; clip:rect(0px,200px,200px,100px); left:300px; } .pie { position:absolute; /* width:100px; height:200px; -moz-border-radius:100px 0 0 100px; -webkit-border-radius:100px 0 0 100px; border-radius:100px 0 0 100px; -moz-transform-origin:right center; -webkit-transform-origin:right center; transform-origin:right center; */ width:200px; height:200px; clip:rect(0px,100px,200px,0px); -moz-border-radius:100px; -webkit-border-radius:100px; border-radius:100px; } .hold.gt50 { clip:rect(auto, auto, auto, auto); } .pie.fill { -moz-transform:rotate(180deg) !important; -webkit-transform:rotate(180deg) !important; -o-transform:rotate(180deg) !important; transform:rotate(180deg) !important; } .legend { clear:left; float:left; font-size:12px; border:2px solid grey; padding:5px; width:200px; } .legend DIV { margin:3px 0; } .legend span { float:right; padding-left:.5em; } #browse-FF { margin-left:10px; margin-top:-10px; } #browse-FF .pie { background-color:orange; border-color:orange; -moz-transform:rotate(116.28deg); -webkit-transform:rotate(116.28deg); -o-transform:rotate(116.28deg); transform:rotate(116.28deg); } #browse-FF-lbl { border-left:orange solid 1em; padding-left:.5em; } #browse-IE { -moz-transform:rotate(116.28deg); -webkit-transform:rotate(116.28deg); -o-transform:rotate(116.28deg); transform:rotate(116.28deg); } #browse-IE .pie { background-color:blue; border-color:blue; -moz-transform:rotate(109.8deg); -webkit-transform:rotate(109.8deg); -o-transform:rotate(109.8deg); transform:rotate(109.8deg); } #browse-IE-lbl { border-left:blue solid 1em; padding-left:.5em; } #browse-Safari { -moz-transform:rotate(226.08deg); -webkit-transform:rotate(226.08deg); -o-transform:rotate(226.08deg); transform:rotate(226.08deg); } #browse-Safari .pie { background-color:purple; border-color:purple; -moz-transform:rotate(10.08deg); -webkit-transform:rotate(10.08deg); -o-transform:rotate(10.08deg); transform:rotate(10.08deg); } #browse-Safari-lbl { border-left:purple solid 1em; padding-left:.5em; } #browse-Chrome { -moz-transform:rotate(236.16deg); -webkit-transform:rotate(236.16deg); -o-transform:rotate(236.16deg); transform:rotate(236.16deg); } #browse-Chrome .pie { background-color:darkcyan; border-color:darkcyan; -moz-transform:rotate(6.12deg); -webkit-transform:rotate(6.12deg); -o-transform:rotate(6.12deg); transform:rotate(6.12deg); } #browse-Chrome-lbl { border-left:darkcyan solid 1em; padding-left:.5em; } #browse-Other { -moz-transform:rotate(242.28deg); -webkit-transform:rotate(242.28deg); -o-transform:rotate(242.28deg); transform:rotate(242.28deg); } #browse-Other .pie { background-color:salmon; border-color:salmon; -moz-transform:rotate(5.76deg); -webkit-transform:rotate(5.76deg); -o-transform:rotate(5.76deg); transform:rotate(5.76deg); } #browse-Other-lbl { border-left:salmon solid 1em; padding-left:.5em; } #browse-Unknown { -moz-transform:rotate(248.04deg); -webkit-transform:rotate(248.04deg); -o-transform:rotate(248.04deg); transform:rotate(248.04deg); } #browse-Unknown .pie { background-color:grey; border-color:grey; -moz-transform:rotate(111.96deg); -webkit-transform:rotate(111.96deg); -o-transform:rotate(111.96deg); transform:rotate(111.96deg); } #browse-Unknown-lbl { border-left:grey solid 1em; padding-left:.5em; } #os-Win { margin-left:10px; margin-top:10px; } #os-Win .pie { background-color:blue; border-color:blue; -moz-transform:rotate(229.32deg); -webkit-transform:rotate(229.32deg); -o-transform:rotate(229.32deg); transform:rotate(229.32deg); } #os-Win-lbl { border-left:blue solid 1em; padding-left:.5em; } #os-Mac { -moz-transform:rotate(229.32deg); -webkit-transform:rotate(229.32deg); -o-transform:rotate(229.32deg); transform:rotate(229.32deg); } #os-Mac .pie { background-color:purple; border-color:purple; -moz-transform:rotate(21.6deg); -webkit-transform:rotate(21.6deg); -o-transform:rotate(21.6deg); transform:rotate(21.6deg); } #os-Mac-lbl { border-left:purple solid 1em; padding-left:.5em; } #os-Other { -moz-transform:rotate(250.92deg); -webkit-transform:rotate(250.92deg); -o-transform:rotate(250.92deg); transform:rotate(250.92deg); } #os-Other .pie { background-color:grey; border-color:grey; -moz-transform:rotate(109.44deg); -webkit-transform:rotate(109.44deg); -o-transform:rotate(109.44deg); transform:rotate(109.44deg); } #os-Other-lbl { border-left:grey solid 1em; padding-left:.5em; } </style> </head> <body> <div class="chart"> <h2>Browser Usage</h2> <div class="legend"> <div id="browse-FF-lbl">Firefox <span>32.3%</span></div> <div id="browse-IE-lbl">Internet Explorer <span>30.5%</span></div> <div id="browse-Safari-lbl">Safari <span>2.8%</span></div> <div id="browse-Chrome-lbl">Chrome <span>1.7%</span></div> <div id="browse-Other-lbl">Other <span>1.6%</span></div> <div id="browse-Unknown-lbl">Uknown <span>31.1%</span></div> </div> <div id="browse-IE" class="hold"> <div class="pie"></div> </div> <div id="browse-FF" class="hold"> <div class="pie"></div> </div> <div id="browse-Safari" class="hold"> <div class="pie"></div> </div> <div id="browse-Chrome" class="hold"> <div class="pie"></div> </div> <div id="browse-Other" class="hold"> <div class="pie"></div> </div> <div id="browse-Unknown" class="hold"> <div class="pie"></div> </div> </div> <div class="chart"> <h2>Operating System</h2> <div class="legend"> <div id="os-Win-lbl">Windows <span>63.7%</span></div> <div id="os-Mac-lbl">Macintosh <span>6.0%</span></div> <div id="os-Other-lbl">Other<span>30.4%</span></div> </div> <div id="os-Win" class="hold gt50"> <div class="pie"></div> <div class="pie fill"></div> </div> <div id="os-Mac" class="hold"> <div class="pie"></div> </div> <div id="os-Other" class="hold"> <div class="pie"></div> </div> </div> <p>The two charts above are created comletely with CSS3 properties and contain no images whatsoever.<br /> <a href="/blog/2010/02/20/pure-css3-pie-charts/">Back to blog post</a></p>More script and css style : <a href="http://www.html580.com/" title="HTML DRIVE - Free DHMTL Scripts,Jquery plugins,Javascript,CSS,CSS3,Html5 Library">www.html580.com </a> </body> </html>

评论收藏

内容反馈