2

ラファエルの円グラフに色を付ける方法はありますか? たとえば、金を黄色で、プラチナを灰色で表示できるようにする必要があります。私が現在抱えている問題は、たとえばプラチナが 60% でゴールドが 40% の場合、プラチナが黄色で表示されることです。 

var r = Raphael("pieChartHolder");
var pie = r.piechart(155, 100, 50, [30, 60, 5, 5], {
    colors: ['#FFDE7B', '#CFD0C6', '#E0DED9', '#93948C'],
    legend: ['%%gold', '%%silver', '%%palladium', '%%platinum'],
    legendpos: 'west'
});

pie.hover(function() {
    this.sector.stop();
    this.sector.scale(1.1, 1.1, this.cx, this.cy);

    if (this.label) {
        this.label[0].stop();
        this.label[0].attr({
            r: 7.5
        });
        this.label[1].attr({
            "font-weight": 800
        });
    }
}, function() {
    this.sector.animate({
        transform: 's1 1 ' + this.cx + ' ' + this.cy
    }, 500, "bounce");

    if (this.label) {
        this.label[0].animate({
            r: 5
        }, 500, "bounce");
        this.label[1].attr({
            "font-weight": 400
        });
    }
});
});
4

2 に答える 2

2

追加するだけmatchColors : true

opts.matchColors は、色配列の順序を値配列の順序と一致させるよう強制します。ここで見ました：

https://stackoverflow.com/a/14349559

于 2013-09-08T10:24:57.177 に答える
0

なぜ色をプレフィックスにしたいのですか？ライブラリが項目の順序を無視して並べ替える場合は、既に並べ替えられた項目を渡す必要があります。

underscore.jsライブラリを含め、項目を降順に並べ替えました。

<script type="text/javascript" src="http://underscorejs.org/underscore-min.js"></script>
<script type="text/javascript" src="raphael-min.js"></script>
<script type="text/javascript" src="g.raphael-min.js"></script>
<script type="text/javascript" src="g.pie-min.js"></script>
<script type="text/javascript">
function drawChart() {
    var r = Raphael("pieChartHolder");

    var items = [
        { value: 30, color: '#FFDE7B', title: '%%gold' },
        { value: 60, color: '#CFD0C6', title: '%%silver' },
        { value: 5, color: '#E0DED9', title: '%%palladium' },
        { value: 5, color: '#93948C', title: '%%platinum' }
    ];

    items = _.sortBy(items, function(item){ return -item.value; }); // sort by descending

    var pie = r.piechart(155, 100, 50, _.pluck(items, "value"), {
        colors: _.pluck(items, "color"),
        legend: _.pluck(items, "title"),
        legendpos: 'west'
    });

    pie.hover(function() {
        this.sector.stop();
        this.sector.scale(1.1, 1.1, this.cx, this.cy);

        if (this.label) {
            this.label[0].stop();
            this.label[0].attr({
                r: 7.5
            });
            this.label[1].attr({
                "font-weight": 800
            });
        }
    }, function() {
        this.sector.animate({
            transform: 's1 1 ' + this.cx + ' ' + this.cy
        }, 500, "bounce");

        if (this.label) {
            this.label[0].animate({
                r: 5
            }, 500, "bounce");
            this.label[1].attr({
                "font-weight": 400
            });
        }
    });
}

window.onload = drawChart;
</script>
<div id="pieChartHolder"></div>
于 2012-12-26T20:48:21.580 に答える