gRaphael 원형 차트의 전설 양식은 어떤 방식으로 작성됩니까?

Question

기능적인 파이 차트가 있습니다. 관련 파이 세그먼트 위로 마우스를 가져 가면 스타일을 향상시키고 싶습니다. 공식 문서, 온라인 검색 및 출처는 범례 항목에 영향을 줄 수있는 방법에 대한 단서를 제공하지 않았습니다. 누구든지이 작업을 수행하는 방법에 대한 예가 있습니까?

현재 파이 차트에는 8 개의 세그먼트가 있습니다. 도움이된다면, 파이 세그먼트 하나와 그와 관련된 범례 엔트리 예제가있는 소스가 있습니다 :

<rvml:shape class="rvml" style="position: absolute; filter: ; width: 1px; height 1px; top: 0px; left: 0px;" raphael="true" raphaelid="0"> 
    <rvml:stroke class="rvml" /> 
    <rvml:skew class="rvml" /> 
    <rvml:fill class="rvml" /> 

<!-- raphaelid="1" through "7" have the same attributes and subelements --> 

<rvml:shape class="rvml" style="position: absolute; filter: ; width: 1px; height 1px; top: 0px; left: 0px;" raphael="true" raphaelid="8"> 
    <!-- same subelements as first --> 

<!-- raphaelid="9" through "15" have the same attributes and subelements --> 

<!-- Colored bullet just before legend entry --> 
<rvml:shape class="rvml" style="position: absolute; filter: ; width: 1px; height 1px; top: 0px; left: 0px;" raphael="true" raphaelid="16"> 
    <!-- same subelements as first --> 

<!-- Legend entry --> 
<rvml:shape class="rvml" style="position: absolute; filter: ; width: 1px; height 1px; top: 0px; left: 0px;" raphael="true" raphaelid="17"> 
    <rvml:stroke class="rvml" /> 
    <rvml:textpath class="rvml" style="font: 400 12px Arial, sans-serif; v-text-align: left; v-text-kern: true;" /> 
    <rvml:path class="rvml" /> 
    <rvml:skew class="rvml" /> 
    <rvml:fill class="rvml" /> 

Answer 1

차트 설정에서 관련 코드 블록을 발견했습니다. 문제는 분명히 약간 다른 용어를 사용하는 SVG 스타일로 작업해야한다는 것입니다. 나는 거기에서 더 많은 경험을했기 때문에 나는 CSS를 선호한다.

pie.hover(function() { 
    this.sector.stop(); 
    this.sector.scale(1.1, 1.1, this.cx, this.cy); 
    if (this.label) { 
     this.label[0].stop(); 
     this.label[0].attr({ oChart: 7.5 }); 
     this.label[1].attr({ "font-weight": 800 }); 
    } 
}, function() { 
    this.sector.animate({ transform: 's1 1 ' + this.cx + ' ' + this.cy }, 500, "bounce"); 
    if (this.label) { 
     this.label[0].animate({ oChart: 5 }, 500, "bounce"); 
     this.label[1].attr({ "font-weight": 400 }); 
    } 
}); 

그것은 나를 두 이와 this.label [1] 라인을 변경하기 위해이었다했습니다 무엇 :

this.label[1].attr({ fill: "#ff0000" }); // line 7 

및

this.label[1].attr({ fill: "#ffffff" }); // line 13 

이 변경 원인을 여기에 원래의 블록입니다 활자체가 변경되지 않습니다 (위에서 제공된 원래 설정에서 원하지 않는 항목). 그러나 사용자가 관련 원형 차트 세그먼트를 가리키면 글꼴 색을 변경할 수 있습니다. 내가 읽은 바로는 CSS로 라파엘 (Raphael)을 스타일링하는 방법이 있지만, 지금 당장 들어가기위한 경험이나 시간이 없다.

경험이있는 사람이 CSS를 사용하여 스타일을 지정하는 방법에 대해 설명하는 좋은 자료를 제공 할 수 있다면 나중에 다시 사용하는 도구가 될 수 있기 때문에 분명히 감사 할 것입니다.