Graphael饼图图例重叠

Question

我使用gRaphaël图表已经有几个星期了，时不时地会遇到一些奇怪的问题。一个反复出现的主题是，饼图图例标签都会在错误的位置挤在一起。图片>文字：

​

​

在本例中，将按照您的预期创建图表：

var r = Raphael(domNode, 300, 120);

this.chart = r.piechart(55, 55, 50, [75, 25],
    {
        colors: [
            "000-#d00-#900",
            "000-#3a3-#070"
        ],
        legend: ["Building", "Tertiary Education"],
        legendpos: "east"
    });

然后我做一些更基本的样式，但关闭它并没有帮助。这个问题在<svg>节点中很明显(文本和圆圈节点共享重叠的位置)，但是我不知道它来自哪里或者为什么，而且它只是偶尔发生；其他图表工作得很好。论坛和问题跟踪器上也什么也没有，尽管我刚刚意识到我可能应该去那里问一下。

使用Raphaël 2.1.0和g.Raphael 0.51。

Answer 1

我找到了下面的blog post，它解决了这个问题。如果饼图是在最初隐藏的元素中呈现的，则gRaphael在正确计算位置时会出现问题，从而导致堆叠图例：

所以解决方案是首先渲染facebox的一部分，在facebox显示之后，然后执行Raphael。换句话说，确保在图表容器存在且未隐藏的情况下生成图表！

Answer 2

试着定义你的图例如下

{ legend: ["Building", "Tertiary Education"] , legendpos: "east"}

这是我能在你的和my working jsfiddle之间找到的唯一区别