Comment implémenter le chargement dynamique de l'histogramme dans AngularJS-js tutoriel-php.cn

Comment implémenter le chargement dynamique de l'histogramme dans AngularJS

亚连

Libérer： 2018-06-21 14:40:21

original

1540 Les gens l'ont consulté

Cet article présente principalement l'exemple de chargement dynamique d'histogramme dans angulairejs. L'éditeur pense que c'est plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur pour y jeter un œil

Préparation

1 Fichiers cités

Il y en a un dans le lien ci-dessous. jquery.js, veuillez le citer dans index.html.

2. Créez un nouveau fichier

Créez un fichier js et écrivez les instructions. C'est aussi la première fois que j'écris des instructions. Les instructions sont hautement évolutives et très pratiques. Lorsque certains effets sont réutilisés dans le projet, les instructions peuvent être utilisées pour réduire le code redondant.

Deuxième écriture du code

/**
 * Created by xiehan on 2017/12/8.
 * 柱状图动态加载指令
 */
angular.module(&#39;studyApp.directives&#39;)
 .directive(&#39;progressPer&#39;, function ($compile,$timeout) {
  return {
   restrict: &#39;AE&#39;,
   scope: {
    progressData: &#39;=&#39;
   },
   template: &#39; <p class="progress-main" ng-repeat="item in progressData">&#39;+
   &#39;<p class="progress-data">&#39;+
   &#39;<span>{{item.name}}</span>&#39;+
   &#39;<p class="skillbar clearfix " data-percent={{item.width}}>&#39;+
    &#39;<p class="skillbar-bar"></p>&#39;+
     &#39;<p class="skill-bar-percent">{{item.sum}}</p>&#39;+
    &#39;</p>&#39;+
   &#39;</p>&#39;+
   &#39;<p class="progress-rate">{{item.percent}}</p>&#39;+
   &#39;</p>&#39;,
   replace: true,
   transclude: true,
   link: function (scope, element, attrs) {
    $compile(element.contents())(scope.$new());
    $timeout(function() {
     jQuery(&#39;.skillbar&#39;).each(function(){
      jQuery(this).find(&#39;.skillbar-bar&#39;).animate({
       width:jQuery(this).attr(&#39;data-percent&#39;)
      },1000);
     });
    });
   }
  }
 });

Copier après la connexion

/**
 * Created by xiehan on 2017/11/29.
 * controller文件
 */
angular.module(&#39;studyApp.controllers&#39;)
 .controller(&#39;ProgressCtrl&#39;, function ($scope, $rootScope, $ionicHistory,$timeout,$location) {
  $scope.title = &#39;进度条效果&#39;;
  $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+&#39;%&#39;,    //进度条百分比
     name:data[i].NAME,      //标题
     sum:data[i].NUM,       //数量
     percent:data[i].RATE+&#39;%&#39;});  //百分比
   }
   $scope.handleDataInfo = widthData;
   //不使用指令加上下面的代码
   // $timeout(function() {
   //  jQuery(&#39;.skillbar&#39;).each(function(){
   //   jQuery(this).find(&#39;.skillbar-bar&#39;).animate({
   //    width:jQuery(this).attr(&#39;data-percent&#39;)
   //   },1000);
   //  });
   // });
  }
 });

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

Trois rendus