circliful 圓形圖表外掛
github https://github.com/pguso/jquery-plugin-circliful
首先需要引入jQuery.js 和 circliful.js
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/jquery.circliful.js"></script>
css 我沒有引
<link rel="stylesheet" href="css/jquery.circliful.css">
這個外掛是可以引入icon的，我沒有引入，因為沒有需求
<link rel="stylesheet" href="css/material-design-iconic-font.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<div id="test-circle"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/jquery.circliful.js"></script>
<script>
$("#test-circle").circliful({
animation: 1,//
animationStep: 5,// 可以是1到100，動畫應該多快或多慢
animateInView: true,// 滾動到檢視中的動畫圓圈
percent: 38,// 百分比
percentageTextSize: 28,//百分比大小
fontColor:'#000',//百分比顏色
// text:123,//文字 在百分比下邊
textSize: 28,// 文字大小
textStyle: 'font-size: 12px;',//
textColor: '#666',//文字顏色
foregroundBorderWidth: 12,//前景圈的寬度
backgroundBorderWidth: 8,//背景圈的寬度
foregroundColor:'#000',//前景圈的顏色
backgroundColor:"#e5e5e5",//背景圈的顏色
// replacePercentageByText:123,//123 string 代替百分比
});
</script>
</body>
</html>
如果引入外掛不起作用，animateInView: true 把這個幹掉試試，我這邊是的原因是因為這個，因為我的開啟不是當前視口。