jQuery圆形统计图开发实例

本文实例讲述了jQuery圆形统计图开发的方法。分享给大家供大家参考。具体分析如下：

这里我们要给大家介绍一款圆形统计图circliful，它基于HTML5的画布和jQuery，无需使用图像轻松实现圆形统计图，而且有很多属性设置，使用起来非常方便。效果图如下：

首先我们需要将jquery库文件和jquery.circliful.min.js引入到页面中。

代码如下:

<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/jquery.circliful.min.js"></script>

所需的Jquery文件引入后，现在我们就可以自定义圆形统计图的基本样式了：

代码如下:

<style>
.circliful {
    position: relative; 
}
.circle-text, .circle-info, .circle-text-half, .circle-info-half {
    width: 100%;
    position: absolute;
    text-align: center;
    display: inline-block;
}
.circle-info, .circle-info-half {
    color: #999;
}
.circliful .fa {
    margin: -10px 3px 0 3px;
    position: relative;
    bottom: 4px;
}
</style>

样式初步定义好之后，只需要在需要统计图的地方，添加如下样式代码：

代码如下:

<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"></div>

区域块填写完之后，我们现在需要初始化它了：

代码如下:

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

就这么简单，只需轻松几部就可以完成帅气的统计图了。

下面是插件的基本属性说明：

Circliful提供了丰富的属性选项设置，基于html5的data属性，以下是设置清单。

参数 描述 默认值
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图标样式，详情可参照：Fontawesome Website – Icons empty
data-icon-size 图标大小 empty
data-icon-color 图标颜色 empty

希望本文所述对大家的jQuery程序设计有所帮助。

赞 (0)

相关推荐

  • jquery实现动静态条形统计图

    jquery实现动静态条形统计图

    下图为jquery实现静态条形统计图,在选择题统计中用的比较多. 思路:前台JS实现动态数据效果,后台可以拼接字符串或者用JSON加载数据 代码: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="tiao.aspx.cs" Inherits="qiantaoflash.tiao" %> <!DOCTYPE html PUBLIC "

  • Highcharts 非常实用的Javascript统计图demo示例

    Highcharts 非常实用的Javascript统计图demo示例

    Highcharts 官网:http://www.highcharts.com Highcharts 官网示例:http://www.highcharts.com/demo/ Highcharts 官网文档:http://www.highcharts.com/documentation/how-to-use 官网实例中给出了各式各样的demo,可以参照document修改自己需要的即可. 下面是一个学生成绩走势demo:   复制代码 代码如下: <!DOCTYPE HTML> <htm

  • PHP实现绘制3D扇形统计图及图片缩放实例

    PHP实现绘制3D扇形统计图及图片缩放实例

    1.利用php gd库的函数绘制3D扇形统计图 <?php header("content-type","text/html;charset=utf-8"); /*扇形统计图*/ $image = imagecreatetruecolor(100, 100); /*创建画布*/ /*设置画布需要的颜色*/ $white = imagecolorallocate($image,0xff,0xff,0xff); $gray = imagecolorallocate

  • javascript实现的柱状统计图表

    javascript实现的柱状统计图表

    工作需要,用javascript做一个统计图表: 完成后,做个笔记,大家分享一下,互相学习.其中还有点问题,还不是很完善. 其中参考了百度空间,中管理中心,访问统计,的js统计图表.但是应用上还是有差别,因为我做的这个项目中,需要时实的绘制新的统计表格,当有数据变化的时候,就会调用绘制表格的方法.所以要考虑页面性能的问题. 下面是完成后的预览图,可以看到,绘制一个表格,耗时0.005毫秒,也就是200分之一秒.效率我还是比较满意的! 目前在firefox,chrome,IE8,正常没问题,IE6

  • javascript实现动态统计图开发实例

    javascript实现动态统计图开发实例

    本文实例讲述了javascript实现动态统计图的代码.分享给大家供大家参考.具体如下: 运行效果截图如下: 具体代码如下 html代码: <div id="content"> <div class="legend"> <h1>汽车销量:</h1> <div class="skills"> <ul> <li class="jq">大众</

  • php+highchats生成动态统计图

    复制代码 代码如下: series: [{                  type: 'pie',                  name: 'Browser share',                  data: [                      ['Firefox',   45.0],                      ['IE',       26.8],                      {                          na

  • PHP中使用GD库绘制折线图 折线统计图的绘制方法

    PHP中使用GD库绘制折线图 折线统计图的绘制方法

    在PHP中,有一些简单的图像函数是可以直接使用的,但大多数要处理的图像,都需要在编译PHP时加上GD库.除了安装GD库之外,在PHP中还可能需要其他的库,这可以根据需要支持哪些图像格式而定.GD库可以在http://www.boutell.com/gd/免费下载,不同的GD版本支持的图像格式不完全一样,最新的GD库版本支持GIF.JPEG.PNG.WBMP.XBM等格式的图像文件,此外还支持一些如FreeType.Type 1等字体库.通过GD库中的函数可以完成各种点.线.几何图形.文本及颜色的

  • asp.net中调用Office来制作3D统计图的实例代码

    1.首先下载owc11 COM组件 http://www.microsoft.com/downloads/details.aspx?FamilyID=7287252c-402e-4f72-97a5-e0fd290d4b76&displaylang=en 2.注册owc11 在工程中添加 C:/Program Files/Common Files/Microsoft Shared/Web Components/11  文件下的owc11.dll引用 3.在工程中添加 using OWC11; 4.

  • jQuery圆形统计图开发实例

    jQuery圆形统计图开发实例

    本文实例讲述了jQuery圆形统计图开发的方法.分享给大家供大家参考.具体分析如下: 这里我们要给大家介绍一款圆形统计图circliful,它基于HTML5的画布和jQuery,无需使用图像轻松实现圆形统计图,而且有很多属性设置,使用起来非常方便.效果图如下: 首先我们需要将jquery库文件和jquery.circliful.min.js引入到页面中. 复制代码 代码如下: <script src="js/jquery-1.10.2.min.js"></script

  • JQuery EasyUI 结合ztrIee的后台页面开发实例

    JQuery EasyUI 结合 zTree树形结构制作web页面.easyui用起来比较简单,很好的封装了jquery的部分功能,使用起来更加方便,但是从1.2.3版本以后,商业用途是需要付费的, zTree是国内的大牛们搞的一个jquery树形tree插件,感觉很好用,很强大,而且完全免费,API等做的也非常不错.推荐 easyui 是一个基于 jQuery 的框架,集成了各种用户界面插件. easyui 提供建立现代化的具有交互性的 javascript 应用的必要的功能. 使用 easy

  • Android圆形旋转菜单开发实例

    Android圆形旋转菜单开发实例

    最近帮朋友做了一个动画菜单,感觉有一定的实用价值,就在此给大家分享一下,先看看效果: 实现思路: 从图中可以看出,这三个(或更多,需要自己再实现)菜单是围绕着中心点旋转的,旋转分为2层,背景旋转和菜单旋转,背景旋转可以直接用旋转动画来实现:菜单的旋转是在以中心点为圆心的圆环上,所以这里用了根据旋转角度求此点在直角坐标系中的坐标点的函数(x = r * cos(rotation* 3.14 / 180) 和y = r * sin(rotation* 3.14 / 180) ),然后根据获取到的点的

  • jQuery进行组件开发完整实例

    jQuery进行组件开发完整实例

    本文实例讲述了jQuery进行组件开发的方法,分享给大家供大家参考,具体如下: 前面的<JavaScript组件开发>分析了JavaScript进行组件开发的技巧,这里分析使用jQuery进行组件开发的方法. 使用jQuery进行组件开发和使用纯JavaScript脚本(不使用框架)原理基本类似,特别是公共方法的组织是一样的. 不同点是,jQuery使用了插件机制,通过$()直接进行操作对象(DOM元素)绑定,然后对DOM元素或HTML代码进行绑定事件等的操作. 另一个不同点则是把jQuery

  • JQuery标签页效果实例详解

    JQuery标签页效果实例详解

    本文实例讲述了JQuery标签页效果实现方法.分享给大家供大家参考,具体如下: 第一个标签页中鼠标滑过显示不同的标签页,第二个标签页中点击不同标签加载其他页面中的内容,加载等待的图片缓慢隐藏,效果图如下: /WebRoot/4.Tab.html: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> &l

  • 基于jQuery实现返回顶部实例代码

    基于jQuery实现返回顶部实例代码

    效果图展示如下所示: 使用方法: 只需引用jQuery库和YesTop插件,然后一句代码就可以实现返回顶部: 引用代码: <script type="text/javascript" src="http://hovertree.com/ziyuan/jquery/jquery-1.11.3.min.js"></script> <script type="text/javascript" src="http:

  • Pygame游戏开发实例讲解之图形绘制与键鼠事件

    目录 图形绘制 绘制矩形 绘制直线 绘制圆弧 案例 键鼠事件 键盘事件 鼠标事件 图形绘制 格式: pygame.draw.circle(surface, color, center, radius, width=0, draw_top_right=None, draw_top_left=None, draw_bottom_left=None, draw_bottom_right=None) 参数: surface: 需要绘制的表面 color: RGB 格式, 圆形的颜色 center: 元组

  • jq源码解析之绑在$,jQuery上面的方法(实例讲解)

    1.当我们用$符号直接调用的方法.在jQuery内部是如何封装的呢?有没有好奇心? // jQuery.extend 的方法 是绑定在 $ 上面的. jQuery.extend( { //expando 用于决定当前页面的唯一性. /\D/ 非数字.其实就是去掉小数点. expando: "jQuery" + ( version + Math.random() ).replace( /\D/g, "" ), // Assume jQuery is ready wit

  • jquery表单验证实例仿Toast提示效果

    jquery表单验证实例仿Toast提示效果

    HTML内容部分 <div class="classname"> <label for="">请输入您的手机号码</label> <input type="text" id="MobilePhone"/> <input type="text" /> --> </div> 提示html及样式部分 <div id="e

随机推荐