g.Raphael piechart сортирует данные диаграммы, а не цвета, URL-адреса

Рассмотреть возможность:

value1 = 5;
v1_color = #ff0000;

value2 = 4;
v2_color = #00ff00;

value3 = 3;
v3_color = #0000ff;

var r = Raphael("holder");
pie = r.piechart(320,320,250,{value1,value2,value3},{colors: [v1_color, v2_color,v3_color]});

Это создаст круговую диаграмму, в которой верхний фрагмент будет красным, нижний правый — зеленым, а последний — синим. Однако, если значения были изменены следующим образом:

value1 = 4;
value2 = 3;
value3 = 5;

диаграмма будет выглядеть точно так же, но цвета больше не будут представлять правильное значение. В исходном коде строки 99-101 показывают значения сортируются, но больше ничего.

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

В части кода, где он рисует срезы (строка 133), он ссылается на opts.matchColors, но я не могу найти никакой документации о том, как установить это при вызове функции.

Есть идеи, как этого добиться?


sorting pie-chart graphael
person whlteXbread    schedule 13.01.2013    source источник

Ответы (1)


arrow_upward
7
arrow_downward

К сожалению, opts.matchColors вообще не документирован, потому что это именно то, что вам нужно.

opts.matchColors заставляет его сопоставлять порядок массива цветов с порядком массива значений. Когда значения переупорядочены по размеру, цвета будут применены к клину с их исходными значениями.

matchColors по умолчанию имеет значение false, поэтому вам нужно будет явно установить его в массиве параметров следующим образом:

var pie = r.piechart(320, 320, // center
                     250,      // radius
                     [
                         value1,
                         value2,
                         value3
                     ],
                     {
                         colors       : [
                                            v1_color,
                                            v2_color,
                                            v3_color
                                        ],
                          matchColors : true
                     });
person sacohe    schedule 16.01.2013
comment
Да, это делает трюк! Очевидно задним числом. Спасибо за вашу помощь. :) - person whlteXbread; 17.01.2013
comment
Спасибо за ответ, но из любопытства, где вы нашли этот метод? Вы смотрели в их код или что-то в этом роде? - person tmaster; 15.02.2013
comment
@tmaster Ага! Я широко использовал g.raphael для проекта, поэтому я был хорошо знаком с кодом. Я понял, что делает строка, на которую ссылается ОП, а затем проверил свою теорию. Я хотел бы обновить документацию для подобных вещей, когда у меня будет возможность, поскольку, к сожалению, она больше не поддерживается слишком часто. - person sacohe; 16.02.2013
comment
@sacohe Круто, чувак. Просто интересно, вы расширили библиотеку? Я думаю, что g.raphael предоставляет только основные возможности построения графиков. - person tmaster; 16.02.2013
comment
Вот ответвление, которое позволяет передавать цвета непосредственно в структуру со значениями, чтобы использовать те же цвета за пределами g.Raphael. Мне нужно было использовать :hover, чтобы сделать пользовательский интерфейс очевидной связью между данными на странице и кусочками пирога. github.com/cr3473/zeus.cg.g.pie.raphael - person j03; 13.10.2014