在raphaelJS饼图中添加文字?

时间:2014-03-11 22:43:23

标签: javascript css raphael

尝试创建交互式饼图和raphaelJS似乎是最好的解决方案。我几乎没有经验,(虽然我对jquery相当熟练)所以请原谅我是不是完全白痴。

问题:我创建了一个功能交互式饼图,在悬停时显示文本。我的问题是我无法弄清楚如何根据需要设置文本样式 - 添加和

标签到html没有效果

这是脚本 - 我将尝试仅包含相关部分:

var angle = -18,
    total = 0,
    start = 0,
    process = function (j) {
        var value = values[j],
            angleplus = 360 * value / total,
            popangle = angle + (angleplus / 2), // angle of text display
            color = Raphael.hsb(start, .9, 1),
            ms = 300,
            delta = 30,
            bcolor = Raphael.hsb(start, 1, 1),
            p = sector(cx, cy, r, angle, angle + angleplus, {
                fill: "90-" + bcolor + "-" + color,
                stroke: "#F3F5F2",
                "stroke-width": 4,
                "stroke-opacity": 1,
                opacity: .5}),
            txt = paper.text(cx + (r + delta + 155) * Math.cos(0 * rad),
                cy + (r + delta + 75) * Math.sin(-10 * rad),
                labels[j]).attr({
                    fill: "#111",
                    stroke: "none",
                    opacity: 0,
                    "font-family": "Gotham",
                    "font-size": 14});
    });

这是jsfiddle与脚本的其余部分和html(但不能使它正常运行,通常正常工作) - http://jsfiddle.net/9L286/

目前,“txt”定义了文本的样式 - 我希望能够为标题(“第1项”)和描述设置样式。希望我只是盲目而且有一个简单的解决方案。如果需要更多信息,请询问。谢谢!

0 个答案:

没有答案