g.raphael.js эффект градиента на круговой диаграмме

Question

Я пользователь raphael.js, чтобы нарисовать мои изображения/графики на моем веб-сайте, и у меня возникли проблемы с реализацией эффекта градиента на моей круговой диаграмме.

Я называю это таким образом:

<script type="text/javascript" charset="utf-8"> 
       window.onload = function() { 
        var r = Raphael("holder"); 
        var pie = r.g.piechart(250, 240, 180, <?php echo $vals; ?>,{colors: ["#fff", "#cc3333", "#f200fd"]}); 
       }; 
      </script> 

Я прочитал на документации, градиенты эффекты возможны, как это показано в некоторых примерах.

Я попытался: {цвета: ["r # fff- # ccc", "r # fff- # ccc", "r # fff- # ccc"]} или {gradients: ["r # fff- # ccc "," r # fff- # ccc "," r # fff- # ccc "}, но напрасно.

Кто-нибудь пробовал?

Thx много!

Answer 1

Это, как я решил его формы под Linechart:

var linechart = r.g.linechart(10,10,300,220,[1,2,3,4,5],[10,20,15,35,30], {"colors":["#444"], "symbol":"s", axis:"0 0 1 1"}); 

    linechart.shades[0].attr({ 
     "fill": "90-#fff:20-#000", 
     "fill-opacity": 0.1 
    }); 

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

Вот документация на функции атр: http://raphaeljs.com/reference.html#attr

, и я был в состоянии перемещаться по иерархии объектов Linechart по телефону

console.log(linechart); 

, а затем, глядя на консоли JavaScript в Google Chrome. (Я уверен, что это также будет работать в Firefox/Firebug).

Answer 2

r.g.colors = ["# ff0000", "# 00ff00", "# 0000ff"];

Это работает.

Answer 3

как сказал Рав, вы должны действительно проверить документы, вся необходимая информация, чтобы создать градиент есть (http://raphaeljs.com/reference.html#attr), обратите внимание на заполнить части.

В любом случае, короткий ответ:

"90-#7BCC55-#A7FB73" 

И более конкретно в вашем случае, для круговой диаграммы поставить эту строку перед созданием диаграммы:

r.g.colors = ["90-#7BCC55-#A7FB73", "45-#0B73D2-#0E99FA", "0-#E37201-#FC9B03"]; 

Помните, что вам нужно добавить такое же количество цветов, как и фрагменты в вашей диаграмме, будут.