JQuery实现圆圈百分比

 

详细步骤:

1,建立一个空的解决方案

2,在空的解决方案中建立一个 Web 应用程序(网站)

3,在Web 应用程序中 建立一个 Html页面

4,把JQuery脚本和插件脚本 复制到 Web 应用程序里

5,引用JQuery 脚本 <script src="jquery-1.9.1.js"></script>

6,引用插件脚本 <script src="jquery.circliful.min.js"></script>

7,添加CSS样式:

<style>
.circliful {
position: relative;
}
.circle-text, .circle-info, .circle-text-half, .circle-info-half {
width: 100%;
position: absolute;
text-align: center;
display: inline-block;
}
.circle-info, .circle-info-half {
color: #999;
}
.circliful .fa {
margin: -10px 3px 0 3px;
position: relative;
bottom: 4px;
}
</style>

8,在需要展现统计图的位置加入以下html代码:
<div id="myStat" data-dimension="250" data-text="35%" data-info="New Clients"
data-width="30" data-fontsize="38" data-percent="35" data-fgcolor="#61a9dc"
data-bgcolor="#eee" data-fill="#ddd"></div>

9,然后在页面中加入调用的代码:
</style>
<script>
$(document).ready(function () {
$(‘#myStat‘).circliful();
});
</script>

技术分享

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。