angularjs实现柱状图动态加载的示例

一 准备工作

1.引用文件

下面链接中有一个jquery.js文件，请在index.html中引用。

2.新建文件

新建一个js文件，编写指令。这也是我第一次写指令，指令可扩展性强，还很方便，当项目中重复使用的一些效果时可以通过指令来减少冗余的代码。

二 代码编写

rush:js;"> /** * Created by xiehan on 2017/12/8. * 柱状图动态加载指令 */ angular.module('studyApp.directives') .directive('progressper',function ($compile,$timeout) { return { restrict: 'AE',scope: { progressData: '=' },template: '

{{item.name}}'+ '

'+ '

'+ '

'+ '

'+ '

'+ '

'+ '

',replace: true,transclude: true,link: function (scope,element,attrs) { $compile(element.contents())(scope.$new()); $timeout(function() { jQuery('.skillbar').each(function(){ jQuery(this).find('.skillbar-bar').animate({ width:jQuery(this).attr('data-percent') },1000); }); }); } } });

rush:js;"> /** * Created by xiehan on 2017/11/29. * controller文件 */ angular.module('studyApp.controllers') .controller('ProgressCtrl',function ($scope,$rootScope,$ionicHistory,$timeout,$location) { $scope.title = '进度条效果'; $scope.goBack = function () { $ionicHistory.goBack(); }; var dataInfo=[ { NAME:"测试1",NUM:30,RATE:30 },{ NAME:"测试2",NUM:25,RATE:25 },{ NAME:"测试3",NUM:45,RATE:45 } ];

handleTabData(dataInfo);
function handleTabData(data){
var widthData=[];
for(var i = 0;i<data.length;i++){
widthData.push({
width:data[i].RATE+'%',//进度条百分比
name:data[i].NAME,//标题
sum:data[i].NUM,//数量
percent:data[i].RATE+'%'}); //百分比
}
$scope.handleDataInfo = widthData;
//不使用指令加上下面的代码
// $timeout(function() {
// jQuery('.skillbar').each(function(){
// jQuery(this).find('.skillbar-bar').animate({
// width:jQuery(this).attr('data-percent')
// },1000);
// });
// });
}
});

rush:xhtml;"> 不使用指令

{{item.name}}

使用指令

rush:css;"> /***************进度条样式css********/ .skillbar { position: relative; display: block; margin-bottom: 15px; width: 100%; background: #eee; /**背景颜色**/ height: 35px; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; -webkit-transition: 0.4s linear; -moz-transition: 0.4s linear; -ms-transition: 0.4s linear; -o-transition: 0.4s linear; transition: 0.4s linear; -webkit-transition-property: width,background-color; -moz-transition-property: width,background-color; -ms-transition-property: width,background-color; -o-transition-property: width,background-color; transition-property: width,background-color; }

.skillbar-bar {
height: 35px;
width: 0px;
background: #50d2c2;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}

.skill-bar-percent {
position: absolute;
right: 10px;
top: 0;
font-size: 11px;
height: 35px;
line-height: 35px;
color: #ffffff;
color: rgba(0,0.4);
}

.progress-main{
display: flex;
display: -webkit-flex;
align-items: center;
-webkit-align-items: center;
justify-content: center;
-webkit-justify-content: center;
margin-top: 10px;
}

.progress-data{
margin-left: 5%;
width: 100%;
float: left;
}

.progress-rate{
float: right;
width: 20%;
line-height: 35px;
margin-left: 5%;
margin-top: 10px;
}

三 效果图

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。