javascript - 向 gRaphael 图表添加填充？

Question

尽管在线可用的文档很少，但我已经能够弄清楚如何使用Raphael.js和gRaphael插件生成下图。我对如何设置悬停在每个数据点上出现的标签的样式感到非常困惑。如何在文本周围添加一些填充？

这是它现在的样子：

编码：

var r = Raphael("graphcontainer");
var linec = r.linechart(10,10,300,220,[1,2,3,4,5],[10,20,15,35,30], {colors:["#009933"], symbol:"circle", smooth: false}); 

linec.hoverColumn(function () {
    this.tags = r.set();
    for (var i = 0, ii = this.y.length; i < ii; i++) {          
        this.tags.push(r.tag(this.x + 10, this.y[i], this.values[i]+"tkr", 0, 0).insertBefore(this).attr([{ fill: "#fff" }, { fill: this.symbols[i].attr("fill") }]));
    }
}, function () {
    this.tags && this.tags.remove();
}); 

Answer 1

我对轴有类似的问题。

您可能需要获取 Raphael 对象并将其转换为 jQuery 对象，然后通过 jQuery 设置样式。

像这样的东西：

for (var i = 0, ii = this.y.length; i < ii; i++) {          
   this.tags.push(r.tag(this.x + 10, this.y[i], this.values[i]+"tkr", 0, 0).insertBefore(this).attr([{ fill: "#fff" }, { fill: this.symbols[i].attr("fill") }]));
   var $jQueryObject = $(this.tags.node);
   $jQueryObject.css('font-size', '30px')
}

请注意，并非所有 CSS 属性都适用于此解决方案。我不知道为什么，如果有人对此有一些评论，将不胜感激。

可能需要进行一些调整。让我们知道您的经验；）

希望能帮助到你！