掩码上带有圆角 div 的图表
charts with rounded div on mask
我想按照附图实现这个条形图显示在圆圈下。
我可以显示条形图,但无法将 rounded/circle div 置于图表顶部或将图表置于圆圈内,因此图表将显示在圆圈内。我附上了代码。
如有任何帮助,我们将不胜感激。
$(function() {
$("#bars li .bar").each( function( key, bar ) {
var percentage = $(this).data('percentage');
$(this).animate({
'height' : percentage + '%'
}, 1000);
});
});
@import url(https://fonts.googleapis.com/css?family=Roboto:400+700);
body {
background: #30303A;
font-family: Roboto;
}
#chart {
width: 250px;
height: 200px;
margin: 30px auto 0;
display: block;
}
#chart #numbers {
width: 50px;
height: 100%;
margin: 0;
padding: 0;
display: inline-block;
float: left;
}
#chart #numbers li {
text-align: right;
padding-right: 1em;
list-style: none;
height: 29px;
border-bottom: 1px solid #444;
position: relative;
bottom: 30px;
}
#chart #numbers li:last-child {
height: 30px;
}
#chart #numbers li span {
color: #eee;
position: absolute;
bottom: 0;
right: 10px;
}
#chart #bars {
display: inline-block;
background: rgba(0, 0, 0, 0.2);
width: 200px;
height: 200px;
padding: 0;
margin: 0;
box-shadow: 0 0 0 1px #444;
}
#chart #bars li {
display: table-cell;
width: 100px;
height: 200px;
margin: 0;
text-align: center;
position: relative;
}
#chart #bars li .bar {
display: block;
width: 70px;
margin-left: 15px;
background: #49E;
position: absolute;
bottom: 0;
z-index: 1;
}
#chart #bars li .bar:before {
color: white;
content: attr(data-percentage) '%';
position: relative;
bottom: 25px;
}
#chart #bars li .bar:hover {
background: #5AE;
cursor: pointer;
}
#chart #bars li span {
color: #eee;
width: 100%;
position: absolute;
bottom: -3em;
left: 0;
text-align: center;
}
#chart #bars li .bar.bar-1 {
background: #cd9581 ;
}
#chart #bars li .bar.bar-2 {
background: #002f54 ;
}
#chart #bars li .bar.bar-3 {
background: #f5e0b8 ;
}
#mask {
border: 1px solid #fff;
border-radius: 50%;
background: #fff;
position: absolute;
z-index: 0;
width: 200px;
height: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="chart">
<div id="mask">
<ul id="bars">
<li><div data-percentage="56" class="bar bar-1"></div><span>Russian Federation</span></li>
<li><div data-percentage="33" class="bar bar-2"></div><span>All 50 countries</span></li>
</ul>
</div>
</div>
将 overflow: hidden;
添加到 #mask
在这里,这个形状和你图片里的一样,希望对你有用
从 #chart #bars li .bar
中删除了 margin-left:15px;
,将 overflow:hidden;
添加到 #mask
并将 width:100%;
添加到 #chart #bars li .bar.bar-1
和 #chart #bars li .bar.bar-2
$(function() {
$("#bars li .bar").each( function( key, bar ) {
var percentage = $(this).data('percentage');
$(this).animate({
'height' : percentage + '%'
}, 1000);
});
});
@import url(https://fonts.googleapis.com/css?family=Roboto:400+700);
body {
background: #30303A;
font-family: Roboto;
}
#chart {
width: 250px;
height: 200px;
margin: 30px auto 0;
display: block;
}
#chart #numbers {
width: 50px;
height: 100%;
margin: 0;
padding: 0;
display: inline-block;
float: left;
}
#chart #numbers li {
text-align: right;
padding-right: 1em;
list-style: none;
height: 29px;
border-bottom: 1px solid #444;
position: relative;
bottom: 30px;
}
#chart #numbers li:last-child {
height: 30px;
}
#chart #numbers li span {
color: #eee;
position: absolute;
bottom: 0;
right: 10px;
}
#chart #bars {
display: inline-block;
background: rgba(0, 0, 0, 0.2);
width: 200px;
height: 200px;
padding: 0;
margin: 0;
box-shadow: 0 0 0 1px #444;
}
#chart #bars li {
display: table-cell;
width: 100px;
height: 200px;
margin: 0;
text-align: center;
position: relative;
}
#chart #bars li .bar {
display: block;
width: 70px;
background: #49E;
position: absolute;
bottom: 0;
z-index: 1;
}
#chart #bars li .bar:before {
color: white;
content: attr(data-percentage) '%';
position: relative;
bottom: 25px;
}
#chart #bars li .bar:hover {
background: #5AE;
cursor: pointer;
}
#chart #bars li span {
color: #eee;
width: 100%;
position: absolute;
bottom: -3em;
left: 0;
text-align: center;
}
#chart #bars li .bar.bar-1 {
background: #cd9581 ;
width:100%;
}
#chart #bars li .bar.bar-2 {
background: #002f54 ;
width:100%;
}
#chart #bars li .bar.bar-3 {
background: #f5e0b8 ;
}
#mask {
overflow:hidden;
border: 1px solid #fff;
border-radius: 50%;
background: #fff;
position: absolute;
z-index: 0;
width: 200px;
height: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="chart">
<div id="mask">
<ul id="bars">
<li><div data-percentage="56" class="bar bar-1"></div><span>Russian Federation</span></li>
<li><div data-percentage="33" class="bar bar-2"></div><span>All 50 countries</span></li>
</ul>
</div>
</div>
我想按照附图实现这个条形图显示在圆圈下。
我可以显示条形图,但无法将 rounded/circle div 置于图表顶部或将图表置于圆圈内,因此图表将显示在圆圈内。我附上了代码。
如有任何帮助,我们将不胜感激。
$(function() {
$("#bars li .bar").each( function( key, bar ) {
var percentage = $(this).data('percentage');
$(this).animate({
'height' : percentage + '%'
}, 1000);
});
});
@import url(https://fonts.googleapis.com/css?family=Roboto:400+700);
body {
background: #30303A;
font-family: Roboto;
}
#chart {
width: 250px;
height: 200px;
margin: 30px auto 0;
display: block;
}
#chart #numbers {
width: 50px;
height: 100%;
margin: 0;
padding: 0;
display: inline-block;
float: left;
}
#chart #numbers li {
text-align: right;
padding-right: 1em;
list-style: none;
height: 29px;
border-bottom: 1px solid #444;
position: relative;
bottom: 30px;
}
#chart #numbers li:last-child {
height: 30px;
}
#chart #numbers li span {
color: #eee;
position: absolute;
bottom: 0;
right: 10px;
}
#chart #bars {
display: inline-block;
background: rgba(0, 0, 0, 0.2);
width: 200px;
height: 200px;
padding: 0;
margin: 0;
box-shadow: 0 0 0 1px #444;
}
#chart #bars li {
display: table-cell;
width: 100px;
height: 200px;
margin: 0;
text-align: center;
position: relative;
}
#chart #bars li .bar {
display: block;
width: 70px;
margin-left: 15px;
background: #49E;
position: absolute;
bottom: 0;
z-index: 1;
}
#chart #bars li .bar:before {
color: white;
content: attr(data-percentage) '%';
position: relative;
bottom: 25px;
}
#chart #bars li .bar:hover {
background: #5AE;
cursor: pointer;
}
#chart #bars li span {
color: #eee;
width: 100%;
position: absolute;
bottom: -3em;
left: 0;
text-align: center;
}
#chart #bars li .bar.bar-1 {
background: #cd9581 ;
}
#chart #bars li .bar.bar-2 {
background: #002f54 ;
}
#chart #bars li .bar.bar-3 {
background: #f5e0b8 ;
}
#mask {
border: 1px solid #fff;
border-radius: 50%;
background: #fff;
position: absolute;
z-index: 0;
width: 200px;
height: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="chart">
<div id="mask">
<ul id="bars">
<li><div data-percentage="56" class="bar bar-1"></div><span>Russian Federation</span></li>
<li><div data-percentage="33" class="bar bar-2"></div><span>All 50 countries</span></li>
</ul>
</div>
</div>
将 overflow: hidden;
添加到 #mask
在这里,这个形状和你图片里的一样,希望对你有用
从 #chart #bars li .bar
中删除了 margin-left:15px;
,将 overflow:hidden;
添加到 #mask
并将 width:100%;
添加到 #chart #bars li .bar.bar-1
和 #chart #bars li .bar.bar-2
$(function() {
$("#bars li .bar").each( function( key, bar ) {
var percentage = $(this).data('percentage');
$(this).animate({
'height' : percentage + '%'
}, 1000);
});
});
@import url(https://fonts.googleapis.com/css?family=Roboto:400+700);
body {
background: #30303A;
font-family: Roboto;
}
#chart {
width: 250px;
height: 200px;
margin: 30px auto 0;
display: block;
}
#chart #numbers {
width: 50px;
height: 100%;
margin: 0;
padding: 0;
display: inline-block;
float: left;
}
#chart #numbers li {
text-align: right;
padding-right: 1em;
list-style: none;
height: 29px;
border-bottom: 1px solid #444;
position: relative;
bottom: 30px;
}
#chart #numbers li:last-child {
height: 30px;
}
#chart #numbers li span {
color: #eee;
position: absolute;
bottom: 0;
right: 10px;
}
#chart #bars {
display: inline-block;
background: rgba(0, 0, 0, 0.2);
width: 200px;
height: 200px;
padding: 0;
margin: 0;
box-shadow: 0 0 0 1px #444;
}
#chart #bars li {
display: table-cell;
width: 100px;
height: 200px;
margin: 0;
text-align: center;
position: relative;
}
#chart #bars li .bar {
display: block;
width: 70px;
background: #49E;
position: absolute;
bottom: 0;
z-index: 1;
}
#chart #bars li .bar:before {
color: white;
content: attr(data-percentage) '%';
position: relative;
bottom: 25px;
}
#chart #bars li .bar:hover {
background: #5AE;
cursor: pointer;
}
#chart #bars li span {
color: #eee;
width: 100%;
position: absolute;
bottom: -3em;
left: 0;
text-align: center;
}
#chart #bars li .bar.bar-1 {
background: #cd9581 ;
width:100%;
}
#chart #bars li .bar.bar-2 {
background: #002f54 ;
width:100%;
}
#chart #bars li .bar.bar-3 {
background: #f5e0b8 ;
}
#mask {
overflow:hidden;
border: 1px solid #fff;
border-radius: 50%;
background: #fff;
position: absolute;
z-index: 0;
width: 200px;
height: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="chart">
<div id="mask">
<ul id="bars">
<li><div data-percentage="56" class="bar bar-1"></div><span>Russian Federation</span></li>
<li><div data-percentage="33" class="bar bar-2"></div><span>All 50 countries</span></li>
</ul>
</div>
</div>