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

Фон

Я смог получить пример работы динамической круговой диаграммы. Тем не менее, у меня проблемы с пониманием синтаксиса...

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

Решение

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

Источник

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

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

Источник
Другие вопросы по тегам