angularjs实现柱状图动态加载

一 准备工作

1.引用文件

下面链接中有一个jquery.js文件，请在index.html中引用。
链接：https://pan.baidu.com/s/14B9G34ZPoS0_P1lVJwvhWw
提取码：laze
复制这段内容后打开百度网盘手机App，操作更方便哦

2.新建文件

新建一个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}}'+
      '
'+
        '
'+
          '
{{item.sum}}
'+
        '
'+
      '
'+
      '
{{item.percent}}
'+
      '
',
      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

不使用指令
    

      

        {{item.name}}
        

          

          
{{item.sum}}
        
      
      
{{item.percent}}
    

    使用指令
    

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

三 效果图

效果图.png