2

Raphael JS Pie Chartをカスタマイズするのが楽しみです...

ここにコードがあります http://jsfiddle.net/kcQbe/

その中に4つのカテゴリを設定しました...

まず第一に、JavaScript で個別に定義されたすべてのカテゴリの色の塗りつぶしまたはパスの色を変更したいです。たとえば、data = [90, 90, 90, 90]ここで呼び出される配列にカテゴリがループしているように、90 は、私が望むようなカテゴリの角度を定義している度です。色も個別に定義し、それに似ている必要があります...このようfill = ["#000","#ccc","#ddd","#eee"] になる可能性があります。その考えは間違っている可能性があります...

また、クリックすると色が変わるので、クリックする前と同じ色のままにしておきたい...

誰でもそれを助けることができますか？

4

3 に答える 3

3

ジェフとアレックスによる他の回答を見て、実際の例を作成しました-デモ

これはあなたの望ましい出力だと思います

于 2012-07-24T12:14:30.187 に答える
2

Jeffの回答を更新するだけです：

色:

色参照を関数に渡します:r.customAttributes.segment = function (x, y, r, a1, a2, color) {...

データの後にカラー配列変数を追加します。var data = [90, 90, 90, 90], color = ['#ff0000', '#00ff00', '#0000ff', '#ff0000'], ...

最後のループで:

            start = 0;
            for (i = 0; i < ii; i++) {
                var val = 360 / total * data[i];
                var col = color[i]; //Add color from array
                (function (i, val) {
                    //Here we pass the color (col)
                    paths.push(r.path().attr({segment: [200, 200, 1, start, start + val, col], stroke: "#fff"}).click(function () {
            ...

編集：

an then ( Matt Ballのvar props {パートに感謝)

r.customAttributes.segment = function (x, y, r, a1, a2, color) {... を次のように変更します。

                var flag = (a2 - a1) > 180;
                a1 = (a1 % 360) * Math.PI / 180;
                a2 = (a2 % 360) * Math.PI / 180;
                var props = {
                    path: [["M", x, y], ["l", r * Math.cos(a1), r * Math.sin(a1)], ["A", r, r, 0, +flag, 1, x + r * Math.cos(a2), y + r * Math.sin(a2)], ["z"]]
                };

                if (color) {
                    props.fill = color;
                }
                return props;
于 2012-07-19T07:38:27.950 に答える
2

JavaScript についてよく知らない場合は、おそらく Raphael JS を使用するべきではありません。

塗りつぶしの色を変更するには、次の行を変更する必要があります。

fill: "hsb(" + clr + ", .75, .8)"

それを、必要な色を伝える関数に変えます。現在、clr は次の式で与えられる単純な関数です。

    clr = (a2 - a1) / 360;
    a1 = (a1 % 360) * Math.PI / 180;
    a2 = (a2 % 360) * Math.PI / 180;

アニメーションを削除するには、「animate();」という行を削除します。(以下のデータ[i] *= 2)

于 2012-06-16T18:06:18.217 に答える