javascript - g.raphael.js 对饼图的渐变效果

我使用 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"} 但徒劳无功..

有人试过吗？

多谢!

最佳答案

这就是我为折线图下方的形状解决它的方法:

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

然后查看 Google Chrome 中的 javascript 控制台。 (我确定这也适用于 Firefox/Firebug)。