jQuery圆形统计图开发实例

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

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

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

代码如下:

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

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

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

ottom: rgb(14,163,219) 2px solid; text-align: left; border-left: rgb(14,219) 2px solid; padding-bottom: 0px; text-transform: none; background-color: rgb(255,255,255); list-style-type: none; text-indent: 0px; margin: 10px 0px; padding-left: 0px; width: 667px; padding-right: 0px; border-collapse: collapse; font: 14px/30px Arial,宋体; white-space: normal; letter-spacing: normal; height: 590px; color: rgb(0,0); border-top: rgb(14,219) 2px solid; border-right: rgb(14,219) 2px solid; word-spacing: 0px; padding-top: 0px; -webkit-text-stroke-width: 0px"> ottom: 0px; border-right-width: 0px; list-style-type: none; margin: 0px; padding-left: 0px; padding-right: 0px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px">

ottom: 0px; border-right-width: 0px; list-style-type: none; margin: 0px; padding-left: 10px; padding-right: 0px; border-bottom-width: 0px; border-top: rgb(204,204,204) 1px solid; padding-top: 0px">参数默认值ottom: 0px; border-right-width: 0px; list-style-type: none; margin: 0px; padding-left: 0px; padding-right: 0px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px">

ottom: 0px; border-right-width: 0px; list-style-type: none; margin: 0px; padding-left: 0px; padding-right: 0px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px">

显示在圆圈内侧的文字内容ottom: 0px; border-right-width: 0px; list-style-type: none; margin: 0px; padding-left: 0px; padding-right: 0px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px">

显示在data-text下的说明信息ottom: 0px; border-right-width: 0px; list-style-type: none; margin: 0px; padding-left: 0px; padding-right: 0px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px">

文字大小px统计百分比%，1-100ottom: 0px; border-right-width: 0px; list-style-type: none; margin: 0px; padding-left: 0px; padding-right: 0px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px">

ottom: 0px; border-right-width: 0px; list-style-type: none; margin: 0px; padding-left: 0px; padding-right: 0px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px">

ottom: 0px; border-right-width: 0px; list-style-type: none; margin: 0px; padding-left: 0px; padding-right: 0px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px">

统计类型，可以是”half”或”full”ottom: 0px; border-right-width: 0px; list-style-type: none; margin: 0px; padding-left: 0px; padding-right: 0px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px">

希望本文所述对大家的jQuery程序设计有所帮助。 版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [e-mail] 举报，一经查实，本站将立刻删除。 上一篇：jQuery中:selected选择器用法实例下一篇：jQuery实现自定义下拉列表 相关推荐 jquery页面搜索关键词突出显示 页面搜索关键词突出 // 页面搜索关键词突出 $(function () { $(".list_r").find('span').css({ // 每次搜索开始，先把所有字体颜色恢复初始状态 'color': "#838792" 作者：今♀妃惜彼 时间：2024-09-23 jQuery实时显示日期、时间 jQuery实时显示日期、时间 html: <span id="time"></span> js: <script src="Js/jquery.min.js"></script> <%--引用jQuery 作者：今♀妃惜彼 时间：2024-09-23 jQuery 添加水印 jQuery 添加水印 <script src="../../../../AJs/jquery.min.js"></script> <script type="text/javascript"> $(document).re 作者：今♀妃惜彼 时间：2024-09-23 Sys.WebForms.PageRequestManagerParserErrorException:无法分析从服务器收到的消息 中文：Sys.WebForms.PageRequestManagerParserErrorException:无法分析从服务器收到的消息，之所以出现此错误，常见的原因是：通过调用Response.Write()修改相应时，将启用响应筛选器、HttpModules或服务器追踪。详细信息：分析附近的“输 作者：今♀妃惜彼 时间：2024-09-23 Asp.net 后台调用js方法 1. 用Response.Write方法 代码如下： Response.Write("<script type='text/javascript'>alert("XXX");</script>"); 此方只能调用内部函数 作者：今♀妃惜彼 时间：2024-09-23 Jquery实现按钮点击遮罩加载，处理完后恢复 Jquery实现按钮点击遮罩加载，处理完后恢复 思路： 1.点击按钮调用OnClientClick事件，添加dom元素及样式。 2.当Click中逻辑执行完后，在Click中调用js方法删除掉刚才添加的dom元素。 1 <%@ Page Language="C#" Auto 作者：今♀妃惜彼 时间：2024-09-23 .Net后台调用js，提示、打开新窗体、关闭当前窗体 .Net后台调用js，提示、关闭当前窗体、打开新窗体 Response.Write("<script>window.alert('支付成功!');window.open('/JkCommerce/" + href + "',& 作者：今♀妃惜彼 时间：2024-09-23 .net 搜索联想词 思路： 1.ajax请求后台方法获取数据。 2.通过jquery将请求到的数据显示在页面上。 前台 <div class="sc_con" id="bbsearch"> <input type="text" class=& 作者：今♀妃惜彼 时间：2024-09-23 JS点击子元素不触发父元素点击事件(js阻止冒泡) <html> <title></title> <head> <meta charset="utf-8"> <style type="text/css"> .divone{width:100 作者：今♀妃惜彼 时间：2024-09-23 jQuery表单验证提交：前台验证一 jQuery表单验证提交：前台验证一（图文+视频） 作者：编程之家 时间：2023-09-13 小编推荐 苹果市值2025年有望达4万亿美元 • 全球最强笔记本芯片苹果M4 Max登场：CP • 李一舟复出主攻视频号：开通会员专区， • 扎克伯格押注AI：Meta正推动美国政府使 • OpenAI宣布开源SimpleQA新基准，专治大 • OpenAI 计划自研 AI 芯片，以减少对英伟 • OpenAI ChatGPT高级语音模式已登陆Wind • 官方回应小米 15 手机屏幕混用传言/苹果 热门标签更多 友情链接: AI导航网 编程之家 - 我要投稿 - 广告合作 - 联系我们 - 免责声明 - 网站地图 版权所有 © 2018编程之家闽ICP备13020303号-8 微信公众号搜"智元新知"关注 微信扫一扫可直接关注哦！