7

raphael.js を使用して Web サイトに画像/グラフを描画していますが、円グラフにグラデーション効果を実装するのに問題があります。

私はそれをそのように呼びます：

<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 に答える