i make chart:

but can't find in kendo ui property bind width 1 of series.
do know how it? or please suggest me other library or static solution.
i have example http://jsfiddle.net/da5ln/290/
function piechart(percentage, size, color) { var svgns = "http://www.w3.org/2000/svg"; var chart = document.createelementns(svgns, "svg:svg"); chart.setattribute("width", size); chart.setattribute("height", size); chart.setattribute("viewbox", "0 0 " + size + " " + size); // background circle var = document.createelementns(svgns, "circle"); back.setattributens(null, "cx", size / 2); back.setattributens(null, "cy", size / 2); back.setattributens(null, "r", size / 2); var color = "#d0d0d0"; if (size > 50) { color = "#ebebeb"; } back.setattributens(null, "fill", color); chart.appendchild(back); // primary wedge var path = document.createelementns(svgns, "path"); var unit = (math.pi *2) / 100; var startangle = 0; var endangle = percentage * unit - 0.001; var x1 = (size / 2) + (size / 2) * math.sin(startangle); var y1 = (size / 2) - (size / 2) * math.cos(startangle); var x2 = (size / 2) + (size / 2) * math.sin(endangle); var y2 = (size / 2) - (size / 2) * math.cos(endangle); var big = 0; if (endangle - startangle > math.pi) { big = 1; } var d = "m " + (size / 2) + "," + (size / 2) + // start @ circle center " l " + x1 + "," + y1 + // draw line (x1,y1) " " + (size / 2) + "," + (size / 2) + // draw arc of radius r " 0 " + big + " 1 " + // arc details... x2 + "," + y2 + // arc goes to (x2,y2) " z"; // close path (cx,cy) path.setattribute("d", d); // set path path.setattribute("fill", '#f05f3b'); chart.appendchild(path); // add wedge chart // foreground circle var front = document.createelementns(svgns, "circle"); front.setattribu tens(null, "cx", (size / 2)); front.setattributens(null, "cy", (size / 2)); front.setattributens(null, "r", (size * 0.17)); //about 34% big circle front.setattributens(null, "fill", "#fff"); chart.appendchild(front); return chart; } var c = document.getelementbyid('container'); c.appendchild( piechart(30, 200 ) );
var can = document.getelementbyid('canvas1'); var ctx = can.getcontext('2d'); //ctx.arc(x,y,radius,startangle,endangle, anticlockwise); ctx.beginpath() ctx.arc(100,100,100,0,math.pi, false); // outer (filled) // tip of "pen @ 0,100 ctx.arc(100,100,80,math.pi,math.pi*2, true); // outer (unfills it) ctx.closepath(); ctx.fill(); ctx.beginpath() ctx.fillstyle = "#c82124"; //red ctx.arc(100,100,110,math.pi,0, false); // outer (filled) // tip of "pen @ 0,100 ctx.arc(100,100,70,math.pi*2,math.pi, true); // outer (unfills it) ctx.fill(); ctx.closepath();
Comments
Post a Comment