2011-01-31 76 views
7

我用戶raphael.js在我的網站上繪製我的圖片/圖形,並且在我的餅圖上實現漸變效果時遇到問題。g.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> 

我是梯度效應是可能的,就像是在一些例子中的文檔上閱讀。

我試過了:{顏色:[「r#fff-#ccc」,「r#fff-#ccc」,「r#fff-#ccc」]}或{gradients:[「r#fff-# ccc「,」r#fff-#ccc「,」r#fff-#ccc「}但徒勞無功..

有人試過嗎?

Thx很多!

回答

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

,然後看着谷歌瀏覽器的JavaScript控制檯導航線型圖對象層次。 (我相信這也可以在Firefox/Firebug中運行)。

+0

太棒了!非常感謝。我很堅持這一個:) – guillaumepotier 2011-05-27 15:32:32

0

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

它的工作原理。

+1

對不起,它只適用於普通的顏色。我確定。這是我無法設置的漸變色:s – guillaumepotier 2011-03-17 22:41:49

3

作爲Rav說,你應該真的檢查文檔,所有必要的信息來創建一個漸變是存在的(http://raphaeljs.com/reference.html#attr),尋找填充部分。

不管怎麼說,簡單的答案是:

"90-#7BCC55-#A7FB73" 

對你來說更具體,餅形圖,就把這行創建圖表前:

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

記住,你需要添加與圖表中的切片顏色數量相同。