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

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

Percentage Text

Icon

使用数据属性

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

<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' }