介绍:一款可以描绘圆圈进度条的jQuery插件(可用作统计图)
介绍:一款可以描绘圆圈进度条的jQuery插件(可用作统计图)
circleChart使用方法
在页面中引入jquery和circleChart.min.js文件。
1
2
|
< script src="path/to/jquery.min.js"></ script > < script src="path/to/circleChart.min.js"></ script > |
HTML结构
使用一个<div>元素作为该圆形百分比进度条的HTML结构:
<div class="circleChart" id="circle1"></div>
初始化插件
在页面DOM元素加载完毕,可以通过circleChart()方法来初始化该圆形百分比进度条插件。
$("#circle1").circleChart();
配置参数
circleChart.js圆形百分比进度条插件的默认配置参数如下:
color: "#3459eb", // 进度条颜色 backgroundColor: "#e6e6e6", // 进度条之外颜色 background: true, // 是否显示进度条之外颜色 speed: 2000, // 出现的时间 widthRatio: 0.2, // 进度条宽度 value: 66, // 进度条占比 unit: "percent", counterclockwise: false, // 进度条反方向 size: 110, // 圆形大小 startAngle: 0, // 进度条起点 animate: true, // 进度条动画 backgroundFix: true, lineCap: "round", animation: "easeInOutCubic", text: false, // 进度条内容 redraw: false, cAngle: 0, textCenter: true, textSize: false, textWeight: "normal", textFamily: "sans-serif", relativeTextSize: 1 / 7, // 进度条中字体占比 autoCss: true, onDraw: false
实例
$(".circleChart").circleChart({ size: 300, value: 50, text: 0, onDraw: function(el, circle) { circle.text(Math.round(circle.value) + "%"); // 根据value修改text } }); setInterval(function() { $(".circleChart").circleChart({ value: Math.random() * 100 }); }, 4000); // 定时修改进度条value
1、路在何方?
路在脚下
2、何去何从?
每个人都在探索,未来的方向在何处。如果说某些方向是世人已经公认的,那么就先按照公认的去走吧(ps:站在巨人的肩膀上看世界会清晰)。
如果说方向,当今世人还不清晰准确。那么就大胆往前走吧,对与错并不重要。心中的方向更加重要。