拉斐爾餅圖 - 繪製路徑逆時針

我試圖從Raphael.js（http://raphaeljs.com/pie.html）採取演示派，並順時針繪製 - 目前它正在繪製逆時針這並沒有很大的意義。這是的jsfiddle從演示代碼：
http://jsfiddle.net/6bWuT/拉斐爾餅圖 - 繪製路徑逆時針

第14行（開始「迴歸paper.path」下面）改變第二0到1 應改變旋轉爲順時針方向，但實際上只是螺絲情節。任何幫助將大量讚賞:)預先感謝。從小提琴

代碼以供參考：

Raphael.fn.pieChart = function (cx, cy, r, values, labels, stroke) { 
    var paper = this, 
     rad = Math.PI/180, 
     chart = this.set(); 
    function sector(cx, cy, r, startAngle, endAngle, params) { 
     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); 
     return paper.path(["M", cx, cy, "L", x1, y1, "A", r, r, 0, +(endAngle - startAngle > 180), 0, x2, y2, "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 = Raphael.hsb(start, 1, 1), 
       p = sector(cx, cy, r, angle, angle + angleplus, {fill: "90-" + bcolor + "-" + color, stroke: stroke, "stroke-width": 3}), 
       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-size": 20}); 
      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(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; 
}; 

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

來源

2013-02-19 Storsey

OOP，發現它..改變行業功能：

function sector(cx, cy, r, startAngle, endAngle, params) { 
    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); 
    return paper.path(["M", cx, cy, "L", x1, y1, "A", r, r, 1, +(endAngle - startAngle > 180), 0, x2, y2, "z"]).attr(params); 
}

的COS和罪，現正以正數由負代替，並且在paper.path行中將0更改爲1。贏！ :)

來源

2013-02-19 11:40:29 Storsey

拉斐爾餅圖 - 繪製路徑逆時針

回答

相關問題