crm.js
1.16 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
$.fn.drawPercent = function(){
for(var i = 0; i < this.length; i++){
var canvas = this[i];
if($(canvas).attr("drawed") == "true"){
continue;
}
var cts = null;
if (canvas.getContext) {
cts = canvas.getContext('2d');
}else{
continue;
}
var process = parseInt($(canvas).attr("data-value"));
var x=40,y=40,radius=40,backColor='#e5e5e5',proColor='#0161c9',fontColor='#0161c9';
cts.beginPath();
cts.moveTo(x, y);
cts.arc(x, y, radius, 0, Math.PI * 2, false);
cts.closePath();
cts.fillStyle = backColor;
cts.fill();
cts.beginPath();
cts.moveTo(x, y);
cts.arc(x, y, radius, Math.PI * 1.5, Math.PI * 1.5 - Math.PI * 2 * process / 100, true);
cts.closePath();
cts.fillStyle = proColor;
cts.fill();
cts.beginPath();
cts.moveTo(x, y);
cts.arc(x, y, radius - (radius * 0.2), 0, Math.PI * 2, true);
cts.closePath();
cts.fillStyle = 'rgba(255,255,255,1)';
cts.fill();
cts.font = "normal 20px arial";
cts.fillStyle = fontColor;
cts.textAlign = 'center';
cts.textBaseline = 'middle';
cts.moveTo(x, y);
cts.fillText(process+"%", x, y);
$(canvas).attr("drawed", "true");
}
};