반응형
소 스
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script type="text/javascript" src="js/jquery.easypiechart.js"></script>
<meta charset=utf-8 />
<title>Easy Pie Chart</title>
<style>
.chart {
position: relative;
display: inline-block;
width: 110px;
height: 110px;
margin-top: 20px;
margin-bottom: 20px;
text-align: center;
}
.chart.chart-widget-pie {
margin-top: 5px;
margin-bottom: 5px;
}
.chart canvas {
position: absolute;
top: 0;
left: 0;
}
.percent {
display: inline-block;
line-height: 110px;
z-index: 2;
}
.percent:after {
content: '%';
margin-left: 0.1em;
font-size: .8em;
}
</style>
<script>
jQuery(document).ready(function($) {
$('.easy-pie-chart-1').easyPieChart({
easing: 'easeOutBounce',
barColor : '#8CC152',
lineWidth: 3,
onStep: function(from, to, percent) {
$(this.el).find('.percent').text(Math.round(percent));
}
});
$('.easy-pie-chart-2').easyPieChart({
easing: 'easeOutBounce',
barColor : '#F6BB42',
lineWidth: 3,
trackColor : false,
lineCap : 'butt',
onStep: function(from, to, percent) {
$(this.el).find('.percent').text(Math.round(percent));
}
});
$('.easy-pie-chart-3').easyPieChart({
easing: 'easeOutBounce',
barColor : '#E9573F',
lineWidth: 10,
lineCap : 'square',
onStep: function(from, to, percent) {
$(this.el).find('.percent').text(Math.round(percent));
}
});
$('.easy-pie-chart-4').easyPieChart({
easing: 'easeOutBounce',
barColor : '#3BAFDA',
lineWidth: 20,
onStep: function(from, to, percent) {
$(this.el).find('.percent').text(Math.round(percent));
}
});
});
</script>
</head>
<body>
<div class="chart easy-pie-chart-1" data-percent="86">
<span class="percent"></span>
</div>
<div class="chart easy-pie-chart-2" data-percent="86">
<span class="percent"></span>
</div>
<div class="chart easy-pie-chart-3" data-percent="86">
<span class="percent"></span>
</div>
<div class="chart easy-pie-chart-4" data-percent="56">
<span class="percent"></span>
</div>
</body>
</html>
실행결과
링크
https://github.com/rendro/easy-pie-chart
반응형
'DEMO CODE > jQuery 활용' 카테고리의 다른 글
| PIP 구현 (Picture-in-Picture) (0) | 2021.03.03 |
|---|---|
| [Chart] Morris.js Donut Chart (0) | 2016.03.25 |
| [Chart] Morris.js Bar Chart (0) | 2016.03.25 |
| [Chart] Morris.js Area Chart (0) | 2016.03.25 |
| [Chart] Morris.js Line Chart (0) | 2016.03.25 |
