利用CSS和jquery 實現圓環統計圖
阿新 • • 發佈：2018-12-11
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>圓環統計圖</title>
<script src="js/jquery-1.7.1.min.js"></script>
<style>
.circlewrap {
position: relative;
display: inline-block;
}
.hugecircle {
width: 8rem;
height: 8rem;
box-shadow: 0px 0px 12px #ccc;
border-radius: 50%;
}
.circlebg,
.leftcircle,
.rightcircle,
.circlebgtop,
.number {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
z-index: 20;
border-radius: 50%;
}
.circlebg {
width: 100%;
height: 100%;
background-color: #e6e6e6;
}
.circlebgtop {
z-index: 30;
background-color: #e6e6e6;
}
.leftcircle,
.rightcircle,
.circletop {
height: 100%;
width: 100%;
}
.hugecircle .leftcircle,
.hugecircle .circlebgtop,
.hugecircle .rightcircle {
clip: rect(0, 4rem, 8rem, 0);
}
.number {
z-index: 40;
background-color: #fff;
text-align: center;
}
.mt12 {
margin-top: 0.75rem;
}
.hugecircle .number {
height: 7rem;
width: 7rem;
font-size: 1.6rem;
line-height: 4.5;
}
.circle {
-webkit-transform-origin: center;
}
</style>
</head>
<body>
<div class="circlewrap hugecircle">
<div class="circlebg"></div>
<div class="circlebgtop"></div>
<div class="leftcircle circle"></div>
<div class="rightcircle"></div>
<div class="number " data-val="0.5">
50%
</div>
</div>
<script>
/*畫圓弧統計圖*/
/*呼叫方式，多種顏色 $(select).drawCircle(true);*/
/*呼叫方式，單種顏色 $(select).drawCircle(false,'green');*/
$.fn.drawCircle = function(i, c) {
var multicolor = i;
var color = c
return $(this).each(function() {
$(this).find('.circlebgtop').css({
'opacity': '1'
})
$(this).find('.rightcircle').css({
'-webkit-transform': 'rotate(0)',
'transform': 'rotate(0deg)',
})
$(this).find('.leftcircle').css({
'-webkit-transform': 'rotate(0)',
'transform': 'rotate(0deg)',
})
var val = $(this).find('.number').attr('data-val');
if(val > 0.50000 || val == 1) {
var deg = 360 * val + 'deg';
$(this).find('.rightcircle').css({
'-webkit-transform': 'rotate(180)',
'transform': 'rotate(180deg)',
'-webkit-transition-duration':'1s',
'transition-duration':'1s',
'-webkit-transition-timing-function': 'linear',
'-webkit-animation-fill-mode': 'forwards'
});
$(this).find('.circlebgtop').css({
'-webkit-transition-duration':'1s',
'transition-duration':'1s',
'-webkit-transition-delay': '0.5s',
'opacity': '0'
})
$(this).find('.leftcircle').css({
'-webkit-transition-duration':'1s',
'transition-duration':'1s',
'-webkit-transition-timing-function': 'linear',
'-webkit-animation-fill-mode': 'forwards',
'-webkit-transform': 'rotate(' + deg + ')',
'transform': 'rotate(' + deg + ')'
})
} else if(val < 0.5000 || val == 0.50000) {
//console.log(360*val);
var deg = 360 * val + 'deg';
$(this).find('.rightcircle').css({
'-webkit-transform': 'rotate(' + deg + ')',
'transform': 'rotate(' + deg + ')',
'-webkit-transition-duration':'1s',
'transition-duration':'1s',
'-webkit-transition-timing-function': 'linear',
'-webkit-animation-fill-mode': 'forwards'
});
}
if(multicolor) {
if(val == 0) {
$(this).find('.number').css({
'color': '#999'
})
} else if(val > 0 && val < 0.5999) {
$(this).find('.rightcircle').css({
'background-color': '#ff7068'
});
$(this).find('.leftcircle').css({
'background-color': '#ff7068'
});
$(this).find('.number').css({
'color': '#ff7068'
})
} else if(val > 0.5999 && val < 0.6999) {
$(this).find('.rightcircle').css({
'background-color': '#ff9900'
});
$(this).find('.leftcircle').css({
'background-color': '#ff9900'
});
$(this).find('.number').css({
'color': '#ff9900'
})
} else if(val > 0.6999 && val < 0.8499) {
$(this).find('.rightcircle').css({
'background-color': '#4fc1e9'
});
$(this).find('.leftcircle').css({
'background-color': '#4fc1e9'
});
$(this).find('.number').css({
'color': '#4fc1e9'
})
} else if(val > 0.8499) {
$(this).find('.rightcircle').css({
'background-color': '#48cfad'
});
$(this).find('.leftcircle').css({
'background-color': '#48cfad'
});
$(this).find('.number').css({
'color': '#48cfad'
})
} else if(val == null || val == '') {
$(this).find('.number').css({
'background-color': '#e6e6e6',
'color': '#aaa'
}).text('--')
}
} else {
$(this).find('.rightcircle').css({
'background-color': color
});
$(this).find('.leftcircle').css({
'background-color': color
});
$(this).find('.number').css({
'color': color
});
$(this).find('.number').css({
'color': color
});
}
})
}
setTimeout(function(){
$('.hugecircle').drawCircle(true);
},50)
</script>
</body>
</html>