You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
201 lines
6.7 KiB
201 lines
6.7 KiB
4 years ago
|
// Generated by CoffeeScript 1.6.3
|
||
|
|
/*
|
||
|
|
Easy pie chart is a jquery plugin to display simple animated pie charts for only one value
|
||
|
|
|
||
|
|
Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
|
||
|
|
and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
|
||
|
|
|
||
|
|
Built on top of the jQuery library (http://jquery.com)
|
||
|
|
|
||
|
|
@source: http://github.com/rendro/easy-pie-chart/
|
||
|
|
@autor: Robert Fleischmann
|
||
|
|
@version: 1.2.5
|
||
|
|
|
||
|
|
Inspired by: http://dribbble.com/shots/631074-Simple-Pie-Charts-II?list=popular&offset=210
|
||
|
|
Thanks to Philip Thrasher for the jquery plugin boilerplate for coffee script
|
||
|
|
*/
|
||
|
|
|
||
|
|
(function($) {
|
||
|
|
$.easyPieChart = function(el, options) {
|
||
|
|
var addScaleLine, animateLine, drawLine, easeInOutQuad, rAF, renderBackground, renderScale, renderTrack,
|
||
|
|
_this = this;
|
||
|
|
this.el = el;
|
||
|
|
this.$el = $(el);
|
||
|
|
this.$el.data("easyPieChart", this);
|
||
|
|
this.init = function() {
|
||
|
|
var percent, scaleBy;
|
||
|
|
_this.options = $.extend({}, $.easyPieChart.defaultOptions, options);
|
||
|
|
percent = parseInt(_this.$el.data('percent'), 10);
|
||
|
|
_this.percentage = 0;
|
||
|
|
_this.canvas = $("<canvas width='" + _this.options.size + "' height='" + _this.options.size + "'></canvas>").get(0);
|
||
|
|
_this.$el.append(_this.canvas);
|
||
|
|
if (typeof G_vmlCanvasManager !== "undefined" && G_vmlCanvasManager !== null) {
|
||
|
|
G_vmlCanvasManager.initElement(_this.canvas);
|
||
|
|
}
|
||
|
|
_this.ctx = _this.canvas.getContext('2d');
|
||
|
|
if (window.devicePixelRatio > 1) {
|
||
|
|
scaleBy = window.devicePixelRatio;
|
||
|
|
$(_this.canvas).css({
|
||
|
|
width: _this.options.size,
|
||
|
|
height: _this.options.size
|
||
|
|
});
|
||
|
|
_this.canvas.width *= scaleBy;
|
||
|
|
_this.canvas.height *= scaleBy;
|
||
|
|
_this.ctx.scale(scaleBy, scaleBy);
|
||
|
|
}
|
||
|
|
_this.ctx.translate(_this.options.size / 2, _this.options.size / 2);
|
||
|
|
_this.ctx.rotate(_this.options.rotate * Math.PI / 180);
|
||
|
|
_this.$el.addClass('easyPieChart');
|
||
|
|
_this.$el.css({
|
||
|
|
width: _this.options.size,
|
||
|
|
height: _this.options.size,
|
||
|
|
lineHeight: "" + _this.options.size + "px"
|
||
|
|
});
|
||
|
|
_this.update(percent);
|
||
|
|
return _this;
|
||
|
|
};
|
||
|
|
this.update = function(percent) {
|
||
|
|
percent = parseFloat(percent) || 0;
|
||
|
|
if (_this.options.animate === false) {
|
||
|
|
drawLine(percent);
|
||
|
|
} else {
|
||
|
|
if (_this.options.delay) {
|
||
|
|
animateLine(_this.percentage, 0);
|
||
|
|
setTimeout(function() {
|
||
|
|
return animateLine(_this.percentage, percent);
|
||
|
|
}, _this.options.delay);
|
||
|
|
} else {
|
||
|
|
animateLine(_this.percentage, percent);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return _this;
|
||
|
|
};
|
||
|
|
renderScale = function() {
|
||
|
|
var i, _i, _results;
|
||
|
|
_this.ctx.fillStyle = _this.options.scaleColor;
|
||
|
|
_this.ctx.lineWidth = 1;
|
||
|
|
_results = [];
|
||
|
|
for (i = _i = 0; _i <= 24; i = ++_i) {
|
||
|
|
_results.push(addScaleLine(i));
|
||
|
|
}
|
||
|
|
return _results;
|
||
|
|
};
|
||
|
|
addScaleLine = function(i) {
|
||
|
|
var offset;
|
||
|
|
offset = i % 6 === 0 ? 0 : _this.options.size * 0.017;
|
||
|
|
_this.ctx.save();
|
||
|
|
_this.ctx.rotate(i * Math.PI / 12);
|
||
|
|
_this.ctx.fillRect(_this.options.size / 2 - offset, 0, -_this.options.size * 0.05 + offset, 1);
|
||
|
|
_this.ctx.restore();
|
||
|
|
};
|
||
|
|
renderTrack = function() {
|
||
|
|
var offset;
|
||
|
|
offset = _this.options.size / 2 - _this.options.lineWidth / 2;
|
||
|
|
if (_this.options.scaleColor !== false) {
|
||
|
|
offset -= _this.options.size * 0.08;
|
||
|
|
}
|
||
|
|
_this.ctx.beginPath();
|
||
|
|
_this.ctx.arc(0, 0, offset, 0, Math.PI * 2, true);
|
||
|
|
_this.ctx.closePath();
|
||
|
|
_this.ctx.strokeStyle = _this.options.trackColor;
|
||
|
|
_this.ctx.lineWidth = _this.options.lineWidth;
|
||
|
|
_this.ctx.stroke();
|
||
|
|
};
|
||
|
|
renderBackground = function() {
|
||
|
|
if (_this.options.scaleColor !== false) {
|
||
|
|
renderScale();
|
||
|
|
}
|
||
|
|
if (_this.options.trackColor !== false) {
|
||
|
|
renderTrack();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
drawLine = function(percent) {
|
||
|
|
var offset;
|
||
|
|
renderBackground();
|
||
|
|
_this.ctx.strokeStyle = $.isFunction(_this.options.barColor) ? _this.options.barColor(percent) : _this.options.barColor;
|
||
|
|
_this.ctx.lineCap = _this.options.lineCap;
|
||
|
|
_this.ctx.lineWidth = _this.options.lineWidth;
|
||
|
|
offset = _this.options.size / 2 - _this.options.lineWidth / 2;
|
||
|
|
if (_this.options.scaleColor !== false) {
|
||
|
|
offset -= _this.options.size * 0.08;
|
||
|
|
}
|
||
|
|
_this.ctx.save();
|
||
|
|
_this.ctx.rotate(-Math.PI / 2);
|
||
|
|
_this.ctx.beginPath();
|
||
|
|
_this.ctx.arc(0, 0, offset, 0, Math.PI * 2 * percent / 100, false);
|
||
|
|
_this.ctx.stroke();
|
||
|
|
_this.ctx.restore();
|
||
|
|
};
|
||
|
|
rAF = (function() {
|
||
|
|
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function(callback) {
|
||
|
|
return window.setTimeout(callback, 1000 / 60);
|
||
|
|
};
|
||
|
|
})();
|
||
|
|
animateLine = function(from, to) {
|
||
|
|
var anim, startTime;
|
||
|
|
_this.options.onStart.call(_this);
|
||
|
|
_this.percentage = to;
|
||
|
|
Date.now || (Date.now = function() {
|
||
|
|
return +(new Date);
|
||
|
|
});
|
||
|
|
startTime = Date.now();
|
||
|
|
anim = function() {
|
||
|
|
var currentValue, process;
|
||
|
|
process = Math.min(Date.now() - startTime, _this.options.animate);
|
||
|
|
_this.ctx.clearRect(-_this.options.size / 2, -_this.options.size / 2, _this.options.size, _this.options.size);
|
||
|
|
renderBackground.call(_this);
|
||
|
|
currentValue = [easeInOutQuad(process, from, to - from, _this.options.animate)];
|
||
|
|
_this.options.onStep.call(_this, currentValue);
|
||
|
|
drawLine.call(_this, currentValue);
|
||
|
|
if (process >= _this.options.animate) {
|
||
|
|
return _this.options.onStop.call(_this, currentValue, to);
|
||
|
|
} else {
|
||
|
|
return rAF(anim);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
rAF(anim);
|
||
|
|
};
|
||
|
|
easeInOutQuad = function(t, b, c, d) {
|
||
|
|
var easeIn, easing;
|
||
|
|
easeIn = function(t) {
|
||
|
|
return Math.pow(t, 2);
|
||
|
|
};
|
||
|
|
easing = function(t) {
|
||
|
|
if (t < 1) {
|
||
|
|
return easeIn(t);
|
||
|
|
} else {
|
||
|
|
return 2 - easeIn((t / 2) * -2 + 2);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
t /= d / 2;
|
||
|
|
return c / 2 * easing(t) + b;
|
||
|
|
};
|
||
|
|
return this.init();
|
||
|
|
};
|
||
|
|
$.easyPieChart.defaultOptions = {
|
||
|
|
barColor: '#ef1e25',
|
||
|
|
trackColor: '#f2f2f2',
|
||
|
|
scaleColor: '#dfe0e0',
|
||
|
|
lineCap: 'round',
|
||
|
|
rotate: 0,
|
||
|
|
size: 110,
|
||
|
|
lineWidth: 3,
|
||
|
|
animate: false,
|
||
|
|
delay: false,
|
||
|
|
onStart: $.noop,
|
||
|
|
onStop: $.noop,
|
||
|
|
onStep: $.noop
|
||
|
|
};
|
||
|
|
$.fn.easyPieChart = function(options) {
|
||
|
|
return $.each(this, function(i, el) {
|
||
|
|
var $el, instanceOptions;
|
||
|
|
$el = $(el);
|
||
|
|
if (!$el.data('easyPieChart')) {
|
||
|
|
instanceOptions = $.extend({}, options, $el.data());
|
||
|
|
return $el.data('easyPieChart', new $.easyPieChart(el, instanceOptions));
|
||
|
|
}
|
||
|
|
});
|
||
|
|
};
|
||
|
|
return void 0;
|
||
|
|
})(jQuery);
|