当前位置： 移动技术网 > IT编程>脚本编程>AngularJs > angularjs实现柱状图动态加载的示例

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

2018年02月27日  | 移动技术网IT编程  | 我要评论

一 准备工作

1.引用文件

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

2.新建文件

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

二 代码编写

/**
 * created by xiehan on 2017/12/8.
 * 柱状图动态加载指令
 */
angular.module('studyapp.directives')
 .directive('progressper', function ($compile,$timeout) {
  return {
   restrict: 'ae',
   scope: {
    progressdata: '='
   },
   template: ' <div class="progress-main" ng-repeat="item in progressdata">'+
   '<div class="progress-data">'+
   '<span>{{item.name}}</span>'+
   '<div class="skillbar clearfix " data-percent={{item.width}}>'+
    '<div class="skillbar-bar"></div>'+
     '<div class="skill-bar-percent">{{item.sum}}</div>'+
    '</div>'+
   '</div>'+
   '<p class="progress-rate">{{item.percent}}</p>'+
   '</div>',
   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);
     });
    });
   }
  }
 });


/**
 * 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);
   //  });
   // });
  }
 });


<ion-item>不使用指令</ion-item>
  <div class="progress-main" ng-repeat="item in handledatainfo">
   <div class="progress-data">
    <span>{{item.name}}</span>
    <div class="skillbar clearfix " data-percent={{item.width}}>
     <div class="skillbar-bar"></div>
     <div class="skill-bar-percent">{{item.sum}}</div>
    </div>
   </div>
   <p class="progress-rate">{{item.percent}}</p>
  </div>
  <ion-item>使用指令</ion-item>
  <progress-per progress-data="handledatainfo"></progress-per>

/***************进度条样式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, 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;
}

三 效果图

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网