添加填充到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属性都适用于此解决方案。我不确定为什么，如果有人对此有一些评论，将不胜感激。

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

希望它有所帮助！