如何让 2 个数字重叠 raphael.js

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");

但显然这不会随饼图缩放，并且很容易被更改 window 大小等不方便的事情破坏。

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

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");

但这给我留下了你可以在 fiddle 中看到的结果。

希望大家帮帮忙！

提前致谢。

Answer 1

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

也将圆圈放在彩色圆圈之后，使其出现在前面。这就是 DOM.

中元素的顺序

例如jsfiddle

如何让 2 个数字重叠 raphael.js

How to make 2 figures overlap in raphael.js

raphael