Как установить ориентацию или начальную точку круговой диаграммы g.raphaeljs?

По умолчанию круговые диаграммы g.raphaeljs показывают наибольшее значение, простирающееся от верхней части диаграммы одинаково в обоих направлениях, а меньшие значения отображаются по часовой стрелке.

На изображении ниже самое большое значение (1) начинается примерно в 7 часов. Вместо этого я хотел бы показать наибольшее значение, начинающееся с 12 часов, как это можно сделать?

Поведение по умолчаниюЦелевое поведение


javascript svg raphael graphael
person Joe Dreimann    schedule 17.01.2013    source источник
comment
попробуйте поиграть с * g.pie.js* , сразу после этой строки var mangle = angle - 360 * values[i] / total / 2; , например mangle = mangle + 70; конечно вам понадобятся более умные расчеты...   -  person Daniel    schedule 17.01.2013
comment
Спасибо @Daniel, это работает. Теперь я надеюсь выяснить расчет, необходимый для надежной работы.   -  person Joe Dreimann    schedule 17.01.2013

Ответы (2)


arrow_upward
6
arrow_downward

Хорошо, нашел (и работает на 100%)... здесь: добавлены параметры .startFromFixedAngle, поэтому 1-й сектор круга начнет рисовать…

Вот рабочий jsfiddle, который я только что сделал: g raphael pie с начальным углом, установленным на 90

Не забудьте использовать новый аргумент startFromFixedAngle

Вот код...

Примените следующее к своему g.pie.js

заменять

 angle = 0,

с участием

 angle = opts.startFromFixedAngle || 0,

Удалить

 var mangle = angle - 360 * values[i] / total / 2;
 if (!i) {
     angle = 90 - mangle;

добавлять

 var mangle;
 if (opts.startFromFixedAngle)
     mangle = angle + 360 * values[i] / total / 2;
 else {
     mangle = angle - 360 * values[i] / total / 2;
     if (!i) {
         angle = 90 - mangle;
         mangle = angle - 360 * values[i] / total / 2;
     }
person Daniel    schedule 17.01.2013
comment
К вашему сведению, ваш связанный Fiddle теперь дает сбой из-за синтаксической ошибки в Chrome 26.0.1410.65. - person Tal; 21.05.2013
comment
+1 за рабочее исправление, -90 градусов в качестве начального угла делают замечательные круговые диаграммы в стиле pacman. - person Tal; 21.05.2013
comment
так как raw.github больше не работает, демо не работает. Для рабочего посетите jsfiddle.net/tgyfC/14 - person Cihad Turhan; 16.08.2013

arrow_upward
3
arrow_downward

Приведенное выше решение слишком сложное и нарушает любые усилия по анимации, зависящие от мангла (например, найденное здесь: Анимация круговой диаграммы Рафаэля при наведении). Одного изменения строки достаточно, если все, что вам нужно, это фиксированный начальный угол, но если вы хотите использовать аргумент, как указано выше, вы должны заменить

     if (!i) {
       angle = 90 - mangle;
       mangle = angle - 360 * values[i] / total / 2;
     }

с участием

     if (!i) {
       if (opts.startFromFixedAngle) {
         angle = opts.startFromFixedAngle;
       } else {
         angle = 90 - mangle;
       }
       mangle = angle - 360 * values[i] / total / 2;
     }

В моем случае я просто хотел, чтобы все круговые диаграммы начинались с отметки 90 градусов, поэтому я просто удалил «- mangle» из кода в первом блоке.

person Sean    schedule 09.10.2013
comment
Это не удастся, если вы (по какой-то причине) хотите начать свою круговую диаграмму со степенью 0. В конечном итоге я выбрал этот обходной путь, но добавил проверку ненулевого значения opts.startFromFixedAngle. - person mnoble01; 29.08.2014