1
如何將自定義顏色添加到此raphael餅圖。 http://raphaeljs.com/pie.html它從HTML表中獲取值並將它們插入到餅圖中。現在它使用以下來填充扇區。我認爲它使用隨機函數來選擇十六進制顏色。我不確定。raphael演示餅圖調整以添加自定義顏色
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");
});
你是小提琴不起作用... – Jesper
你是對的。試試這個 - http://jsfiddle.net/amadanNM/wqcnwcu6/ – amadan