Question

有没有办法在raphael的饼图中添加颜色？我需要能够显示例如黄色金色和灰色铂金色。我现在面临的问题是，如果铂具有更高的价值，例如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
        });
    }
});
});

Answer 1

只需添加matchColors : true

即可

opts.matchColors强制它匹配colors数组的顺序与values数组的顺序。我在这里看到了：

https://stackoverflow.com/a/14349559

Answer 2

为什么要为颜色添加前缀？如果库忽略了项目的顺序并自行排序，那么你应该传递已经排序的项目。

我添加了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>

raphael饼图颜色

2 个答案: