一、EasyPieChart

页面加载时,运行initPieChart()函数,调用easyPieChart()函数,显示出图表。

代码:

         var initPieChart = function() {
$('.percentage').easyPieChart({
animate: 1000
});
$('.percentage-light').easyPieChart({
barColor: function(percent) {
percent /= 100;
return "rgb(" + Math.round(255 * (1-percent)) + ", " + Math.round(255 * percent) + ", 0)";
},
trackColor: '#666',
scaleColor: false,
lineCap: 'butt',
lineWidth: 15,
animate: 1000
});

运行效果:根据不同的百分比,显示不同颜色的图表。

Demo下载地址:http://pan.baidu.com/s/1m4146

二、jQuery-Visualize

主要基于以下代码,不同的代码显示的效果也不同,可根据需要显示折线图、饼图、表格等,还可以显示总计(Total)。

$('table').visualize()

Demo下载地址:http://pan.baidu.com/s/1xZM26

两款基于Jquery的图表插件的更多相关文章

  1. 一款基于jQuery的分页插件

    特别提示:本人博客部分有参考网络其他博客,但均是本人亲手编写过并验证通过.如发现博客有错误,请及时提出以免误导其他人,谢谢!欢迎转载,但记得标明文章出处:http://www.cnblogs.com/ ...

  2. 8款基于Jquery的WEB前端动画特效

    1.超炫酷的30个jQuery按钮悬停动画 按钮插件是最常见的jQuery插件之一,因为它用途广泛,而且配置起来最为方便.今天我们要分享的是30个超炫酷的jQuery悬停按钮动画,当我们将鼠标滑过按钮 ...

  3. 基于jquery下拉列表树插件代码

    分享一款基于jquery下拉列表树插件代码.这是一款实用的jquery 树形下拉框 下拉树代码下载.效果图如下: 在线预览   源码下载 实现的代码. html代码: <table width= ...

  4. 基于jQuery头像裁剪插件cropbox

    今天给大家分享一款基于jQuery头像裁剪插件cropbox,这是一款简单实用的jQuery头像在线裁剪插件.该插件适用于适用浏览器:IE8.360.FireFox.Chrome.Safari.Ope ...

  5. 10 款基于 jQuery 的切换效果插件推荐

    本文整理了 10 款非常好用的 jQuery 切换效果插件,包括平滑切换和重叠动画等,这些插件可以实现不同元素之间的动态切换. 1. InnerFade 这是一个基于 jQuery 的小插件,可以实现 ...

  6. 一款基于jQuery可放大预览的图片滑块插件

    今天给大家分享一款基于jQuery可放大预览的图片滑块插件.这款jQuery焦点图插件的特点是可以横向左右滑动图片,并且点击图片可以进行放大预览,唯一的缺陷是这款焦点图并不能循环切换,如果你有较好的J ...

  7. 30款基于 jQuery & CSS3 的加载动画和进度条插件

    我们所生活每一天看到的新技术或新设计潮流的兴起,Web 开发正处在上升的时代.HTML5 & CSS3 技术的发展让 Web 端可以实现的功能越来越强大. 加载动画和进度条使网站更具吸引力.该 ...

  8. 一款基于jQuery的图片分组切换焦点图插件

    这是一款基于jQuery的图片切换焦点图插件,这款jQuery焦点图插件的特点是图片可以分组切换,也就是说一次可以切换多张图片,相比其他焦点图插件,它能节省更多的空间,可以向用户展示更多的图片,非常实 ...

  9. 一款基于jQuery的QQ表情插件

    我们在QQ聊天或者发表评论.微博时,会有一个允许加入表情的功能,点击表情按钮,会弹出一系列表情小图片,选中某个表情图片即可发表的丰富的含表情的内容.今天和大家分享一款基于jQuery的QQ表情插件,您 ...

随机推荐

  1. css005 用层叠管理多样式

    css005 用层叠管理多样式 当一个元素继承多个样式时,最近的祖先样式胜出(通俗一点就是自己有就用自己的,自己没有找parent,parent没有找grandprent,再没有就一级一级网上找) 当 ...

  2. Linux修改oracle 10g的字符集

    修改数据库字符集为:ZHS16GBK查看服务器端字符集SQL > select * from V$NLS_PARAMETERS修改:$sqlplus /nologSQL>conn / as ...

  3. 9-slice-scaling

    9-slice-scaling http://rwillustrator.blogspot.com/2007/04/understanding-9-slice-scaling.html

  4. iOS监听键盘事件

    #pragma mark - view life cycle - (void)viewDidLoad { [super viewDidLoad]; [[NSNotificationCenter def ...

  5. php引用计数的基本知识

    每个php变量存在一个叫"zval"的变量容器中.一个zval变量容器,除了包含变量的类型和值,还包括两个字节的额外信息.第一个是"is_ref",是个bool ...

  6. Hibernate.lock()方法中各种锁的区别

    悲观锁 它指的是对数据被外界修改持保守态度.假定任何时刻存取数据时,都可能有另一个客户也正在存取同一笔数据,为了保持数据被操作的一致性,于是对数据采取了数据库层次的锁定状态,依靠数据库提供的锁机制来实 ...

  7. 代码重构 & 常用设计模式

    代码重构 重构目的 相同的代码最好只出现一次 主次方法 主方法 只包含实现完整逻辑的子方法 思维清楚,便于阅读 次方法 实现具体逻辑功能 测试通过后,后续几乎不用维护 重构的步骤 1  新建一个方法 ...

  8. [CentOS7]安装mysql遇到的问题

    摘要 在安装mysql的时候,遇到了一些问题,这里列出所遇到的问题. yum list mysql-server 在使用命令yum list mysql-server安装mysql的时候,遇到如图所示 ...

  9. Javabean+servlet+JSP(html)实例应用

    大家都知道Javabean+servlet+JSP是最简单的MVC模式.的确,在一个小型的项目中,这个模式完全够用. 它优雅并且简洁.加上jQueryui的完美展示效果,让这个模式看起来非常合适.当然 ...

  10. youku的视频代码放到网站上如何实现自适应

    由于是在博客编辑器里面编辑的内容,所以一直想通过CSS的方法来解决,可是上面的方式都有明显的缺陷,最终被迫采用脚本来控制列的高度,代码如下: <divstyle="text-align ...