尝试创建交互式饼图和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项”)和描述设置样式。希望我只是盲目而且有一个简单的解决方案。如果需要更多信息,请询问。谢谢!