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 相关文章推荐
bcastr2.0 通用的图片浏览器
Nov 22 Javascript
javascript 伪数组实现方法
Oct 11 Javascript
js中如何把字符串转化为对象、数组示例代码
Jul 17 Javascript
js+HTML5实现视频截图的方法
Jun 16 Javascript
微信小程序 wx:for的使用实例详解
Apr 27 Javascript
vue使用Axios做ajax请求详解
Jun 07 Javascript
javaScript封装的各种写法
Aug 14 Javascript
vue cli 全面解析
Feb 28 Javascript
vue实现列表滚动的过渡动画
Jun 29 Javascript
JavaScript实现多球运动效果
Sep 07 Javascript
JavaScript 判断数据类型的4种方法
Sep 11 Javascript
基于JavaScript实现轮播图效果
Jan 02 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使用Image Magick将PDF文件转换为JPG文件的方法
2015/04/01 PHP
PHP+MySQL实现的简单投票系统实例
2016/02/24 PHP
php中使用websocket详解
2016/09/23 PHP
PHP new static 和 new self详解
2017/02/19 PHP
Yii 框架使用数据库(databases)的方法示例
2020/05/19 PHP
top.location.href 没有权限 解决方法
2008/08/05 Javascript
javaScript NameSpace 简单说明介绍
2013/07/18 Javascript
javascript中typeof的使用示例
2013/12/19 Javascript
JavaScript引用类型和基本类型详解
2016/01/06 Javascript
Angularjs material 实现搜索框功能
2016/03/08 Javascript
基于javascript实现样式清新图片轮播特效
2016/03/30 Javascript
实例讲解Jquery中隐藏hide、显示show、切换toggle的用法
2016/05/13 Javascript
Jquery Easyui验证组件ValidateBox使用详解(20)
2016/12/18 Javascript
jQuery使用EasyUi实现三级联动下拉框效果
2017/03/08 Javascript
jQuery实现的事件绑定功能基本示例
2017/10/11 jQuery
two.js之实现动画效果示例
2017/11/06 Javascript
详解Angular6.0使用路由步骤(共7步)
2018/06/29 Javascript
JS div匀速移动动画与变速移动动画代码实例
2019/03/26 Javascript
JS实现秒杀倒计时特效
2020/01/02 Javascript
Windows安装Python、pip、easy_install的方法
2017/03/05 Python
Python结巴中文分词工具使用过程中遇到的问题及解决方法
2017/04/15 Python
Python生成验证码、计算具体日期是一年中的第几天实例代码详解
2019/10/16 Python
python 检查数据中是否有缺失值,删除缺失值的方式
2019/12/02 Python
使用python 将图片复制到系统剪贴中
2019/12/13 Python
Python使用uuid库生成唯一标识ID
2020/02/12 Python
Django中的模型类设计及展示示例详解
2020/05/29 Python
Python预测2020高考分数和录取情况
2020/07/08 Python
Python pip install之SSL异常处理操作
2020/09/03 Python
css3制作动态进度条以及附加jQuery百分比数字显示
2012/12/13 HTML / CSS
纯CSS3制作页面切换效果的实例代码
2019/05/30 HTML / CSS
经理助理岗位职责
2014/03/05 职场文书
文秘专业应届生求职信
2014/05/26 职场文书
2014年监理个人工作总结
2014/12/11 职场文书
高一化学教学反思
2016/02/22 职场文书
《成长的天空》读后感3篇
2019/12/06 职场文书
Nginx报错104:Connection reset by peer问题的解决及分析
2022/07/23 Servers