g.raphael.js efecto de degradado en el gráfico circular

Question

Utilizo raphael.js para dibujar mis imágenes/gráficos en mi sitio web, y tengo problemas para implementar un efecto de degradado en mi gráfico circular.

Me llaman de esa manera:

<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> 

que he leído en la documentación que los gradientes son posibles efectos, como se muestra en algunos ejemplos.

Intenté: {colores: ["r # fff- # ccc", "r # fff- # ccc", "r # fff- # ccc"]} o {gradientes: ["r # fff- # ccc "," r # fff- # ccc "," r # fff- # ccc "} pero en vano ...

¿Alguien lo ha probado?

¡Muchas gracias!

Answer 1

Esto es cómo lo resolví de la forma debajo 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 
    }); 

Creo que es sólo una cuestión de encontrar el elemento que es necesario aplicar el gradiente de y cambiar el atributo de relleno como se muestra arriba.

Aquí hay documentación sobre la función attr: http://raphaeljs.com/reference.html#attr

y yo era capaz de navegar por la jerarquía de objetos LineChart llamando

console.log(linechart); 

y luego mirar a la consola JavaScript en Google Chrome. (Estoy seguro de que esto también funcionará en Firefox/Firebug).

Answer 2

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

Funciona.

Answer 3

como dijo Rav, realmente deberías consultar los documentos, toda la información necesaria para crear un degradado está allí (http://raphaeljs.com/reference.html#attr), busca la parte de relleno.

De todas formas, la respuesta corta es:

"90-#7BCC55-#A7FB73" 

y más específica en su caso, por un gráfico circular puso esta línea antes de crear el gráfico:

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

Recuerde que es necesario agregar la misma cantidad de colores que las rebanadas en su tabla que va a haber.