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

Question

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

如何更改背景框颜色，而不是文本颜色？ 我试过了：

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

但这也填补了文本，我最终得到了隐形文本。

我也不能简单地改变这个函数的默认颜色，因为我需要有几个不同的颜色，具体取决于它添加到的一行：

在此输入图像描述

Answer 1

你注意到了，

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

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

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

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

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

Answer 2

我正在研究类似于此的图表并使用：

.attr（{fill：“＃EF7C4D”}）

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

Answer 3

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) ... Paper.label(x,y,text)与Element.label()不同

如果查看源代码Paper.Label(x,y,text)是一组矩形元素和文本元素，那么.attr({fill:"SomeColor"})适用于整个集合，因此矩形和文本共享相同的颜色（因此不可见）。

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

虽然文件中的Element.Label表示采用上下文元素并嵌入标签工具提示，但基本上你使用的element ，应用.label会将其嵌入矩形内