use svg plugin exibit percentage

in svg data textbox insert

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" >
<path stroke="#ccc" fill-opacity="0" stroke-width="4" id="circle1" d="M 102 52 A 50 50 0 1 1 101.99999923845645 51.991273353784365" />
<path stroke="red" fill-opacity="0" stroke-width="4" id="circle2" />
<text id="text1" fill="red" font-size="20" text-anchor="middle"></text>
<text id="text2" fill="#333" font-size="20" text-anchor="middle"></text>

 

 

in Event onInitialMetric add 

 

var startX=102,startY=52,r = 50,clockwise=1;//x,y圆心位置 r圆弧的半径 clockwise顺时针
var data=0.635;
var Percentage=data*359.9999;

var deg=359.99;
var cw = typeof clockwise !== 'undefined' ? clockwise : 1;
var x = startX - r + r*Math.cos(deg*Math.PI/180);
var y = startY + (1===cw ? 1 : -1)*r*Math.sin(deg*Math.PI/180);
var bigOrSmall = deg>180 ? 1 : 0;


var ddddd= "M " + startX +" "+ startY + " A "+ r +" " + r + " 0 " + bigOrSmall + " " +cw+ " " + x + " " + y;

$(svgnode).find("#circle1").attr({"d":ddddd});

$(svgnode).find("#text2").attr({"x":startX-50});
$(svgnode).find("#text2").attr({ "y":startY+20});
$(svgnode).find("#text2").text("良品率");

$(svgnode).find("#text1").attr({"x":startX-50, "y":startY-10,"text":data*100+'%'});
$(svgnode).find("#text1").text(data*100+'%');
deg= Percentage;
cw = typeof clockwise !== 'undefined' ? clockwise : 1;
x = startX - r + r*Math.cos(deg*Math.PI/180);
y = startY + (1===cw ? 1 : -1)*r*Math.sin(deg*Math.PI/180);
bigOrSmall = deg>180 ? 1 : 0;


ddddd= "M " + startX +" "+ startY + " A "+ r +" " + r + " 0 " + bigOrSmall + " " +cw+ " " + x + " " + y;
$(svgnode).find("#circle2").attr({"d":ddddd});
console.log(ddddd);