使用Graphael的HTML Clickable或Drillable饼图

Question

背景

我能够获得动态饼图的graphael example。但是，我在理解语法时遇到了问题...

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

问题

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

注意

我个人不喜欢饼图函数接收三个“单独”的值，标签和链接，这些字符串彼此不并置，因为它使代码难以阅读。原文如下......

实施例

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>

Answer 1

更好的答案是使用D3.js.这是一个有效的例子......“Multiple D3 Pie Charts Mixed In With HTML Layout Constructs”。

Answer 2

听起来你正在点击the same bug in gRaphael that I did。该数组中的链接应按照与标签和数据点相同的顺序应用，但它们不是。

该bug中的讨论提供了一些补丁，最后我将the one from this fork应用于我的本地g.pie.js副本（在最小化文件之前）。