jQuery圆形统计插件circliful

所属分类:UI-图表,加载

 109294  454  查看评论 (16)
分享到微信朋友圈
X
jQuery圆形统计插件circliful ie兼容10

显示的信息为圆形统计,不需要添加额外图像文件

        展会的相关信息为圆形统计,使用无图像

        基于HTML5的画布和jQuery

        许多选项可以被设置为数据的属性

        fontawesome整合

如何使用circliful

包括circliful和jQuery添加到你的网站

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

如果您想使用fontawesome图标,你也需要包括css文件到您的网站。

添加一个元素到你的网站有一个唯一的ID的数据属性,你需要,例如:

<div id="myStat" 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" data-total="200" data-part="35" data-icon="long-arrow-up" data-icon-size="28" data-icon-color="#fff"></div>

添加此代码在您的站点的结尾

<script>
$( document ).ready(function() {
        $('#myStat').circliful();
    });
</script>

数据选项(属性)

请查看官方文档

============以下内容由 旅图灬 提供=================

参数详解:

参数描述默认值
data-dimension圆形图的宽度和高度px250
data-text显示在圆圈内侧的文字内容empty
data-info显示在data-text下的说明信息empty
data-width圆圈的厚度px15
data-fontsize圈内文字大小px15
data-percent圆圈统计百分比%,1-10050
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或outlineempty
data-iconFontawesome图标样式,详情可参照:Fontawesome Website – Iconsempty
data-icon-size图标大小empty
data-icon-color图标颜色
相关插件-图表,加载

Table表单数据处理插件DataTables

table表单数据处理,可以对数据进行排序,筛选,查找
  图表
 64394  439

支持ie8的圆形统计比例图

动态统计,支持ie8以及以上版本的ie浏览器,其他的浏览器
  图表
 53306  421

jquery-html5关系图

jquery-html关系图-介绍人物关系
  图表
 125494  461

jquery.jqplot 绘图插件

jqPlot是一个jQuery绘图插件,可以利用它制作漂亮的线状图、柱状图和饼图。
  图表
 45865  374

讨论这个项目(16)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    peii 0
    2018/10/18 18:52:38
    ajax,attr()重新赋值,重新初始化控件,数据进不去 回复
    chan 0
    2018/5/2 10:42:13
    您好,请问怎么链接数据库的数据?我想让数据库的数据显示在这上面。根据数据库的变化而变 回复
    木亻禺 0
    2018/1/15 10:23:40

    页面切换 多次加载问题 可以把当前盒子内的canvas清除 就可以了

    回复
    ___秋王爷 0
    2017/6/26 18:35:19

    怎么让起点在底下

    回复
    老狼 0
    2016/7/14 17:07:37
    兼容性不怎么样 回复
    xlp_2009 0
    2016/3/7 9:03:47
    为什么已经占比的部分厚度比较厚啊,能设置一样吗
        多余的解释~0
        2016/6/3 14:06:57
          wei  shen   me   wo   da   bu   liao   zi可以自己设置啊, data-width就是占比的厚度
        sherry.lee0
        2016/7/27 17:07:10
        data-width只能改变后面整圆的厚度,请问你最后是怎么解决的??
    回复
    ? 0
    2016/3/3 16:03:04
    真心不行。特别是要不停从后台更新刷新数据的时候问题就出现了。 回复
    cai994335130 0
    2016/2/26 15:02:26
    有bug。异步请求会加载很多次。 回复
    皮囊 0
    2015/7/22 13:07:20
    魅族note自带浏览器,roid4.2自带浏览器 无法显示!iPhone5Safari显示正常 回复
    尚伟 尚雅鲜花 0
    2015/1/7 11:41:11
    这个东西。如何支持手机浏览器。。手机下想用。可是不绘图,不知道为啥。 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复