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"]}または{grads：["r＃fff- ccc "、" r＃fff-＃ccc "、" r＃fff-＃ccc "}ですが、無駄です。

誰でも試してみましたか？

Thx a lot！

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

私はそれはあなたのためにグラデーションを適用し、上記のように塗りつぶし属性を変更する必要がある要素を見つけるだけの問題だと思います。

はここでattrの機能上のドキュメントです： http://raphaeljs.com/reference.html#attr

と私は

console.log(linechart); 

を呼び出すし、Google ChromeのJavaScriptコンソールを見て、折れ線グラフオブジェクト階層をナビゲートすることができました。 （これはFirefox/Firebugでもうまくいくはずです）。

Answer 2

r.g.colors = ["＃ff0000"、 "＃00ff00"、 "＃0000ff"];

これは機能します。

Answer 3

Ravが言ったように、あなたは実際にドキュメントをチェックし、グラデーションを作成するのに必要なすべての情報がそこにあることを確認してください。の部分を探してください。

とにかく、短い答えは：

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

追加する必要があることに注意してください：

"90-#7BCC55-#A7FB73" 

そして、あなたのケースでは、より具体的な、円グラフのグラフを作成する前にこのラインを置きますあなたのチャートのスライスと同じ量の色が存在するでしょう。