эффект градиента 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>

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

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

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

Большое спасибо!

Answer 1

Вот как я решил это для фигуры под линейной диаграммой:

  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
  });

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

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

, и я смог перемещаться по иерархии объектов линейной диаграммы, вызвав

console.log(linechart);

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

Answer 2

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

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

"90-#7BCC55-#A7FB73"

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

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

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

Answer 3

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

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