svg - 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 在正确计算位置时会遇到问题，从而导致出现此堆叠图例:

So the solution is to render the facebox partial first, after the facebox is shown, then you execute the Raphael Javascript. In other word, make sure you generate the chart when the chart container is there and not hidden!

我通过将创建饼图功能从 jQuery 文档就绪指令移动到将使隐藏元素可见的单击事件来解决这个问题。