jQuery循环统计图开发示例

本文结合实例介绍了jQuery循环统计图的开发方法。分享给大家参考。具体分析如下：

在这里，我们将介绍一个基于HTML5画布和jQuery的圆形统计图circliful。它不用图像就能轻松实现圆形统计图，而且属性设置多，使用起来非常方便。效果图如下：

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

复制的代码如下： script src=' http 3360 js/jquery-1 . 10 . 2 . min . js '/script script src=' http 3360 js/jquery . circliful . min . js '/script。

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

复制的代码如下：样式。circliful {位置：相对；} .圆形文本，圆形信息。圆圈-文本-一半，圆圈-信息-一半{宽度： 100%；绝对位置：文本对齐：中心；display:内联块；} .圆形信息。circle-info-half { color : # 999；} .circliful。fa { margin :-10px 3px 0 3px；相对位置：bottom: 4px}/样式

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

复制代码如下： div id=' mystat ' data-dimension=' 250 ' data-text=' 35% ' data-info=' new clients ' data-width=' 30 ' data-font size=' 38 ' data-percent=' 35 ' data-fg。color=' # 61 a9 DC ' data-bgcolor=' # eee ' data-fill=' # DDD '/div

填充块后，我们现在需要初始化它：

复制代码如下：script $(文档)。ready (function () {$ ('# mystat '))。circliful()；});/script

就这么简单，你可以用几个简单的图表来完成漂亮的统计图表。

以下是插件基本属性的描述：

Circliful提供了丰富的属性选项设置，这些设置基于html5的数据属性。以下是设置列表。

参数默认值数据-尺寸宽度和高度px 250数据-文本文本文本内容显示在圆圈内空数据-信息描述信息显示在数据-文本空数据-宽度圆圈厚度px 15数据-字体大小圆圈文本大小px 1。5数据-百分比圆统计百分比，1-100 50数据-fgcolor圆前景色#556b2f数据-bgcolor圆背景色# eeee数据-填充圆填充背景色空数据类型圆统计类型，可以是“半”或“全”全数据-总计，使用空数据-部分数据带数据-部分，使用空数据-边框圆形样式带数据-总计，并添加边框。例如内联或轮廓空数据-图标字体awesome图标样式，详情请参考：字体awesome网站-图标空数据-图标大小图标大小空数据-图标-颜色图标颜色空。希望本文对大家的jQuery程序设计有所帮助。