javascript - 为什么我在 Raphael.js 饼图演示中看不到颜色？

Question

我在 http://jsfiddle.net/s6dEW/ 复制了 Raphael 饼图演示:

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, .75, 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": 3
                }),
                txt = paper.text(cx + (r + delta + 55) * Math.cos(-popangle * rad), cy + (r + delta + 25) * Math.sin(-popangle * rad), labels[j]).attr({
                    fill: bcolor,
                    stroke: "none",
                    opacity: 0,
                    "font-size": 20
                });
            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 = [],
        json = [{
            "units": "",
            "total": "1682.59",
            "lbs": "82500.00",
            "material": "stainless steel"
        }, {
            "units": "345",
            "total": "18076.19",
            "lbs": "49110.50",
            "material": "aluminum"
        }, {
            "units": "480",
            "total": "6793.75",
            "lbs": "6950.00",
            "material": "cardboard cores"
        }, {
            "units": "",
            "total": "353.44",
            "lbs": "3482.50",
            "material": "scrap metal"
        }]
    for (i = 0; i < json.length; i++) {
        labels.push(json[i].material);
        values.push(parseFloat(json[i].lbs));
    }
    Raphael("holder", 700, 700).pieChart(350, 350, 200, values, labels, "#fff");
});

但是，当我将相同的代码放在我的网站 (http://www.completerecycling.com/test) 上时，我在 Chrome 中得到的不是彩色饼图切片，而是黑色饼图，而在 Firefox 中是透明饼图。我有什么不同的做法会破坏配色方案？

Answer 1

这是因为 <base>在您的网站上标记。

Raphaël 使用 id 来引用填充颜色(每个彩色饼图的 fill="url(#…)" 属性)。

这些引用不适用于 http://www.completerecycling.com/test因为他们决定 http://www.completerecycling.com/test/ (基本 href)加上 #…用于颜色定义(而不是 http://www.completerecycling.com/test#… )。

将您的基本 href 更改为 http://www.completerecycling.com/test没有尾部斜杠，删除 base完全标记或重定向 http://www.completerecycling.com/test至 http://www.completerecycling.com/test/ (效果很好)。