HTML кликабельные или просверленные круговые диаграммы с использованием Graphael - PullRequest
Новая
       10

HTML кликабельные или просверленные круговые диаграммы с использованием Graphael

0 голосов
/ 07 марта 2012

Фон

Мне удалось получить пример графеля работающей динамической круговой диаграммы. Однако у меня возникли проблемы с пониманием синтаксиса ...

В примере передаются две 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>

Ответы [ 2 ]

3 голосов
/ 23 апреля 2012

Лучшим ответом для этого было использование D3.js.Вот рабочий пример ... " Несколько круговых диаграмм D3, смешанных с HTML-макетами ".

2 голосов
/ 09 сентября 2012

Звучит так, как будто вы нажали ту же ошибку в gRaphael, что и я . Ссылки в этом массиве должны применяться в том же порядке, что и метки и точки данных, но это не так.

Обсуждение в этой ошибке предлагает несколько патчей, и я закончил тем, что применил один из этого форка к моей локальной копии g.pie.js (до минимизации файла).

...