拉斐尔演示饼图调整添加自定义颜色

raphael demo pie chart tweak to add custom colors

本文关键字:调整 添加 自定义 颜色      更新时间:2023-09-26

如何添加自定义颜色到这个拉斐尔饼图。http://raphaeljs.com/pie.html它从HTML表中获取值并将它们插入到饼状图中。现在它使用以下内容来填充扇区。我认为它使用了一个随机器来选择十六进制颜色。我不确定。

bcolor = Raphael.hsb(start, 1, 1),
            p = sector(cx, cy, r, angle, angle + angleplus, {fill: "90-" + bcolor + "-" + color, stroke: stroke, "stroke-width": 2}),

我希望能够在一个数组设置十六进制的颜色。不应超过6个值。这里是完整的代码。我也想设置自定义梯度,但现在不是必要的。

Raphael.fn.pieChart = function (cx, cy, r, values, labels, stroke) {
    var paper = this,
        rad = Math.PI / 180,
        chart = this.set();
    function sector(cx, cy, r, startAngle, endAngle, params) {
        var x1 = cx + r * Math.cos(-startAngle * rad),
            x2 = cx + r * Math.cos(-endAngle * rad),
            y1 = cy + r * Math.sin(-startAngle * rad),
            y2 = cy + r * Math.sin(-endAngle * rad);
        return paper.path(["M", cx, cy, "L", x1, y1, "A", r, r, 0, +(endAngle - startAngle > 180), 0, x2, y2, "z"]).attr(params);
    }
    var angle = 0,
        total = 0,
        start = 0,
        process = function (j) {
            var value = values[j],
                angleplus = 360 * value / total,
                popangle = angle + (angleplus / 2),
                color = Raphael.hsb(start, .90, 1),
                ms = 500,
                delta = 30,
                bcolor = Raphael.hsb(start, 1, 1),
                p = sector(cx, cy, r, angle, angle + angleplus, {fill: "90-" + bcolor + "-" + color, stroke: stroke, "stroke-width": 2}),
                txt = paper.text(cx + (r + delta + 2) * Math.cos(-popangle * rad), cy + (r + delta + 5) * Math.sin(-popangle * rad), labels[j]).attr({fill: "#999999", stroke: "none", opacity: 1, "font-size": 13});
            p.mouseover(function () {
                p.stop().animate({transform: "s1.1 1.1 " + cx + " " + cy}, ms, "elastic");
                //txt.stop().animate({opacity: 1}, ms, "elastic");
            }).mouseout(function () {
                p.stop().animate({transform: ""}, ms, "elastic");
                //txt.stop().animate({opacity: 0}, ms);
            });
            angle += angleplus;
            chart.push(p);
            chart.push(txt);
            start += .1;
        };
    for (var i = 0, ii = values.length; i < ii; i++) {
        total += values[i];
    }
    for (i = 0; i < ii; i++) {
        process(i);
    }
    return chart;
};
$(function () {
    var values = [],
        labels = [];
    $("tr").each(function () {
        values.push(parseInt($("td", this).text(), 10));
        labels.push($("th", this).text());
    });
    $("table").hide();
    Raphael("holder-new", 400, 400).pieChart(100, 100, 50, values, labels, "#fff");
});
bcolor = Raphael.hsb(hue,saturation,value) 

取start的值为hue。所以它从0开始,每个扇区增加1。没有什么是随机的。要做你需要的,只需创建你的数组。

var colors = ['red','green','blue','yellow','#ffaa00','#00ffaa','#aa00ff'];

设置数组的颜色(模数将j的值保持在颜色数组的长度范围内)

bcolor = colors[j%colors.length]

并在你的段

中使用它
p = sector(cx, cy, r, angle, angle + angleplus, 
    {fill: "90-" + bcolor + "-" + bcolor, stroke: stroke, "stroke-width": 1})

我编辑的原始代码使用了两种颜色(color和bcolor),而我在这里只有bcolor。如果你想要渐变,添加其他颜色。

这是一个显示结果的提琴