无法在这个位置找到: head2.htm
当前位置: 建站首页 > 新闻 > 产业新闻 >

线下活动小程序_angularjs完成柱状图动态加载的示例

时间:2021-01-11 11:19来源:线下活动小程序 作者:jianzhan 点击:
angularjs完成柱状图动态性载入的实例 2.在建文档在建一个js文档,撰写命令。这也就是我第一次写命令,命令扩展性强,还很便捷,当新项目中反复应用的一些实际效果时能够根据
angularjs实现柱状图动态加载的示例       本篇文章主要介绍了angularjs实现柱状图动态加载的示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

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 ng-repeat="item in progressData" '+
 ' div '+
 ' span {{item.name}} /span '+
 ' div data-percent={{item.width}} '+
 ' div /div '+
 ' div {{item.sum}} /div '+
 ' /div '+
 ' /div '+
 ' p {{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);

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 progress-per progress-data="handleDataInfo" /progress-per
-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;

三 效果图

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


(责任编辑:admin)
织梦二维码生成器
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
无法在这个位置找到: ajaxfeedback.htm


扫描二维码分享到微信

在线咨询
联系电话

400-888-8866