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"]}或{gradients:["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
  });

我认为这只是找到你需要应用渐变的元素并更改fill属性,如上所示.

这是关于attr函数的文档:http: //raphaeljs.com/reference.html#attr

我能够通过调用导航线图对象层次结构

console.log(linechart);

然后查看谷歌浏览器中的javascript控制台.(我相信这也适用于Firefox/Firebug).