github.com/insionng/yougam@v0.0.0-20170714101924-2bc18d833463/public/js/charts/easypiechart/jquery.easy-pie-chart.js (about) 1 // Generated by CoffeeScript 1.6.3 2 /* 3 Easy pie chart is a jquery plugin to display simple animated pie charts for only one value 4 5 Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) 6 and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses. 7 8 Built on top of the jQuery library (http://jquery.com) 9 10 @source: http://github.com/rendro/easy-pie-chart/ 11 @autor: Robert Fleischmann 12 @version: 1.2.5 13 14 Inspired by: http://dribbble.com/shots/631074-Simple-Pie-Charts-II?list=popular&offset=210 15 Thanks to Philip Thrasher for the jquery plugin boilerplate for coffee script 16 */ 17 18 (function($) { 19 $.easyPieChart = function(el, options) { 20 var addScaleLine, animateLine, drawLine, easeInOutQuad, rAF, renderBackground, renderScale, renderTrack, 21 _this = this; 22 this.el = el; 23 this.$el = $(el); 24 this.$el.data("easyPieChart", this); 25 this.init = function() { 26 var percent, scaleBy; 27 _this.options = $.extend({}, $.easyPieChart.defaultOptions, options); 28 percent = parseInt(_this.$el.data('percent'), 10); 29 _this.percentage = 0; 30 _this.canvas = $("<canvas width='" + _this.options.size + "' height='" + _this.options.size + "'></canvas>").get(0); 31 _this.$el.append(_this.canvas); 32 if (typeof G_vmlCanvasManager !== "undefined" && G_vmlCanvasManager !== null) { 33 G_vmlCanvasManager.initElement(_this.canvas); 34 } 35 _this.ctx = _this.canvas.getContext('2d'); 36 if (window.devicePixelRatio > 1) { 37 scaleBy = window.devicePixelRatio; 38 $(_this.canvas).css({ 39 width: _this.options.size, 40 height: _this.options.size 41 }); 42 _this.canvas.width *= scaleBy; 43 _this.canvas.height *= scaleBy; 44 _this.ctx.scale(scaleBy, scaleBy); 45 } 46 _this.ctx.translate(_this.options.size / 2, _this.options.size / 2); 47 _this.ctx.rotate(_this.options.rotate * Math.PI / 180); 48 _this.$el.addClass('easyPieChart'); 49 _this.$el.css({ 50 width: _this.options.size, 51 height: _this.options.size, 52 lineHeight: "" + _this.options.size + "px" 53 }); 54 _this.update(percent); 55 return _this; 56 }; 57 this.update = function(percent) { 58 percent = parseFloat(percent) || 0; 59 if (_this.options.animate === false) { 60 drawLine(percent); 61 } else { 62 if (_this.options.delay) { 63 animateLine(_this.percentage, 0); 64 setTimeout(function() { 65 return animateLine(_this.percentage, percent); 66 }, _this.options.delay); 67 } else { 68 animateLine(_this.percentage, percent); 69 } 70 } 71 return _this; 72 }; 73 renderScale = function() { 74 var i, _i, _results; 75 _this.ctx.fillStyle = _this.options.scaleColor; 76 _this.ctx.lineWidth = 1; 77 _results = []; 78 for (i = _i = 0; _i <= 24; i = ++_i) { 79 _results.push(addScaleLine(i)); 80 } 81 return _results; 82 }; 83 addScaleLine = function(i) { 84 var offset; 85 offset = i % 6 === 0 ? 0 : _this.options.size * 0.017; 86 _this.ctx.save(); 87 _this.ctx.rotate(i * Math.PI / 12); 88 _this.ctx.fillRect(_this.options.size / 2 - offset, 0, -_this.options.size * 0.05 + offset, 1); 89 _this.ctx.restore(); 90 }; 91 renderTrack = function() { 92 var offset; 93 offset = _this.options.size / 2 - _this.options.lineWidth / 2; 94 if (_this.options.scaleColor !== false) { 95 offset -= _this.options.size * 0.08; 96 } 97 _this.ctx.beginPath(); 98 _this.ctx.arc(0, 0, offset, 0, Math.PI * 2, true); 99 _this.ctx.closePath(); 100 _this.ctx.strokeStyle = _this.options.trackColor; 101 102 if (_this.options.color) { 103 _this.ctx.fillStyle = _this.options.color; 104 _this.ctx.fill(); 105 } 106 107 _this.ctx.lineWidth = _this.options.lineWidth; 108 _this.ctx.stroke(); 109 }; 110 renderBackground = function() { 111 if (_this.options.scaleColor !== false) { 112 renderScale(); 113 } 114 if (_this.options.trackColor !== false) { 115 renderTrack(); 116 } 117 }; 118 drawLine = function(percent) { 119 var offset; 120 renderBackground(); 121 _this.ctx.strokeStyle = $.isFunction(_this.options.barColor) ? _this.options.barColor(percent) : _this.options.barColor; 122 _this.ctx.lineCap = _this.options.lineCap; 123 _this.ctx.lineWidth = _this.options.lineWidth; 124 offset = _this.options.size / 2 - _this.options.lineWidth / 2; 125 if (_this.options.scaleColor !== false) { 126 offset -= _this.options.size * 0.08; 127 } 128 _this.ctx.save(); 129 _this.ctx.rotate(-Math.PI / 2); 130 _this.ctx.beginPath(); 131 _this.ctx.arc(0, 0, offset, 0, Math.PI * 2 * percent / 100, false); 132 _this.ctx.stroke(); 133 _this.ctx.restore(); 134 }; 135 rAF = (function() { 136 return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function(callback) { 137 return window.setTimeout(callback, 1000 / 60); 138 }; 139 })(); 140 animateLine = function(from, to) { 141 var anim, startTime; 142 _this.options.onStart.call(_this); 143 _this.percentage = to; 144 Date.now || (Date.now = function() { 145 return +(new Date); 146 }); 147 startTime = Date.now(); 148 anim = function() { 149 var currentValue, process; 150 process = Math.min(Date.now() - startTime, _this.options.animate); 151 _this.ctx.clearRect(-_this.options.size / 2, -_this.options.size / 2, _this.options.size, _this.options.size); 152 renderBackground.call(_this); 153 currentValue = [easeInOutQuad(process, from, to - from, _this.options.animate)]; 154 _this.options.onStep.call(_this, currentValue); 155 drawLine.call(_this, currentValue); 156 if (process >= _this.options.animate) { 157 return _this.options.onStop.call(_this, currentValue, to); 158 } else { 159 return rAF(anim); 160 } 161 }; 162 rAF(anim); 163 }; 164 easeInOutQuad = function(t, b, c, d) { 165 var easeIn, easing; 166 easeIn = function(t) { 167 return Math.pow(t, 2); 168 }; 169 easing = function(t) { 170 if (t < 1) { 171 return easeIn(t); 172 } else { 173 return 2 - easeIn((t / 2) * -2 + 2); 174 } 175 }; 176 t /= d / 2; 177 return c / 2 * easing(t) + b; 178 }; 179 return this.init(); 180 }; 181 $.easyPieChart.defaultOptions = { 182 barColor: '#ef1e25', 183 trackColor: '#f2f2f2', 184 scaleColor: '#dfe0e0', 185 lineCap: 'round', 186 rotate: 0, 187 size: 110, 188 lineWidth: 3, 189 animate: false, 190 delay: false, 191 onStart: $.noop, 192 onStop: $.noop, 193 onStep: $.noop 194 }; 195 $.fn.easyPieChart = function(options) { 196 return $.each(this, function(i, el) { 197 var $el, instanceOptions; 198 $el = $(el); 199 if (!$el.data('easyPieChart')) { 200 instanceOptions = $.extend({}, options, $el.data()); 201 return $el.data('easyPieChart', new $.easyPieChart(el, instanceOptions)); 202 } 203 }); 204 }; 205 return void 0; 206 })(jQuery);