Anglejs에서 히스토그램의 동적 로딩을 구현하는 방법

이 글에서는 주로angularjs에서 히스토그램을 동적으로 로딩하는 예제를 소개합니다. 편집자가 꽤 좋다고 생각해서 지금 공유하고 참고용으로 올려드리겠습니다. 에디터 따라가서 함께 살펴볼까요

1 준비

1. 참조 파일

아래 링크에 jquery.js 파일이 있으니 index.html에서 인용해주세요.

2. 새 파일 만들기

새 js 파일을 만들고 지침을 작성합니다. 지침을 작성하는 것도 이번이 처음입니다. 지침은 확장성이 뛰어나고 매우 편리합니다. 일부 효과를 프로젝트에서 재사용할 때 지침을 사용하여 중복되는 코드를 줄일 수 있습니다.

2 코드 작성

/**
 * Created by xiehan on 2017/12/8.
 * 柱状图动态加载指令
 */
angular.module('studyApp.directives')
 .directive('progressPer', function ($compile,$timeout) {
  return {
   restrict: 'AE',
   scope: {
    progressData: '='
   },
   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);
     });
    });
   }
  }
 });

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

<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>

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

3 렌더링

위 내용은 제가 모두를 위해 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

Vue를 사용하여 통합 Iframe 페이지를 구현하는 방법

vue에서 함수 render를 렌더링하는 방법(자세한 튜토리얼)

vue에서 mixin의 자세한 해석

JS Hill 정렬 정보 알고리즘(자세한 튜토리얼)

위 내용은 Anglejs에서 히스토그램의 동적 로딩을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!