3

Raphaelを使用して作成する場合Label、デフォルトのスタイルは白いテキストの黒いブロックです。

背景ボックスの色を変更できますが、テキストの色は変更できませんか？私はもう試した：

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

しかし、それもテキストを埋めてしまい、私は目に見えないテキストになってしまいます。

また、追加する行に応じていくつかの異なる色を使用する必要があるため、この関数のデフォルトの色を単純に変更することはできません。

ここに画像の説明を入力してください

4

3 に答える 3

6

お気づきのように、

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

背景の塗りつぶしの色とテキストの塗りつぶしの色の両方を変更して、テキストを非表示にします。

不特定は、これが配列であることを正しく説明しているため、図のように、各部分を個別に変更する必要があります。ただし、両方の属性セットを更新する最も簡単な方法については言及されていなかったため、このヒントを共有したいと思います。これを行うには、属性を2つのセットを持つ配列に変更します。最初の要素は背景で、2番目の要素はテキストです。

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

他の適用可能な属性を各パーツに追加できます。これが実際の例です：http：//jsfiddle.net/VzpeG/1/

于 2012-10-19T02:12:22.180 に答える
0

私はこれに似たグラフに取り組んでいて、使用しました：

.attr（{fill： "＃EF7C4D"}）

これがどうなるか教えてください...

于 2012-10-10T00:18:53.203 に答える
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すると長方形の中に埋め込まれます

于 2012-10-10T06:00:39.963 に答える