2012-10-10 2 views
3

Raphael을 사용하여 Label을 만들면 기본 스타일은 흰색 텍스트가있는 검은 색 블록입니다.Raphael "Label"의 배경색 변경

배경색은 변경할 수 있지만 텍스트 색은 어떻게 바꿀 수 있습니까? 나는 시도했다 :

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

하지만 그 또한 텍스트를 채우고 난 보이지 않는 텍스트와 끝까지. 나는 유사한 그래프 작업을했다

enter image description here

답변

6

당신이 발견으로 내부를 포함합니다 .label을 적용, 기본적으로, 상황에 맞는 요소를 사용 어떤 element 라벨 툴팁 & 삽입됩니다

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

은 배경 채우기 색상과 텍스트 채우기 색상을 모두 변경하여 보이지 않는 텍스트를 만듭니다.

설명되지 않은 것은 이것이 배열임을 정확하게 설명하지 않았으므로 각 부분을 그림과 같이 별도로 변경해야합니다. 그러나 두 속성 세트를 변경하는 가장 쉬운 방법은 언급하지 않았으므로이 팁을 공유하고자했습니다. 이렇게하려면 속성을 두 세트가있는 배열로 변경하십시오. 첫 번째 요소는 배경이고 두 번째 요소는 텍스트입니다.

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

각 부분에 다른 적용 가능한 속성을 추가 할 수 있습니다.여기에 실제 예가 나와 있습니다. http://jsfiddle.net/VzpeG/1/

+0

고마워, 나는이 질문에 더 정확하게 대답한다고 생각한다. – Marty

0

: 나는에 추가되는 라인에 따라 몇 가지 다른 사람이 필요하기 때문에

또한 단순히 this function의 기본 색상을 변경할 수 없습니다 이과 사용 :

.attr ({입력 : "#의 EF7C4D를"})

은 알려주세요 다음은 작업 바이올린에게 얼마나이 간다 ...

+1

감사합니다. Rob, 나는 이것을 시도했지만 텍스트도 채웠다 고 언급했지만. 다른 아이디어? – Marty

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/

모두 적용 별도로 ... 희망이 도움이 텍스트 또는 라벨의 색상을 설정합니다! 당신이 그렇게 .attr({fill:"SomeColor"}) 전체 집합에 적용하고, 사각형 요소 & 텍스트 요소의 집합입니다 소스 코드 Paper.Label(x,y,text) 보면 더 furthur에 파고

... Paper.label(x,y,text)는, 따라서 두 사각형 & Element.label()

다른 텍스트는 같은 색을 공유합니다 (따라서 보이지 않습니다).

아 그래 그래, 텍스트 색을 바꾸고 싶다면 Raphael.g.txtattr.fill = "#yourColorCode" 그러나 이것은 모든 차트와 툴팁에서 글자 색을 전체적으로 바꾼다. 문서가 말한대로 Element.Label 동안

는 사각형