charts - 如何更改系列的宽度？

Question

我是什么做这个图表的:



但我无法在 kendo UI 属性中找到绑定(bind)系列之一的宽度。

你知道怎么做吗？或者您能否建议我其他库或静态解决方案。

我有例子 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 back = 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 at circle center
            " L " + x1 + "," + y1 +     // Draw line to (x1,y1)
            " A " + (size / 2) + "," + (size / 2) +       // Draw an arc of radius r
            " 0 " + big + " 1 " +       // Arc details...
            x2 + "," + y2 +             // Arc goes to to (x2,y2)
            " Z";                       // Close path back to (cx,cy)
        path.setAttribute("d", d); // Set this path 
        path.setAttribute("fill", '#f05f3b');
        chart.appendChild(path); // Add wedge to 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% as big as back circle 
    front.setAttributeNS(null, "fill", "#fff");
    chart.appendChild(front);
    return chart;
}
var c = document.getElementById('container');
c.appendChild( pieChart(30, 200 ) );

Answer 1

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)
// the tip of the "pen is now at 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)
// the tip of the "pen is now at 0,100
ctx.arc(100,100,70,Math.PI*2,Math.PI, true); // outer (unfills it)

ctx.fill();

ctx.closePath();

http://jsfiddle.net/Hnw6a/1417/