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 相关文章推荐
JavaScript 无符号右移赋值操作
Apr 17 Javascript
DOM 基本方法
Jul 18 Javascript
基于JQuery实现滚动到页面底端时自动加载更多信息
Jan 31 Javascript
JS调试必备的5个debug技巧
Mar 07 Javascript
分享一则JavaScript滚动条插件源码
Mar 03 Javascript
JS实现常见的TAB、弹出层效果(TAB标签,斑马线,遮罩层等)
Oct 08 Javascript
jquery中object对象循环遍历的方法
Dec 18 Javascript
使用JS代码实现点击按钮下载文件
Nov 12 Javascript
ionic2自定义cordova插件开发以及使用(Android)
Jun 19 Javascript
JS实现DOM删除节点操作示例
Apr 04 Javascript
Vue使用JSEncrypt实现rsa加密及挂载方法
Feb 07 Javascript
JS highcharts实现动态曲线代码示例
Oct 16 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
星际争霸任务指南——虫族
2020/03/04 星际争霸
php下封装较好的数字分页方法
2010/11/23 PHP
超小PHP小马小结(方便查找后门的朋友)
2012/05/05 PHP
php excel reader读取excel内容存入数据库实现代码
2012/12/06 PHP
thinkPHP微信分享接口JSSDK用法实例
2017/07/07 PHP
PHP实现微信商户支付企业付款到零钱功能
2018/09/30 PHP
TP5框架实现上传多张图片的方法分析
2020/03/29 PHP
JS常用正则表达式总结
2013/11/12 Javascript
鼠标滑过出现预览的大图提示效果
2014/02/26 Javascript
Extjs grid添加一个图片状态或者按钮的方法
2014/04/03 Javascript
JavaScript实现三阶幻方算法谜题解答
2014/12/29 Javascript
轻松学习jQuery插件EasyUI EasyUI创建CRUD应用
2015/11/30 Javascript
JavaScript编写页面半透明遮罩效果的简单示例
2016/05/09 Javascript
微信小程序日历/日期选择插件使用方法详解
2018/12/28 Javascript
JS实现点击按钮随机生成可拖动的不同颜色块示例
2019/01/30 Javascript
pm2启动ssr失败的解决方法
2019/06/29 Javascript
详谈vue中router-link和传统a链接的区别
2020/07/22 Javascript
原生js实现购物车
2020/09/23 Javascript
深入Python解释器理解Python中的字节码
2015/04/01 Python
python实现二叉树的遍历
2017/12/11 Python
python实现中文文本分句的例子
2019/07/15 Python
Python二元算术运算常用方法解析
2020/09/15 Python
Room Mate Hotels美国:西班牙酒店品牌
2018/04/10 全球购物
华三通信H3C面试题
2015/05/15 面试题
公司员工的自我评价范例
2013/11/01 职场文书
迷你西餐厅创业计划书范文
2013/12/31 职场文书
简历里的自我评价
2014/01/31 职场文书
教师考核评语
2014/04/28 职场文书
入党综合考察材料
2014/06/02 职场文书
安全施工标语
2014/06/07 职场文书
客服专员岗位职责
2015/02/10 职场文书
先进个人总结范文
2015/02/15 职场文书
新年晚会主持词开场白
2015/05/28 职场文书
培训后的感想
2015/08/07 职场文书
初中团委工作总结
2015/08/13 职场文书
Python-typing: 类型标注与支持 Any类型详解
2021/05/10 Python