gauge.min.js

function Gauge(d,f){if(f){d.width=d.width||270;d.height=d.height||270;d.aperture=d.aperture||270;d.radius=d.radius||100;d.areas=d.areas||[];d.values=d.values||[0,1,2,3,4,5,6,7,8,9,10];d.arrowColor=d.arrowColor||"#1e98e4";d.angle=d.angle||0;d.scaleInside=d.scaleInside||false;d.arcColor=d.arcColor||"#777";d.textColor=d.textColor||"#000";d.dotColor=d.dotColor||"gray";d.font=d.font||"12px Arial";d.checkAreas=d.checkAreas||false;d.arcWidth=d.arcWidth||5;var c=document.createElement("canvas");c.width=d.width;c.height=d.height;f.appendChild(c);var e=c.getContext("2d");e.clearRect(0,0,c.width,c.height);e.save();var b=parseInt(c.width/2);var a=parseInt(c.height/2);e.beginPath();e.arc(b,a,d.radius,(Math.PI/180)*(270-(d.aperture/2)),(Math.PI/180)*(270+(d.aperture/2)),false);e.lineWidth=d.arcWidth;e.strokeStyle=d.arcColor;e.stroke();d.areas.forEach(function(i){if(d.checkAreas){var h=(180-d.aperture)/2;var g=180-((180-d.aperture)/2);if(i.start<h){i.start=h}if(i.end>g){i.end=g}}if(i.start!=undefined&&i.end!=undefined&&i.color&&i.start<i.end){e.beginPath();e.arc(b,a,d.radius,(Math.PI/180)*(i.start+180),(Math.PI/180)*(i.end+180),false);e.lineWidth=d.arcWidth;e.strokeStyle=i.color;e.stroke()}else{console.log("gauge.js: Ошибка - цветная область задана некорректно.")}});e.beginPath();e.lineWidth=0.5;e.translate(b,a);e.font=d.font;e.textAlign="center";e.textBaseline="middle";d.values.forEach(function(j,g){e.beginPath();e.strokeStyle=d.textColor;e.fillStyle=d.textColor;if(g==0){e.rotate((Math.PI/180)*(-(d.aperture/2)))}else{e.rotate((Math.PI/180)*((2/(d.values.length-1)/10)*(d.aperture/2)))}if(d.scaleInside){e.moveTo(0,-d.radius+d.arcWidth);e.lineTo(0,-d.radius+d.arcWidth+10);e.fillText(j,0,-d.radius+d.arcWidth+17)}else{e.moveTo(0,-d.radius-d.arcWidth);e.lineTo(0,-d.radius-d.arcWidth-10);e.fillText(j,0,-d.radius-d.arcWidth-17)}e.stroke();if(g<d.values.length-1){for(var h=0;h<9;h++){e.beginPath();e.strokeStyle=d.dotColor;e.rotate((Math.PI/180)*((2/(d.values.length-1)/10)*(d.aperture/2)));if(d.scaleInside){e.moveTo(0,-d.radius+d.arcWidth+1);e.lineTo(0,-d.radius+d.arcWidth+2)}else{e.moveTo(0,-d.radius-d.arcWidth-1);e.lineTo(0,-d.radius-d.arcWidth-2)}e.stroke()}}});e.beginPath();e.arc(0,0,10,0,2*Math.PI,false);e.fillStyle=d.arrowColor;e.fill();e.lineWidth=1;e.strokeStyle=d.arrowColor;e.stroke();e.beginPath();e.rotate((Math.PI/180)*180);e.rotate((Math.PI/180)*parseInt(d.aperture*-(1-d.angle)));e.moveTo(-5,0);e.lineTo(0,d.radius);e.lineTo(5,0);e.fillStyle=d.arrowColor;e.fill();e.restore()}else{console.log("gauge.js: Ошибка - не задан родительский элемент")}};