如何在raphael.js中重叠2个数字

Question

我是raphael的全新人，从来没有特别擅长使用canvas元素。我找到了一个有用的饼图，但需要稍微调整一下以满足我的需求。

这就是我现在所拥有的：http://jsfiddle.net/El4a/sbxjfafx/4/

这就是我想要实现的数字

我试图在饼图上绘制的白色圆圈显示在它下面。老实说，我不知道如何解决这个问题，虽然我确信解决方案不会那么困难。

我可以使用手动定位（这是一种糟糕的方式）使用以下代码实现此图：

var paper = Raphael(10, 50, 500, 500);
var circle = paper.circle(280, 180, 175);
circle.attr("fill", "white");
circle.attr("stroke", "#fff");

但很明显，这不会随着饼图一起扩展，并且很容易被更改窗口大小等不方便的事情所破坏。

我已尝试将该代码放入函数中，并以与创建饼图相同的方式创建它。

Raphael.fn.circle = function(cx, cy, r){
 var paper = this,
 rad = Math.PI / 180,
 chart = this.set();

var circle = paper.circle(280, 180, 175);
circle.attr("fill", "white");
circle.attr("stroke", "#fff");

return chart;

};

raphael("circle", 700, 700).circle(350, 350, 175, values, labels, "#fff");

但这让我得到了你可以在小提琴中看到的结果。

希望任何人都可以提供帮助！

提前致谢。

Answer 1

确保您没有两次创建画布。所以创建一次，然后使用该引用创建新元素。

同样将圆圈放在彩色圆圈后面，使其显示在前面。这完全是关于DOM中元素的顺序。

例如jsfiddle

相关的修订代码。

var r = raphael("holder", 700, 700);
    r.pieChart(350, 350, 200, values, labels, "#fff");
    r.circle(350, 350, 175).attr({ fill: 'white' });