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

一 准备工作

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

三 效果图

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

(0)

相关推荐

  • 利用D3.js实现最简单的柱状图示例代码

    首先把效果图放出来: 具备了一个柱状图的基础元素:柱形,坐标轴,刻度,数值等. 不得不说,d3.js比直接用的echarts更麻烦,但是确实更自由. 来看看如何实现吧. //确定画布的大小 var width = 400; var height = 400; //在 body 里添加一个 SVG 画布 var svg = d3.select("body") .append("svg") .attr("width", width) .attr(&q

  • D3.js实现柱状图的方法详解

    D3.js介绍 D3.js 是一个基于数据操作文档JavaScript库.D3帮助你给数据带来活力通过使用HTML.SVG和CSS.D3重视Web标准为你提供现代浏览器的全部功能,而不是给你一个专有的框架.结合强大的可视化组件和数据驱动方式Dom操作.这里也可以看到它是用SVG来呈现图表的,所以使用D3.js是需要一定的SVG基础的. 如何用D3.js实现柱状图? 柱状图里面有坐标轴和柱子.然而我们还需要SVG画布来画这些东西.先把大概的画图框架搭起来,代码如下(请注意此时我在body标签里添加

  • jQuery.Highcharts.js绘制柱状图饼状图曲线图

    在数据统计和分析业务中,有时会遇到客户需要在一个图表中将柱状图.饼状图.曲线图的都体现出来,即可以从柱状图中看出具体数据.又能从曲线图中看出变化趋势,还能从饼状图中看出各部分数据比重.Highcharts可以轻松实现三图合一的效果. 复制代码 代码如下: var chart;             $(document).ready(function() {                 chart = new Highcharts.Chart({                     c

  • JS DOM 操作实现代码

    简单的表格: 复制代码 代码如下: <table> <tr> <td id="TEST"> <input type="submit" value="确定"> <input type="button" value="取消"> </td> </tr> </table> 经测试: 复制代码 代码如下: var td=

  • html+js+highcharts绘制圆饼图表的简单实例

    实例如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type&q

  • 详解JS获取HTML DOM元素的8种方法

    什么是HTML DOM 文档对象模型(Document Object Model),是W3C组织推荐的处理可扩展置标语言的标准编程接口.简单理解就是HTML DOM 是关于如何获取.修改.添加或删除 HTML 元素的标准.我们用JavaScript对网页进行的所有操作都是通过DOM进行的. 这篇文章不做深入研究,只把各种用法和坑做一个总结. JS获取DOM元素的方法(8种) 通过ID获取(getElementById) 通过name属性(getElementsByName) 通过标签名(getE

  • jquery.flot.js简单绘制折线图用法示例

    本文实例讲述了jquery.flot.js简单绘制折线图用法.分享给大家供大家参考,具体如下: 1.完整实例代码: <!DOCTYPE html> <html> <head> <meta charset='utf-8'> <title>折线图</title> <!--[if lte IE 8]> <script language="javascript" type="text/javas

  • JavaScript根据数据生成百分比图和柱状图的实例代码

    复制代码 代码如下: <HTML> <head> <title>JS百分比图和柱状图</title>   <xml:namespace prefix="v"/>   <style>    v\:* {behavior=url(#default#VML)}   </style>   <style>   a:hover {color:maroon}   h2 {color:#006600;  

  • javascript转换字符串为dom对象(字符串动态创建dom)

    前言: 在javascript里面动态创建标准dom对象一般使用: var obj = document.createElement('div'); 然后再给obj设置一些属性. 但是,在实际使用过程中,有些人可能会想,要是能这样创建标准的dom对象就好了 伪代码:var obj=strToDom('<div id="div_1" class="div1">Hello World!</div>'); 那么今天的目的就是教大家怎么去实现一个这样

  • JavaScript实现的DOM绘制柱状图效果示例

    本文实例讲述了JavaScript实现的DOM绘制柱状图效果.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>www.jb51.net JavaScript DOM绘制柱状图</title> <

  • Javascript实时柱状图实现代码

    实时柱状图 span{ background-color:lime;font-size:1px;} var arr = new Array(1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,

随机推荐