0

バックグラウンド

動的な円グラフが機能するグラフの例を取得できました。しかし、構文を理解するのに問題があります...

この例では 2 つの HTML リンクが渡され、リンクが 2 つのラベルと 2 つの特定のパイのスライスに関連付けられているように見えますが、「piechart」メソッドに渡される文字列でこれらの相関または関連付けがどのように発生するかは明らかではありません。さらにいくつかのリンクを渡そうとしましたが、コードはリンクをランダムにラベルに関連付けているようです。Link1 が常に Label1 に関連付けられていることを確認する明確な方法はないようです。

質問

コードで何が起こっているのかを明確に説明する方法を知っている人はいますか? 2 つのリンクは、円グラフの 2 つのスライスだけにどのように関連付けられていますか? リンクをラベルやパイの特定のスライスに一貫して関連付けるにはどうすればよいでしょうか?

ノート

個人的には、パイチャート関数が値、ラベル、リンクの 3 つの「別々の」文字列を取り込んでいて、コードが読みづらくなってしまうのが好きではありません。元は次のように見えます...

例

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 に答える