raphael演示餅圖調整以添加自定義顏色

Question

如何將自定義顏色添加到此raphael餅圖。 http://raphaeljs.com/pie.html它從HTML表中獲取值並將它們插入到餅圖中。現在它使用以下來填充扇區。我認爲它使用隨機函數來選擇十六進制顏色。我不確定。

bcolor = Raphael.hsb(start, 1, 1), 
      p = sector(cx, cy, r, angle, angle + angleplus, {fill: "90-" + bcolor + "-" + color, stroke: stroke, "stroke-width": 2}), 

我希望能夠拉入一組十六進制顏色數組。不應該有超過6個值。這是完整的代碼。我也想設置自定義漸變，但現在不是必需的。

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, .90, 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": 2}), 
       txt = paper.text(cx + (r + delta + 2) * Math.cos(-popangle * rad), cy + (r + delta + 5) * Math.sin(-popangle * rad), labels[j]).attr({fill: "#999999", stroke: "none", opacity: 1, "font-size": 13}); 
      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-new", 400, 400).pieChart(100, 100, 50, values, labels, "#fff"); 
}); 

Answer 1

bcolor = Raphael.hsb(hue,saturation,value) 

需要開始作爲色調的值。所以它從0開始，併爲每個扇區增加.1。沒有什麼隨意的。要做你需要的，只需創建你的數組。

var colors = ['red','green','blue','yellow','#ffaa00','#00ffaa','#aa00ff']; 

組從陣列的顏色（模量保持顏色陣列長度內的j的值）

bcolor = colors[j%colors.length] 

並在段

p = sector(cx, cy, r, angle, angle + angleplus, 
    {fill: "90-" + bcolor + "-" + bcolor, stroke: stroke, "stroke-width": 1}) 

原始代碼中使用它我從使用過的兩種顏色（顏色和bcolor）編輯了這個，而我在這裏只是bcolor。如果你想要一個漸變，請用另一種顏色加回來。

這是顯示結果的fiddle。