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 相关文章推荐
html+javascript实现可拖动可提交的弹出层对话框效果
Aug 05 Javascript
php析构函数的具体用法小结
Mar 11 Javascript
javascript中的nextSibling使用陷(da)阱(keng)
May 05 Javascript
js实现DOM走马灯特效的方法
Jan 21 Javascript
js实现点击按钮后给Div图层设置随机背景颜色的方法
May 06 Javascript
DOM 高级编程
May 06 Javascript
AngularJS 表达式详细讲解及实例代码
Jul 26 Javascript
基于cssSlidy.js插件实现响应式手机图片轮播效果
Aug 30 Javascript
手把手搭建安装基于windows的Vue.js运行环境
Jun 12 Javascript
js Dom实现换肤效果
Oct 21 Javascript
node中modules.exports与exports导出的区别
Jun 08 Javascript
vue路由教程之静态路由
Sep 03 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防止CC攻击代码 php防止网页频繁刷新
2015/12/21 PHP
详解Yii2 rules 的验证规则
2016/12/02 PHP
PHP解密支付宝小程序的加密数据、手机号的示例代码
2021/02/26 PHP
document.documentElement &amp;&amp; document.documentElement.scrollTop
2007/12/01 Javascript
详解new function(){}和function(){}() 区别分析
2008/03/22 Javascript
避免 showModalDialog 弹出新窗体的原因分析
2010/05/31 Javascript
location.href语句与火狐不兼容的问题
2010/07/04 Javascript
JQuery控制radio选中和不选中方法总结
2015/04/15 Javascript
jQuery实现鼠标单击网页文字后在文本框显示的方法
2015/05/06 Javascript
zepto中使用swipe.js制作轮播图附swipeUp,swipeDown不起效果问题
2015/08/27 Javascript
jquery自定义显示消息数量
2017/12/19 jQuery
React数据传递之组件内部通信的方法
2017/12/31 Javascript
使用Vue开发一个实时性时间转换指令
2018/01/17 Javascript
JavaScript中利用Array filter() 方法压缩稀疏数组
2018/02/24 Javascript
优雅的在React项目中使用Redux的方法
2018/11/10 Javascript
详解VUE项目中安装和使用vant组件
2019/04/28 Javascript
LayUI动态设置checkbox不显示的解决方法
2019/09/02 Javascript
jQuery利用cookie 实现本地收藏功能(不重复无需多次命名)
2019/11/07 jQuery
vue学习笔记之给组件绑定原生事件操作示例
2020/02/27 Javascript
在Python中操作文件之truncate()方法的使用教程
2015/05/25 Python
Python字符串转换成浮点数函数分享
2015/07/24 Python
Python复制文件操作实例详解
2015/11/10 Python
完美解决python中ndarray 默认用科学计数法显示的问题
2018/07/14 Python
详解使用django-mama-cas快速搭建CAS服务的实现
2019/10/30 Python
python如何获取apk的packagename和activity
2020/01/10 Python
SVG实现多彩圆环倒计时效果的示例代码
2017/11/21 HTML / CSS
重写子类方法时,抛出异常的书写注意事项
2015/10/17 面试题
四年大学自我鉴定
2014/02/17 职场文书
团支书竞选演讲稿
2014/04/28 职场文书
供电工程专业求职信
2014/08/09 职场文书
在职员工证明书
2014/09/19 职场文书
我的法兰西岁月观后感
2015/06/09 职场文书
大学生支教感言
2015/08/01 职场文书
爱国教育主题班会
2015/08/14 职场文书
python tkinter模块的简单使用
2021/04/07 Python
以下牛机,你有几个
2022/04/05 无线电