Circliful is a jQuery chart plugin that animates the presentation of your information with good looking circular design, a little similar to the ring chart. Also can be used as a circular timer, progress/loading indicator, pie chart and so on.
Basic Usage:
1. Create an DIV container for the plugin. You can pass options to the chart by using the data-*
attributes , or by passing them in on initialization.
<div id="demo" 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>
2. Load the jQuery javascript library and jQuery Circliful plugin at the end of the page.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="js/jquery.circliful.min.js"></script>
3. Initialize the plugin.
<script> $( document ).ready(function() { $('#demo').circliful(); }); </script>
4. Default settings.
<script> $( document ).ready(function() { $('#demo').circliful({ fgcolor: "#556b2f", bgcolor: "#eee", fill: false, width: 15, dimension: 200, fontsize: 15, percent: 50, animationstep: 1.0, iconsize: '20px', iconcolor: '#999', border: 'default' }); }); </script>
Change log:
2014-05-27
- added font awesome v4.1.0
- added border inline/outline option again
0.1.5 (2014-01-24)
- Add animation-step option
For more Advanced Usages, please check the demo page or visit the official website.
下载:https://github.com/pguso/jquery-plugin-circliful
选项设置
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显示圆形统计插件circliful,代码简单易懂,注释清晰,下载后直接可以点击运行
Circliful 是个 jQuery 插件,用来展示统计的数据。在线演示 不需要图片,用圆来显示统计的数据信息 基于 HTML5 canvas 和 jQuery 很多选项可以设置数据属性 Font Awesome 集成 标签:Circliful
jquery circliful圆形统计图插件_html5动画 jquery circliful圆形统计图插件_html5动画 jquery circliful圆形统计图插件_html5动画
挺好用的jquery报表统计图插件,各种效果的统计图都可以实现。
jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery....
这是一个用jQuery框架编写的插件,功能是统计功能
jquery 插件jquery 插件jquery 插件jquery 插件
jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件
jquery表单验证插件
jQuery官方UI插件 jQuery官方UI插件 jQuery官方UI插件 jQuery官方UI插件
jQuery 统计插件汇总,里面包含: FlashChar flash统计图charts GooPieChart统计图 Highcharts-1.1.3 js图表 圆环统计
jQuery动态统计图形插件里面包含条形图,柱状图,线图,饼图等各种图形。
一款基于jQuery车牌输入插件,网上找到的,自己用着挺好的,分享给大家!
用于统计展示,不同的环形统计动画图,有具体的实例,用于系统portal页面
FullscreenGalleryThumbnailFlip.zip FullPageImageGallery.zip MergingImageBoxes.zip buildinternet-mosaic-ef45e11.zip woothemes-FlexSlider-23b22ac.zip jcobb-basic-jquery-slider-...等47个jQuery图片特效插件
jQuery的Cookie插件 cookies cookies 是一个强大的 jQuery 用来操作 Cookie 的插件。除了常见的操作 $.cookies.set( 'sessid', 'dh3tr62fghe' ); var sessid = $.cookies.get( 'sessid' ); $.cookies.del( 'sessid...
超级漂亮简单实用jQuery天气预报插件下载。一款界面设计扁平化,简洁大气的世界各地天气预报插件。支持手动输入城市(支持英文或中文拼音)获取天气信息。这款jQuery天气预报插件的特点在于可以动态切换城市,通过...
JQuery统计图表插件