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 回答