7

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

有人试过吗？

多谢！

4

3 回答 3

7

这就是我解决折线图下方形状的方法：

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

于 2011-05-26T13:22:05.927 回答
3

正如 Rav 所说，你真的应该检查文档，创建渐变的所有必要信息都在那里（http://raphaeljs.com/reference.html#attr），寻找填充部分。

无论如何，简短的回答是：

"90-#7BCC55-#A7FB73"

在您的情况下更具体，对于饼图，在创建图表之前放置这条线：

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

请记住，您需要添加与图表中的切片相同数量的颜色。

于 2011-07-07T01:49:43.167 回答
0

rgcolors = ["#ff0000", "#00ff00", "#0000ff"];

有用。

于 2011-03-17T13:13:44.700 回答