How to implement dynamic loading of histogram in angularjs

This article mainly introduces the example of dynamic loading of histogram in angularjs. The editor thinks it is quite good. Now I will share it with you and give it as a reference. Let’s follow the editor to take a look.

1 Preparation

1. Quoting files

There is one in the link below jquery.js file, please quote it in index.html.

2. Create a new file

Create a js file and write instructions. This is also my first time to write instructions. Instructions are highly scalable and very convenient. When some effects are reused in the project, instructions can be used to reduce redundant code.

Second code writing

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

Three renderings

The above is what I compiled For everyone, I hope it will be helpful to everyone in the future.

Related articles:

How to use Vue to implement an integrated Iframe page

How to render the function render in vue (detailed tutorial)

Detailed interpretation of mixin in vue

About JS Hill sorting algorithm (detailed tutorial)

The above is the detailed content of How to implement dynamic loading of histogram in angularjs. For more information, please follow other related articles on the PHP Chinese website!