jquery.circliful圆形统计图表插件-BFW插件库

jquery.circliful圆形统计图表插件

使用方式：

第一步引入bfwone 加载依赖项jquery

第二步use插件及css和主题css

第三步配置参数

参数	描述	默认值
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图标样式	empty
data-icon-size	图标大小	empty
data-icon-color	图标颜色

完整例子

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/material-design-iconic-font.css" type="text/css" media="all" />
    <script id="bfwone" data="dep=jquery.17&err=0" type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {
            use(["jquery.circliful", "jquery.circliful"], function() {
                $("#test-circle").circliful({
                    animationStep: 5,
                    foregroundBorderWidth: 5,
                    backgroundBorderWidth: 15,
                    percent: 75
                });
                $("#test-circle2").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: 'f139',
                    iconPosition: 'middle',
                    iconColor: '#273B4E'
                });

                $("#test-circle5").circliful({
                    animationStep: 5,
                    foregroundBorderWidth: 5,
                    backgroundBorderWidth: 15,
                    percent: 80,
                    halfCircle: 1,
                });
            });
        });
    </script>
    <style>
    </style>
</head>
<body>
    <div class="row">
        <div class="col-lg-2">
            <div id="test-circle"></div>
            <div id="test-circle2"></div>
            <div id="test-circle5"></div>
        </div>
    </div>
</body>
</html>

官网：https://github.com/pguso/jquery-plugin-circliful