Question

我正在使用raphaelto创建一个饼图。这是我在这里找到的一些raphael例子的修改。

你会在小提琴上看到图表左边有箭头。我需要一些帮助将它们定位在中心的相应部分边缘。 tri是三角形路径脚本。

我真的很乐意为此提供任何帮助。

 var angle = -90,
    total = 0,
    start = 0,
    process = function (j) {
        var value = values[j],
            angleplus = 180 * value / total,
            popangle = angle + (angleplus / 2),
            color = "hsb(" + start + ", 1, .5)",
            ms = 500,
            delta = 100,
            bcolor = "hsb(" + start + ", 1, 1)",
            p = sector(cx, cy, r, angle, angle + angleplus, {fill: bcolor , stroke: "none"}),
            tri =  paper.path("M 10 25 L 10 75 L 60 75 L 10 25 ").attr ({fill: bcolor , stroke: "none"}),
            txt = paper.text(cx + (r + delta + 55) * Math.cos(-popangle * rad), cy + (r + delta + 25) * Math.sin(-popangle * rad), labels[j]).attr({fill: bcolor, stroke: "none", opacity: 0, "font-family": 'Fontin-Sans, Arial', "font-size": "40px"});

        p.mouseover(function () {
            p.stop().animate({transform: "s1.1 1.1 " + 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(tri);
        chart.push(txt);
        start += .1;
    };

拉斐尔饼图与三角标记 - 定位

0 个答案: