圆形指示器radialIndicator控件的使用

1、首先需要引入js文件：
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/radialIndicator.js"></script>

 

2、定义HTML 渲染指示器DOM

<div id="indicatorContainer"></div>

 

3、初始化加载圆形指示器
var progObj = radialIndicator('#indicatorContainer' , {
radius:50, //定义圆形指示器的内部的圆的半径。
barBgColor:"#CCC", //定义圆形指示器的刻度条的背景颜色。
barColor:"#99CC33", //指示器数值样式
percentage:true, //设置为true显示圆形指示器的百分比数值。
// initValue:$("#indicatorVue").val(), //圆形指示器初始化的值。
minValue:0, //圆形指示器的最小值。
maxValue:100

});
progObj.animate($("#indicatorVue").val()); //启动动画

 

4、获取和设置指示器的数值：

//获取指示器的数值

var val = progObj.val();

//设置指示器的数据，动画效果

progObj.animate(80); 

 

AngularJS 实现：

1、需要引入的文件：

<script src="js/radialIndicator.js"></script>

<script src="js/angular.radialIndicator.js"></script>

 

2、HTML 加载指示器渲染DOM

<div class="circular" ng-app="myApp" ng-controller="MyController">

<div data-radial-indicator="indicatorOption" data-radial-indicator-id="indicator1"></div>

</div>

 

3、初始化加载AngularJS 圆形指示器实例：

angular.module('myApp', ['radialIndicator'])

.controller('MyController', ['$scope','radialIndicatorInstance' ,function ($scope,radialIndicatorInstance) {

$scope.numbers = 70;

$scope.indicatorOption = {

radius : 50,

percentage :true,

barColor : "#87CEEB",

minValue:0,

maxValue:100

//initValue:$scope.numbers

};

angular.element(window).bind('load', function() {

radialIndicatorInstance['indicator1'].animate(70);

});

}]); 

 

API:

 

原具体DOME 可查看：http://download.csdn.net/detail/china_guanq/9918725

 

置身单生理由，熟人不好下手，生人不好开口，点赞总是软手，说来无不心痛～(￣▽￣～)(～￣▽￣)～

 

QQ群：595377655。问题总是能出现并着手解决的地方，欢迎加入。