0

背景

我能够得到一个动态饼图的图形示例。但是，我在理解语法时遇到问题......

该示例传递了两个 HTML 链接，并且似乎将链接与两个标签和两个特定的饼图切片相关联，但这些相关性或关联如何在传递给“饼图”方法的字符串中发生并不明显。我尝试传递更多链接，但代码似乎将链接与标签随机关联。似乎没有明显的方法来确保 Link1 始终与 Label1 相关联。

问题

有谁知道如何清楚地解释代码中发生的事情？这两个链接如何仅与饼图的两个切片相关联？我怎样才能始终如一地将链接与标签和特定的饼图关联起来？

笔记

我个人不喜欢 piechart 函数接受三个“单独”的值、标签和链接的字符串，这些字符串没有相互搭配，因为它使代码难以阅读。原来的样子如下...

例子

pie = r.piechart(320, 240, 100, [55, 20, 13, 32, 5, 1, 2, 10], { legend: ["%%.%% - Enterprise Users", "IE Users"], legendpos: "west", href: ["http://raphaeljs.com", "http://g.raphaeljs.com"]}); r.text(320, 100, "Interactive Pie Chart").attr({ font: "20px sans-serif" });)

相反，能够传入一个数组数组会更好......array = [[SliceValue1, label1, link1], [SliceValue2, label2, link2],等等。如果有人知道如何做到这一点，这将是清理代码并使其更具可读性的好方法。

源代码

<script>
  window.onload = function () {
    var r = Raphael("holder"),
    pie = r.piechart(320, 240, 100, [55, 20, 13, 32, 5, 1, 2, 10], { legend: ["%%.%% - Enterprise Users", "IE Users"], legendpos: "west", href: ["http://raphaeljs.com", "http://g.raphaeljs.com"]});
    r.text(320, 100, "Interactive Pie Chart").attr({ font: "20px sans-serif" });
    pie.hover(function () {
      this.sector.stop();
      this.sector.scale(1.1, 1.1, this.cx, this.cy);
      if (this.label) {
        this.label[0].stop();
        this.label[0].attr({ r: 7.5 });
        this.label[1].attr({ "font-weight": 800 });
      }
    }, function () {
    this.sector.animate({ transform: 's1 1 ' + this.cx + ' ' + this.cy }, 500, "bounce");
    if (this.label) {
    this.label[0].animate({ r: 5 }, 500, "bounce");
    this.label[1].attr({ "font-weight": 400 });
    }
    });
  };
</script>
4

2 回答 2

3

更好的答案是使用 D3.js。这是一个工作示例……“与 HTML 布局结构混合的多个 D3 饼图”。

于 2012-04-23T12:21:34.687 回答
2

听起来你在 gRaphael 中遇到了和我一样的错误。该数组中的链接应该以与标签和数据点相同的顺序应用，但它们不是。

该错误中的讨论提供了一些补丁，我最终将来自这个分支的补丁应用到我的本地 g.pie.js 副本（在最小化文件之前）。

于 2012-09-09T09:01:03.830 回答