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 相关文章推荐
js和jquery批量绑定事件传参数一(新猪猪原创)
Jun 23 Javascript
jquery异步请求实例代码
Jun 21 Javascript
jQuery遍历页面所有CheckBox查看是否被选中的方法
Apr 14 Javascript
学习JavaScript设计模式之装饰者模式
Jan 19 Javascript
第二章之Bootstrap 页面排版样式
Apr 25 Javascript
Vue.js第二天学习笔记(vue-router)
Dec 01 Javascript
开源免费天气预报接口API及全国所有地区代码(国家气象局提供)
Dec 26 Javascript
JS实现多级菜单中当前菜单不随页面跳转样式而发生变化
May 30 Javascript
JS中的Replace()传入函数时的用法详解
Sep 11 Javascript
详解在React项目中安装并使用Less(用法总结)
Mar 18 Javascript
基于vue+echarts 数据可视化大屏展示的方法示例
Mar 09 Javascript
Vue Router中应用中间件的方法
Aug 06 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
Apache2 httpd.conf 中文版
2006/11/17 PHP
phpMyAdmin 安装及问题总结
2009/05/28 PHP
PHP时间戳与日期之间转换的实例介绍
2013/04/19 PHP
destoon复制新模块的方法
2014/06/21 PHP
PHP 数据结构队列(SplQueue)和优先队列(SplPriorityQueue)简单使用实例
2015/05/12 PHP
详解Yii2 rules 的验证规则
2016/12/02 PHP
javascript 图片裁剪技巧解读
2012/11/15 Javascript
深入理解js函数的作用域与this指向
2016/05/28 Javascript
深入理解JavaScript内置函数
2016/06/03 Javascript
checkbox批量选中,获取选中项的值的简单实例
2016/06/28 Javascript
js 获取范围内的随机数实例代码
2016/08/02 Javascript
jquery根据一个值来选中select下的option实例代码
2016/08/29 Javascript
Angular4绑定html内容出现警告的处理方法
2017/11/03 Javascript
layui弹出层按钮提交iframe表单的方法
2018/08/20 Javascript
Vue项目部署在Spring Boot出现页面空白问题的解决方案
2018/11/26 Javascript
通过实例解析chrome如何在mac环境中安装vue-devtools插件
2020/07/10 Javascript
微信小程序实现简单的select下拉框
2020/11/23 Javascript
[01:12:44]VG vs Mineski Supermajor 败者组 BO3 第二场 6.6
2018/06/07 DOTA
[01:08:00]Fnatic vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python解析xml文件实例分享
2013/12/04 Python
python numpy格式化打印的实例
2018/05/14 Python
Django实现单用户登录的方法示例
2019/03/28 Python
Django框架视图函数设计示例
2019/07/29 Python
Python logging模块原理解析及应用
2020/08/13 Python
美国知名生活购物网站:Goop
2017/11/03 全球购物
耐克奥地利官网:Nike奥地利
2019/08/16 全球购物
Abbott Lyon官网:女士手表、珠宝及配件
2020/12/26 全球购物
SIMON MILLER官网:洛杉矶的生活方式品牌
2020/10/19 全球购物
现代化办公人员工作的自我评价
2013/10/16 职场文书
开办加工厂创业计划书
2014/01/03 职场文书
CAD制图设计师自荐信
2014/01/29 职场文书
幼儿园端午节活动方案
2014/08/25 职场文书
在职证明书范本(2014新版)
2014/09/25 职场文书
教师考核表个人总结
2015/02/12 职场文书
个性与发展自我评价
2015/03/06 职场文书
培训班开班主持词
2015/07/02 职场文书