svg - 绘制拉斐尔 donut chart

Question

http://www.mediafire.com/view/z8ad4pedqr7twbl/donut.png

我想像那个图像一样绘制这个 donut 。我已经使用 raphaeljs 来绘制它。但是我找不到用红色和蓝色制作这些边框的解决方案。有人能帮我吗？有可能吗？

我的代码如下:

Raphael.fn.donutChart = function (cx, cy, r, rin, values, labels, stroke) {
    var paper = this,
        rad = Math.PI / 180,
        chart = this.set();
    function sector(cx, cy, r, startAngle, endAngle, params) {
        //console.log(params.fill);
        var x1 = cx + r * Math.cos(-startAngle * rad),
            x2 = cx + r * Math.cos(-endAngle * rad),
            y1 = cy + r * Math.sin(-startAngle * rad),
            y2 = cy + r * Math.sin(-endAngle * rad),
            xx1 = cx + rin * Math.cos(-startAngle * rad),
            xx2 = cx + rin * Math.cos(-endAngle * rad),
            yy1 = cy + rin * Math.sin(-startAngle * rad),
            yy2 = cy + rin * Math.sin(-endAngle * rad);

        return paper.path(["M", xx1, yy1,
                           "L", x1, y1, 
                           "A", r, r, 0, +(endAngle - startAngle > 180), 0, x2, y2, 
                           "L", xx2, yy2, 
                           "A", rin, rin, 0, +(endAngle - startAngle > 180), 1, xx1, yy1, "z"]
                         ).attr(params);

    }
    var angle = 0,
        total = 0,
        start = 0,
        process = function (j) {
            var value = values[j],
                angleplus = 360 * value / total,
                popangle = angle + (angleplus / 2),
                color = Raphael.hsb(start, .75, 1),
                ms = 500,
                delta = 30,
                bcolor = "#ccc",
                p = sector(cx, cy, r, angle, angle + angleplus, {fill:"#dfdfdf", "stroke-width":3, stroke:"red"}),
                txt = paper.text(cx + (r + delta + 155) * Math.cos(-popangle * rad), cy + (r + delta + 150) * Math.sin(-popangle * rad), labels[j]).attr({fill:"#000", stroke: "none", opacity: 0, "font-size": 20});

            p.mouseover(function () {
                p.stop().animate({transform: "s1.25 1.25 " + cx + " " + cy}, ms, "elastic");
                txt.stop().animate({opacity: 1}, ms, "elastic");

            }).mouseout(function () {
                p.stop().animate({transform: ""}, ms, "elastic");
                txt.stop().animate({opacity: 0}, ms);

            });
            angle += angleplus;
            chart.push(p);
            chart.push(txt);
            start += .1;
        };
    for (var i = 0, ii = values.length; i < ii; i++) {
        total += values[i];
    }
    for (i = 0; i < ii; i++) {
        process(i);
    }
    return chart;
};

    var values = [],
        labels = [];
    $("tr").each(function () {
        values.push(parseInt($("td", this).text(), 10));
        labels.push($("th", this).text());
    });
    $("table").hide();
    Raphael("holder", 700, 700).donutChart(350, 350, 80, 150, values, labels, "#fff");

Answer 1

如果您想以不同的方式对它们进行描边，则必须创建单独的路径:

    var p = paper.path(["M", xx1, yy1,
                       "L", x1, y1, 
                       "A", r, r, 0, +(endAngle - startAngle > 180), 0, x2, y2, 
                       "L", xx2, yy2, 
                       "A", rin, rin, 0, +(endAngle - startAngle > 180), 1, xx1, yy1, "z"]
                     ).attr(params);

    paper.path(["M", x1, y1, "A", r, r, 0, +(endAngle - startAngle > 180), 0, x2, y2]).attr({stroke: 'blue', 'stroke-width': 3});
    paper.path(["M", xx2, yy2, "A", rin, rin, 0, +(endAngle - startAngle > 180), 1, xx1, yy1]).attr({stroke: 'red', 'stroke-width': 3});

    return p;