Circliful 基于 jQuery 显示圆形循环统计插件

Question

Circliful 是一个基于 jQuery 的插件，用于显示圆形循环统计，使用 SVG 绘画图形，不适用任何图片，兼容现在主流的浏览器，支持响应式布局，有许多自定义选择可供配置。

使用方法

首先引入 Circliful 和 jQuery 文件

<link href="css/jquery.circliful.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="js/jquery.circliful.min.js"></script>

在 jQuery 的以下版本测试通过：

• 1.12.4
• 2.2.4
• 3.1.0

编写一个 DIV 容器来放置图形，设置一个唯一的 ID ，这个 DIV 控制了图形的大小

<div class="row">
    <div class="col-lg-2">
        <div id="test-circle"></div>
    </div>
</div>

最后在文件的末尾调用插件

<script>
    $( document ).ready(function() {
	$("#your-circle").circliful({
                animationStep: 5,
                foregroundBorderWidth: 5,
                backgroundBorderWidth: 15,
                percent: 75
           });
   });
</script>

可选参数

Circle

Option	Description	Type	Default
foregroundColor	color of the foreground circle (no color add value 'none')	RGB or string	#3498DB
backgroundColor	color of the background circle (no color add value 'none')	RGB or string	#eee
fillColor	fill color of circle	RGB or string	none
pointColor	fill color of point circle	RGB or string	none
pointSize	Size of point circle	int	28.5
foregroundBorderWidth	width of foreground circle border	int	15
backgroundBorderWidth	width of background circle border	int	15
animation	if the circle should be animated initially	int	1
animationStep	can be 1 to 100, how fast or slow the animation should be	int	5
progresColor	change color of foreground circle as percents changed（{ 50: '#FF6C00', 60: '#FF6C00'}）	object	null
halfCircle	draw half circle see example bellow	boolean	false
animateInView	animate circle on scroll into view	boolean	false

Percentage Text

Option	Description	Type	Default
fontColor	color of the percentage	RGB	#aaa
percentageY	vertical position of the percentage text	integer	100
percentageX	horizontal position of the percentage text	integer	100
percent	can be 1 to 100	integer	75
percentageTextSize	font size of the percentage text	integer	22
textAdditionalCss	additional css for the percentage text	string	''
targetPercent	draws a circle around the main circle	integer	0
targetTextSize	font size of the target percentage	integer	17
targetColor	fill color of the target circle	RGB	#2980B9
text	info text shown bellow the percentage in the circle	string	''
textStyle	css inline style you want to add to your info text	string	''
textColor	font color of the info text	RGB	#666
textY	vertical position of your info text	integer	null
textX	horizontal position of your info text	integer	null
textBelow	aligns string of "text" property centered below the circle	boolean	false
multiPercentage	turns multiple bars on if set to 1	integer	1
percentages	array of percent, color and title for each circle	array	[]
multiPercentageLegend	show a legend with title, color and percentage on the right	integer	0
noPercentageSign	to hide the percentage sign	boolean	false
replacePercentageByText	replace the percentage shown in the circle by text	string	null
decimals	number of decimal places to show	integer	0
alwaysDecimals	shows decimals while animating instead of only at the end or if less than 1	boolean	false
title	title of the circle	string	Circle Chart
description	description of the circle	string	''

Icon

Option	Description	Type	Default
icon	font awesome icon, details bellow	string	none
iconSize	font size of the icon	integer	30
iconColor	color of the icon	RGB	#ccc
iconPosition	position of the icon (top, bottom, left, right or middle)	string	top
iconDecoration	decoration of icon percetage	boolean	true

使用数据属性

所有选项也可以设置为数据属性，例如：

<div id="test-circle" data-animation="1" data-animationStep="5" data-percent="58"></div>

使用举例

接下来分享一些使用的方法：

半圆

$("#test-circle5").circliful({
    animationStep: 5,
    foregroundBorderWidth: 5,
    backgroundBorderWidth: 15,
    percent: 80,
    halfCircle: 1,
});

多个环

$("#test-circle").circliful({
        animation: 1,
        animationStep: 5,
        foregroundBorderWidth: 7,
        backgroundBorderWidth: 7,
        textSize: 28,
        textStyle: 'font-size: 12px;',
        textColor: '#666',
        multiPercentage: 1,
        percentages: [
        	{'percent': 10, 'color': '#3180B8', 'title': 'Gryffindor' },
		{'percent': 30, 'color': '#4ADBEA', 'title': 'Ravenclaw' },
		{'percent': 50, 'color': '#49EBA8', 'title': 'Hufflepuff' },
		{'percent': 70, 'color': '#FFCA35', 'title': 'Slytherin' }
        ],
        multiPercentageLegend: 1,
    replacePercentageByText: '',
        backgroundColor: '#eee',
        icon: 'f0d0',
        iconPosition: 'middle',
        iconColor: '#273B4E'
    });

使用回调函数

在图形生成以后

$("#circli").circliful({
        animation: 1,
        animationStep: 10,
        foregroundBorderWidth: 5,
        backgroundColor: "none",
        fillColor: '#eee',
        percent: 75,
        iconColor: '#3498DB',
        icon: 'f206',
        iconSize: '40',
        iconPosition: 'middle',
        start:50,
        showPercent:1,
        target:0
    }, function(){
        alert('done !');
    });

使用 Font Awesome 图标

先引入 font-awesome.css 文件，然后找到并复制图标的 Unicode 代码，粘贴在初始化插件的配置参数里面：

.fa-hdd-o:before {
    content: "\f0a0";
}

复制 f0a0 到参数 ICON 中 { icon: 'f0a0' }