jQuery圆形统计图开发实例


Posted in Javascript onJanuary 04, 2015

本文实例讲述了jQuery圆形统计图开发的方法。分享给大家供大家参考。具体分析如下:

这里我们要给大家介绍一款圆形统计图circliful,它基于HTML5的画布和jQuery,无需使用图像轻松实现圆形统计图,而且有很多属性设置,使用起来非常方便。效果图如下:

jQuery圆形统计图开发实例

首先我们需要将jquery库文件和jquery.circliful.min.js引入到页面中。

<script src="js/jquery-1.10.2.min.js"></script> 

<script src="js/jquery.circliful.min.js"></script>

所需的Jquery文件引入后,现在我们就可以自定义圆形统计图的基本样式了:

<style> 

.circliful { 

    position: relative;  

} 

.circle-text, .circle-info, .circle-text-half, .circle-info-half { 

    width: 100%; 

    position: absolute; 

    text-align: center; 

    display: inline-block; 

} 

.circle-info, .circle-info-half { 

    color: #999; 

} 

.circliful .fa { 

    margin: -10px 3px 0 3px; 

    position: relative; 

    bottom: 4px; 

} 

</style>

样式初步定义好之后,只需要在需要统计图的地方,添加如下样式代码:

<div id="myStat" data-dimension="250" data-text="35%" data-info="New Clients"  

data-width="30" data-fontsize="38" data-percent="35" data-fgcolor="#61a9dc"  

data-bgcolor="#eee" data-fill="#ddd"></div>

区域块填写完之后,我们现在需要初始化它了:

<script> 

$( document ).ready(function() { 

        $('#myStat').circliful(); 

    }); 

</script>

就这么简单,只需轻松几部就可以完成帅气的统计图了。

下面是插件的基本属性说明:

Circliful提供了丰富的属性选项设置,基于html5的data属性,以下是设置清单。

参数 描述 默认值
data-dimension 圆形图的宽度和高度px 250
data-text 显示在圆圈内侧的文字内容 empty
data-info 显示在data-text下的说明信息 empty
data-width 圆圈的厚度px 15
data-fontsize 圈内文字大小px 15
data-percent 圆圈统计百分比%,1-100 50
data-fgcolor 圆圈的前景色 #556b2f
data-bgcolor 圆圈的背景色 #eeeeee
data-fill 圆形的填充背景色 empty
data-type 圆形统计类型,可以是”half”或”full” full
data-total 数据总量,和data-part配合使用 empty
data-part 数据量,与data-total配合使用 empty
data-border 圆形样式,可以加边框,如inline或outline empty
data-icon Fontawesome图标样式,详情可参照:Fontawesome Website ? Icons empty
data-icon-size 图标大小 empty
data-icon-color 图标颜色 empty

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
jquery UI 1.72 之datepicker
Dec 29 Javascript
js动态创建上传表单通过iframe模拟Ajax实现无刷新
Feb 20 Javascript
jQuery之ajax删除详解
Feb 27 Javascript
jquery遍历函数siblings()用法实例
Dec 24 Javascript
JS定时检测任务任务完成后执行下一步的解决办法
Dec 22 Javascript
3种vue路由传参的基本模式
Feb 22 Javascript
微信小程序实现图片上传
May 23 Javascript
使用jquery-easyui的布局layout写后台管理页面的代码详解
Jun 19 jQuery
Node.js 实现抢票小工具 &amp; 短信通知提醒功能
Oct 22 Javascript
微信小程序实现锚点功能
Nov 20 Javascript
微信小程序实现带放大效果的轮播图
May 26 Javascript
从原生JavaScript到React深入理解
Jul 23 Javascript
jQuery中:selected选择器用法实例
Jan 04 #Javascript
jQuery中:checked选择器用法实例
Jan 04 #Javascript
jQuery中:disabled选择器用法实例
Jan 04 #Javascript
AngularJS中取消对HTML片段转义的方法例子
Jan 04 #Javascript
jQuery中:enabled选择器用法实例
Jan 04 #Javascript
jQuery中:file选择器用法实例
Jan 04 #Javascript
jQuery中:button选择器用法实例
Jan 04 #Javascript
You might like
php ucwords() 函数将字符串中每个单词的首字符转换为大写(实现代码)
2016/05/12 PHP
Windows下php+mysql5.7配置教程
2017/05/16 PHP
Aster vs Newbee BO5 第二场2.19
2021/03/10 DOTA
Firefox 无法获取cssRules 的解决办法
2006/10/11 Javascript
js活用事件触发对象动作
2008/08/10 Javascript
jQuery实现form表单reset按钮重置清空表单功能
2012/12/18 Javascript
Jquery选中或取消radio示例
2013/09/29 Javascript
JavaScript函数获取事件源的小例子
2014/05/14 Javascript
Javascript实现单张图片浏览
2014/12/18 Javascript
jquery使用正则表达式验证email地址的方法
2015/01/22 Javascript
JavaScript中的toLocaleDateString()方法使用简介
2015/06/12 Javascript
javascript类型系统 Array对象学习笔记
2016/01/09 Javascript
AngularJS定时器的使用与移除操作方法【interval与timeout】
2016/12/14 Javascript
AngularJs导出数据到Excel的示例代码
2017/08/11 Javascript
vue watch深度监听对象实现数据联动效果
2018/08/16 Javascript
从vue源码解析Vue.set()和this.$set()
2018/08/30 Javascript
Vue CLI 3搭建vue+vuex最全分析(推荐)
2018/09/27 Javascript
在layui中layer弹出层点击事件无效的解决方法
2019/09/05 Javascript
[53:18]Spirit vs Liquid Supermajor小组赛A组 BO3 第三场 6.2
2018/06/03 DOTA
python实现判断数组是否包含指定元素的方法
2015/07/15 Python
Windows中安装使用Virtualenv来创建独立Python环境
2016/05/31 Python
python实现感知器
2017/12/19 Python
Python实现的多叉树寻找最短路径算法示例
2018/07/30 Python
Python ORM框架Peewee用法详解
2020/04/29 Python
python爬虫今日热榜数据到txt文件的源码
2021/02/23 Python
澳大利亚领先的优质葡萄酒拍卖会:Langton’s Fine Wines
2019/03/24 全球购物
倩碧澳大利亚官网:Clinique澳大利亚
2019/07/22 全球购物
物理教育专业毕业生推荐信
2013/11/03 职场文书
机电一体化自荐信
2013/12/10 职场文书
高三地理教学反思
2014/01/11 职场文书
中华美德颂演讲稿
2014/05/20 职场文书
服务承诺口号
2014/05/22 职场文书
关爱留守儿童标语
2014/06/18 职场文书
感恩教育主题班会
2015/08/12 职场文书
Vue图片裁剪组件实例代码
2021/07/02 Vue.js
剑指Offer之Java算法习题精讲二叉树的构造和遍历
2022/03/21 Java/Android