更改Raphael“标签”的背景颜色

时间:2012-10-10 00:10:23

标签: javascript raphael graphael

如果我使用Raphael创建Label,则默认样式为带有白色文本的黑色块。

如何更改背景框颜色,而不是文本颜色?我试过了:

paper.label(x, y, value).attr("fill", colour)

但这也填写了文本,最后我看到了隐形文字。

我也不能简单地更改this function中的默认颜色,因为根据添加到的行,我需要有几个不同的颜色:

enter image description here

3 个答案:

答案 0 :(得分:6)

正如你所注意到的,

Paper.label(x, y, value).attr(
    fill : color
);

更改背景填充颜色和文本填充颜色,从而产生不可见的文本。

未指定正确解释这是一个数组,因此每个部分必须单独更改,如图所示。但是,他们没有提到更改更新两组属性的最简单方法,所以我想分享这个提示。为此,请将属性更改为包含两个集的数组。第一个元素是背景,第二个是文本。

Paper.label(x, y, value).attr([{
    fill : backgroundColor
}, {
    fill : textColor
}]);

您可以为每个部分添加任何其他适用的属性。这是一个工作示例:http://jsfiddle.net/VzpeG/1/

答案 1 :(得分:0)

我正在处理与此类似的图表并使用:

  

.attr({fill:“#EF7C4D”})

让我知道这是怎么回事......

答案 2 :(得分:0)

var r = Raphael('divID', 320, 220);
text = r.text(100,100,"Hello").attr({fill:"#fff"});​​​​
text.label().attr({fill:"#f00"});

这是一个工作小提琴http://jsfiddle.net/vpGyL/216/

在文本或标签上设置任何颜色都单独应用...希望这有帮助!

深入挖掘...... Paper.label(x,y,text)Element.label()

不同

如果你看一下源代码Paper.Label(x,y,text)是一组矩形元素&文本元素,所以做.attr({fill:"SomeColor"})适用于整个集合,因此矩形和&文本共享相同的颜色(因此隐身)。

哦是的如果你只想更改文字颜色,请执行此操作Raphael.g.txtattr.fill = "#yourColorCode"但这会在所有图表和工具提示上全局更改文字颜色(似乎不是一个好主意)。

虽然文档中提到的Element.Label采用了上下文元素&嵌入标签工具提示,基本上是您使用的element,应用.label会将其嵌入矩形