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

然后查看Google Chrome中的javascript控制台。（我确信这也适用于Firefox / Firebug）。

Answer 2

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

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

"90-#7BCC55-#A7FB73"

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

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

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

Answer 3

r.g.colors = [“＃ff0000”，“＃00ff00”，“＃0000ff”];

有效。

g.raphael.js饼图上的渐变效果

3 个答案: