我很尴尬地意识到,segment 属性是一个自定义属性,在我发现的一个示例中创建并使用它来更新饼图的路径,从而更新它的大小。它看起来像这样:
var r = Raphael("holder");
r.customAttributes.segment = function (x, y, r, a1, a2) {
var flag = (a2 - a1) > 180,
clr = (a2 - a1) / 360;
a1 = (a1 % 360) * Math.PI / 180;
a2 = (a2 % 360) * Math.PI / 180;
return {
path: [["M", x, y], ["l", r * Math.cos(a1), r * Math.sin(a1)], ["A", r, r, 0, +flag, 1, x + r * Math.cos(a2), y + r * Math.sin(a2)], ["z"]],
fill: "hsb(" + clr + ", .75, .8)"
};
};
这是在上下文中的样子:我有三个值 [10, 20, 15],总计为 45。假设一个宽度和高度为 250 的圆,我可以使用像这样的段自定义属性用切片填充圆(假设我的页面上有一个 div,其 id 为 holder):
var r = Raphael("holder");
r.customAttributes.segment = function (x, y, r, a1, a2) {
var flag = (a2 - a1) > 180,
clr = (a2 - a1) / 360;
a1 = (a1 % 360) * Math.PI / 180;
a2 = (a2 % 360) * Math.PI / 180;
return {
path: [["M", x, y], ["l", r * Math.cos(a1), r * Math.sin(a1)], ["A", r, r, 0, +flag, 1, x + r * Math.cos(a2), y + r * Math.sin(a2)], ["z"]],
fill: "hsb(" + clr + ", .75, .8)"
};
};
points = [10, 20, 15];
total = 45;
start = 0;
paths = [];
for(i=0; i<=2; i++) {
size = 360 / total * points[i];
var slice = r.path();
slice.attr({segment: [250, 250, 200, start, start + size], stroke: "#000", title: "Slice "+i});
paths.push(slice);
start += size;
}
然后,我可以随时通过为段属性设置动画来为路径数组中的切片设置动画:
newPoints = [5, 20, 20];
start = 0;
for(i=0; i<=2; i++) {
size = 360 / total * newPoints[i];
paths[i].animate({segment: [250, 250, 200, start, start + size]}, 800);
paths[i].angle = start - size / 2;
start += size;
}
有些我明白,有些我不明白。但是上面的代码可以工作(我检查过)。