4

時間の経過に伴う結果を示す円グラフの作成に取り組んでいます。そのため、さまざまなスライスがどのように変化するかを示すために、状態間でアニメーション化する必要があります。すべてのスライスをまとめて変更する方法を理解しましたが（この例を開始点として使用）、特定のスライス（またはRaphaelが呼ぶセクター）を一度に選択して管理できるようにしたいと思います。誰かがそれを行う方法を理解しましたか？var pieが私の円グラフである場合、次の方法で特定のスライスを取得できることがわかりました。

var pie = r.g.piechart(200, 200, 150, dataArray);
slice = pie.series[0];

しかし、たとえばアニメーション（特にサイズを変更するため）でスライスを変更しようとすると、失敗します（セグメントは正しい方法ではありませんか？）：

slice.animate({segment: [200, 200, 0, 100]}, 800);

個々のスライスを操作するための洞察は非常に役立ちます。

4

1 に答える 1

7

セグメント属性は、パイスライスのパス、つまりそのサイズを更新するために見つけた例で作成および使用されたカスタム属性であることに、非常に恥ずかしい思いをしました。次のようになります。

  var r = Raphael("holder");
  r.customAttributes.segment = function (x, y, r, a1, a2) {
      var flag = (a2 - a1) > 180,
          clr = (a2 - a1) / 360;
      a1 = (a1 % 360) * Math.PI / 180;
      a2 = (a2 % 360) * Math.PI / 180;
      return {
          path: [["M", x, y], ["l", r * Math.cos(a1), r * Math.sin(a1)], ["A", r, r, 0, +flag, 1, x + r * Math.cos(a2), y + r * Math.sin(a2)], ["z"]],
          fill: "hsb(" + clr + ", .75, .8)"
      };
  };

コンテキストでこれがどのように見えるかを次に示します。合計45の3つの値[10、20、15]があります。幅と高さが250の円を想定すると、次のようなセグメントカスタム属性を使用して円にスライスを入力できます。 （私のページに所有者のIDを持つdivがあると仮定します）：

var r = Raphael("holder");
r.customAttributes.segment = function (x, y, r, a1, a2) {
    var flag = (a2 - a1) > 180,
        clr = (a2 - a1) / 360;
    a1 = (a1 % 360) * Math.PI / 180;
    a2 = (a2 % 360) * Math.PI / 180;
    return {
        path: [["M", x, y], ["l", r * Math.cos(a1), r * Math.sin(a1)], ["A", r, r, 0, +flag, 1, x + r * Math.cos(a2), y + r * Math.sin(a2)], ["z"]],
        fill: "hsb(" + clr + ", .75, .8)"
    };
};
points = [10, 20, 15];
total = 45;
start = 0;
paths = [];
for(i=0; i<=2; i++) {
  size = 360 / total * points[i];
  var slice = r.path();
  slice.attr({segment: [250, 250, 200, start, start + size], stroke: "#000", title: "Slice "+i});
  paths.push(slice);
  start += size;
}

次に、セグメント属性をアニメーション化することで、いつでもパス配列のスライスをアニメーション化できます。

newPoints = [5, 20, 20];
start = 0;
for(i=0; i<=2; i++) {
  size = 360 / total * newPoints[i];
  paths[i].animate({segment: [250, 250, 200, start, start + size]}, 800);
  paths[i].angle = start - size / 2;
  start += size;
}

理解できるものもあれば、理解できないものもあります。しかし、上記のコードは機能します（私はチェックしました）。

于 2010-09-22T21:16:25.060 に答える