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


Posted in Javascript onDecember 11, 2017

一 准备工作

1.引用文件

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

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

三 效果图

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
飞鱼(shqlsl) javascript作品集
Dec 16 Javascript
javascript中不提供sleep功能如何实现这个功能
May 27 Javascript
JavaScript实现的内存数据库LokiJS介绍和入门实例
Nov 17 Javascript
JavaScript动态改变表格单元格内容的方法
Mar 30 Javascript
详解JavaScript节流函数中的Throttle
Jul 16 Javascript
详解Node.js:events事件模块
Nov 24 Javascript
使用Bootstrap打造特色进度条效果
May 02 Javascript
JS原生带小白点轮播图实例讲解
Jul 22 Javascript
vue实现微信分享功能
Nov 28 Javascript
详解Node.js amqplib 连接 Rabbit MQ最佳实践
Jan 24 Javascript
angular4中引入echarts的方法示例
Jan 29 Javascript
JavaScript动态创建二维数组的方法示例
Feb 01 Javascript
Vue响应式原理深入解析及注意事项
Dec 11 #Javascript
js时间戳与日期格式之间转换详解
Dec 11 #Javascript
js时间戳与日期格式之间相互转换
Dec 11 #Javascript
vue.js默认路由不加载linkActiveClass问题的解决方法
Dec 11 #Javascript
基于JavaScript 性能优化技巧心得(分享)
Dec 11 #Javascript
JavaScript时间戳与时间日期间相互转换
Dec 11 #Javascript
vue项目优化之通过keep-alive数据缓存的方法
Dec 11 #Javascript
You might like
用在PHP里的JS打印函数
2006/10/09 PHP
php 将bmp图片转为jpg等其他任意格式的图片
2009/06/21 PHP
iis下php mail函数的sendmail配置方法(官方推荐)
2012/04/25 PHP
PHP垃圾回收机制引用计数器概念分析
2013/06/24 PHP
php命令行(cli)下执行PHP脚本文件的相对路径的问题解决方法
2015/05/25 PHP
PHP编写登录验证码功能 附调用方法
2016/05/19 PHP
OAuth认证协议中的HMACSHA1加密算法(实例)
2017/10/25 PHP
PHP 多进程与信号中断实现多任务常驻内存管理实例方法
2019/10/04 PHP
Laravel 5.1 框架Blade模板引擎用法实例分析
2020/01/04 PHP
接收键盘指令的脚本
2006/06/26 Javascript
你真的了解JavaScript吗?
2007/02/24 Javascript
EasyUI的treegrid组件动态加载数据问题的解决办法
2011/12/11 Javascript
CodeMirror2 IE7/IE8 下面未知运行时错误的解决方法
2012/03/29 Javascript
IE网页js语法错误2行字符1、FF中正常的解决方法
2013/09/09 Javascript
javascript常见用法总结
2014/05/22 Javascript
Javascript中的arguments与重载介绍
2015/03/15 Javascript
简单实现异步编程promise模式
2015/07/31 Javascript
JS验证邮件地址格式方法小结
2015/12/01 Javascript
Bootstrap实现响应式导航栏效果
2015/12/28 Javascript
Angular使用ng-messages与PHP进行表单数据验证
2016/12/28 Javascript
jquery dataTable 获取某行数据
2017/05/05 jQuery
JQueryMiniUI按照时间进行查询的实现方法
2017/06/07 jQuery
详解Vue Elementui中的Tag与页面其它元素相互交互的两三事
2018/09/25 Javascript
微信上传视频文件提示(推荐)
2018/11/22 Javascript
vue store之状态管理模式的详细介绍
2019/06/13 Javascript
python使用Berkeley DB数据库实例
2014/09/26 Python
python处理两种分隔符的数据集方法
2018/12/12 Python
在Python中构建增广矩阵的实现方法
2019/07/01 Python
学习和使用python的13个理由
2019/07/30 Python
Anaconda 查看、创建、管理和使用python环境的方法
2019/12/03 Python
python有几个版本
2020/06/17 Python
联想美国官方商城:Lenovo美国
2017/06/19 全球购物
小学少先队活动方案
2014/02/18 职场文书
2016年教师反腐倡廉心得体会
2016/01/13 职场文书
2016暑期社会实践心得体会范文
2016/01/14 职场文书
《搭石》教学反思
2016/02/18 职场文书