Обновление размера секторов в круговой диаграмме Рафаэля - PullRequest
Новая
       9

Обновление размера секторов в круговой диаграмме Рафаэля

4 голосов
/ 22 сентября 2010

Я работаю над созданием круговой диаграммы, которая показывает результаты с течением времени.Как таковой, он должен анимировать между состояниями, чтобы показать, как меняются разные срезы.Я выяснил, как массово изменить все срезы (используя этот пример в качестве отправной точки), но я хотел бы иметь возможность выбирать и управлять конкретным срезом (или сектором, как его называет Рафаэль)) вовремя.Кто-нибудь разобрался, как это сделать?Я обнаружил, что если var pie - это моя круговая диаграмма, то я могу получить определенный фрагмент с помощью: 

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

Но когда я пытаюсь изменить фрагмент с помощью, скажем, анимации (в частности, чтобы изменить его размер), который терпит неудачу (сегмент не правильный путь?): 

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

Любое понимание манипулирования отдельными срезами было бы очень полезно.

1 Ответ

7 голосов
/ 23 сентября 2010

С большим смущением я понял, что атрибут сегмента - это пользовательский атрибут, созданный и использованный в примере, который я нашел, чтобы обновить путь фрагмента пирога и, следовательно, его размер.Это выглядит так: 

  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)"
      };
  };

Вот как это может выглядеть в контексте: у меня есть три значения [10, 20, 15], которые в сумме составляют 45. Предполагая круг шириной и высотой 250,Я могу заполнить круг срезами с помощью пользовательского атрибута сегмента, как это (при условии, что у меня есть 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;
}

Затем я могу анимировать фрагменты в моем массиве paths всякий раз, когдаЯ хочу, анимируя атрибут сегмента: 

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;
}

Что-то, что я понимаю, что-то, что я не понимаю.Но приведенный выше код будет работать (я проверял).

...