jQuery圆形统计图(百分比)转 作者:月光光

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

如何使用circliful

将jquery库文件和jquery.circliful.min.js引入到页面中。

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <script src="js/jquery.circliful.min.js"></script> 添加css样式:
<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> 

在需要展现统计图的位置加入以下html代码:
<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> 

然后在页面中加入调用circliful的代码:<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

时间: 2024-10-16 05:05:53

jQuery圆形统计图(百分比)转 作者:月光光的相关文章

jQuery圆形统计图实战开发

今天我给大家介绍一款圆形统计图circliful,它基于HTML5的画布和jQuery,无需使用图像轻松实现圆形统计图,而且有很多属性设置,使用起来非常方便. 首先我们需要将jquery库文件和jquery.circliful.min.js引入到页面中 Java代码   <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <script src="js/jquer

jquery 圆形进度条

最近手里面的项目需要完成这个对设备性能的检测显示功能,需要使用到圆形进度条这样的效果,网上找了一圈,有很多相当的插件,找到:circliful 插件,看了他的使用说明比较的方便,于是就下载了它并将自己想要的效果添加了进去: 上面的效果,需要圆心中间的数字动态展示,并且在颜色值在小于50的时候为绿色,大于50的时候为红色: 第一步: 页面布局 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h

jQuery轻量级圆形进度指示器插件

radialIndicator是一款轻量级的jQuery圆形指示器插件.该圆形指示器插件支持颜色范围,动态修改值,格式化和百分比值等形式.它可以很好的和jquery或angular js一起工作. 在线演示:http://www.htmleaf.com/Demo/201502171390.html 下载地址:http://www.htmleaf.com/jQuery/Layout-Interface/201502171389.html

日期选择器:jquery datepicker的使用

helloweba.com 作者:月光光 时间:2012-04-08 21:05 标签: jquery  datepicker  jquery ui 在jquery ui中,提供了一个非常实用的日期选择器:datepicker,使用它能非常方便的展现日历中的日期,灵活配置相关选项,包括日期格式.范围等.我们经常在WEB应用中用到datepicker,比如要求用户输入日期进行相关查询的.我们很早之前就应用datepicker到很多项目中,今天整理成文与大家分享. 查看演示 下载源码 准备工作 首先

Json 基于jQuery+JSON的省市联动效果

helloweba.com 作者:月光光 时间:2012-09-12 21:57 标签: jQuery  JSON  Ajax  省市联动 省市区联动下拉效果在WEB中应用非常广泛,尤其在一些会员信息系统.电商网站最为常见.开发者一般使用Ajax实现无刷新下拉联动.本文将讲述,利用jQuery插件,通过读取JSON数据,实现无刷新动态下拉省市二(三)级联动效果. 查看演示 下载源码 HTML 首先在head中载入jquery库和cityselect插件. <script type="tex

jQuery实现无刷新切换主题皮肤功能

jQuery实现无刷新切换主题皮肤功能 helloweba.com 作者:月光光 时间:2010-12-13 12:49 主题皮肤切换功能在很多网站和系统中应用,用户可以根据此功能设置自己喜欢的主题颜色风格,增强了用户体验.本文将围绕如何使用jQuery实现点击无刷新切换主题皮肤功能. 查看演示 实现该功能的原理就是通过点击定义的主题样式,改变页面当前引用的主题CSS文件,并且将当前的主题样式写入cookie中或者写入数据库中,以便下次该用户重新访问页面时,调用的就是上次设置好的主题样式. 准备

jQuery的deferred对象详解

jQuery的开发速度很快,几乎每半年一个大版本,每两个月一个小版本. 每个版本都会引入一些新功能.今天我想介绍的,就是从jQuery 1.5.0版本开始引入的一个新功能----deferred对象. 这个功能很重要,未来将成为jQuery的核心方法,它彻底改变了如何在jQuery中使用ajax.为了实现它,jQuery的全部ajax代码都被改写了.但是,它比较抽象,初学者很难掌握,网上的教程也不多.所以,我把自己的学习笔记整理出来了,希望对大家有用. 本文不是初级教程,针对的读者是那些已经具备

Atitit.jquery 版本新特性attilax总结

Atitit.jquery 版本新特性attilax总结 1. Jq1.4 1 2. 1.5 1 3. 1.6 3 4. Jq1.7 3 ⒉提升了事件委派时的性能有了大幅度的提升,尤其是在ie7下: 4 ⒊更好的在 ie 6/7/8 上支持 html5: 4 ⒋切换动画更加直观: 4 ⒌匿名模块定义 awd 4 ⒍jQuery.Deferred 4 ⒎jQuery.isNumeric() 4 5. Jq1.8 5 5.1. jQuery 1.8 5 5.1.1. 可定制 5 5.1.2. 自动生

jQuery 自定义网页滚动条样式插件 mCustomScrollbar 的介绍和使用方法

如果你构建一个很有特色和创意的网页,那么肯定希望定义网页中的滚动条样式,这方面的 jQuery 插件比较不错的,有两个:jScrollPane 和 mCustomScrollbar. 关于 jScrollPane,大家见过的可能比较多,但是这个插件太过于古老而且功能不强大,效果在几年前非常不错,但是放在现在就不好说了.所以我选择了后者:mCustomScrollbar.下图是两者官方示例的简单对比: 本文就是介绍如何使用 mCustomScrollbar 这个插件,大部分的内容是翻译自 mCus