jQuery圆形统计图开发实例

jQuery 2018-12-30

本文实例讲述了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程序设计有所帮助。

jQuery圆形圆形圆形开发开发开发统计图

相关文章

jquery页面搜索关键词突出显示
页面搜索关键词突出 // 页面搜索关键词突出 $(function () {...
jQuery实时显示日期、时间
jQuery实时显示日期、时间 html: <span id=&quot...
jQuery 添加水印
jQuery 添加水印 <script src="../../../.....
Sys.WebForms.PageRequestManagerParserErrorException:无法分析从服务器收到的消息
中文：Sys.WebForms.PageRequestManagerParserErrorExceptio...
Asp.net 后台调用js方法
1. 用Response.Write方法 代码如下： Response.Write(&q...
Jquery实现按钮点击遮罩加载，处理完后恢复
Jquery实现按钮点击遮罩加载，处理完后恢复 思路： 1.点击按...