前端 环形统计_jquery圆环统计插件circliful

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.

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">

2. Load the jQuery javascript library and jQuery Circliful plugin at the end of the page.

3. Initialize the plugin.

$( document ).ready(function() {

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

});

4. Default settings.

$( 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'

});

});

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.

选项设置

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

empty

data-icon-size

图标大小

empty

data-icon-color

图标颜色

empty