如何在CSS中制作饼图
如何在CSS中制作饼图
提问于 2012-04-05 20:00:19
如何使用CSS创建像下面这样的饼图？
回答 6
Stack Overflow用户
回答已采纳
发布于 2013-02-28 05:13:02
哦天啊!你见过谷歌图表工具吗？
https://google-developers.appspot.com/chart/interactive/docs/gallery/piechart
这很愚蠢，很容易实现，但我的问题是“外部api”部分。如果谷歌决定这样做，或者谷歌倒闭，拜拜图表！但就美观和其他图表的选择而言，谷歌图表是一个很酷的发现。
Stack Overflow用户
发布于 2018-08-04 04:19:54
我发现this是最简单的CSS-only解决方案。下面进行了一些简化。
.pieContainer {
height: 150px;
position: relative;
}
.pieBackground {
position: absolute;
width: 150px;
height: 150px;
border-radius: 100%;
box-shadow: 0px 0px 8px rgba(0,0,0,0.5);
}
.pie {
transition: all 1s;
position: absolute;
width: 150px;
height: 150px;
border-radius: 100%;
clip: rect(0px, 75px, 150px, 0px);
}
.hold {
position: absolute;
width: 150px;
height: 150px;
border-radius: 100%;
clip: rect(0px, 150px, 150px, 75px);
}
#pieSlice1 .pie {
background-color: #1b458b;
transform:rotate(30deg);
}
#pieSlice2 {
transform: rotate(30deg);
}
#pieSlice2 .pie {
background-color: #0a0;
transform: rotate(60deg);
}
#pieSlice3 {
transform: rotate(90deg);
}
#pieSlice3 .pie {
background-color: #f80;
transform: rotate(120deg);
}
#pieSlice4 {
transform: rotate(210deg);
}
#pieSlice4 .pie {
background-color: #08f;
transform: rotate(10deg);
}
#pieSlice5 {
transform: rotate(220deg);
}
#pieSlice5 .pie {
background-color: #a04;
transform: rotate(70deg);
}
#pieSlice6 {
transform: rotate(290deg);
}
#pieSlice6 .pie {
background-color: #ffd700;
transform: rotate(70deg);
}
.innerCircle {
position: absolute;
width: 120px;
height: 120px;
background-color: #444;
border-radius: 100%;
top: 15px;
left: 15px;
box-shadow: 0px 0px 8px rgba(0,0,0,0.5) inset;
color: white;
}
.innerCircle .content {
position: absolute;
display: block;
width: 120px;
top: 30px;
left: 0;
text-align: center;
font-size: 14px;
} <div class="pieContainer">
<div class="pieBackground"></div>
<div id="pieSlice1" class="hold"><div class="pie"></div></div>
<div id="pieSlice2" class="hold"><div class="pie"></div></div>
<div id="pieSlice3" class="hold"><div class="pie"></div></div>
<div id="pieSlice4" class="hold"><div class="pie"></div></div>
<div id="pieSlice5" class="hold"><div class="pie"></div></div>
<div id="pieSlice6" class="hold"><div class="pie"></div></div>
<div class="innerCircle"><div class="content"><b>Data</b><br>from 16<sup>th</sup> April, 2014</div></div>
</div>
Stack Overflow用户
发布于 2019-05-23 17:43:34
我看到一些人选择Google开发者工具，它非常难，而且它也使用JS，你只想要CSS。所以这里是最简单的方法，纯CSS，通过使用背景渐变。
.pie {
width: 400px;
height: 400px;
background-image: conic-gradient(orange 64%, blue 17%, black);
border-radius: 50%
}<div class="pie"></div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/10028182
复制相关文章
相似问题
腾讯云开发者
