Circliful 基于 jQuery 显示圆形循环统计插件 - 资源分享

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

发布于 2018-06-18 字数 11913 浏览 2650 评论 0

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

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

使用方法

首先引入 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,
});

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

多个环

$("#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'
    });

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

使用回调函数

在图形生成以后

$("#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’ }

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

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2891 文章
评论
84935 人气
更多

推荐作者

时光倒影

文章 0 评论

qq_YyjhCs

文章 0 评论

三人与歌

文章 0 评论

┼──瘾||

文章 1 评论