一、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. TextView 选择文字

    final CharSequence edit = text2.getText(); text2.setCursorVisible(true); text2.setOnTouchListener(ne ...

  2. 转: CvMat,Mat和IplImage之间的转化和拷贝

    1.CvMat之间的复制 //注意:深拷贝 - 单独分配空间,两者相互独立 CvMat* a; CvMat* b = cvCloneMat(a); //copy a to b 2.Mat之间的复制 / ...

  3. JavaWeb学习笔记——第一个JSP文件

    必须加上第一句以用来指定编码,否则会出现乱码 <%@ page language="java" import="java.util.*" contentT ...

  4. swiper 增加同页面增加2个滚动

    js代码 <script type="text/javascript"> var mySwiper = new Swiper('.slide_a',{ noSwipin ...

  5. array_filter移除空数组

    $arr = array( "0"=> "564645", "1"=>"", "2"=& ...

  6. Robot Framework--06 用户关键字User Keyword

    转自:http://blog.csdn.net/tulituqi/article/details/7906130 在我们做自动化案例的时候,用的最多的主要是用户关键字.说到关键字,大体上可以分为测试库 ...

  7. CentOS 7学习手册

    CentOS 7与之前版本有较大变动,查阅资料,整理得到如下手册(未完~). 一.安装 1.使用哪种方式安装 (1).虚拟机安装,推荐:VM,功能齐全,强大(Virtual Box也可以). (2). ...

  8. VisualStudio.gitignore git 忽略

    https://github.com/kaedei/gitignore/blob/master/VisualStudio.gitignore

  9. The method below converts an array of objects to a DataTable object in C#.

    http://www.c-sharpcorner.com/blogs/dynamic-objects-conveting-into-data-table-in-c-sharp1 public stat ...

  10. JavaWeb学习总结(一)——JavaWeb开发入门

    http://www.cnblogs.com/xdp-gacl/p/3729033.html 只为成功找方法,不为失败找借口! JavaWeb学习总结(一)--JavaWeb开发入门 一.基本概念 1 ...