juijs / jui-chart

SVG-based JUI chart that can be used in the browser and Node.js. Support many types of charts. (Dashboard, Map, Topology, Full 3D, Realtime)
https://codepen.io/collection/nLydod/
57 stars 25 forks source link

showText : "outer" 사용 시 바깥으로 그려지는 선 크기 조절은 어떻게 하나요? #177

Open Bziaco opened 6 years ago

Bziaco commented 6 years ago

brush : { type : "donut", showText : "outer", activeEvent : "click", format : function(value, v) { return value; } } image

위 노란색으로 칠한 선입니다

seogi1004 commented 6 years ago

차트 빌더 옵션을 변경하시면 됩니다. style : { pieOuterLineRate : 1.5 }

seogi1004 commented 6 years ago

기본값은 1.3입니다.

Bziaco commented 6 years ago

아하 감사합니다!! 저 그런데 저 부분말고도 텍스트 크기라던지 라인 색깔 등도 바꾸려고 하는데 제가 잘못찾아서 그런가 api에서 찾기가 어렵네요 ㅠㅠ 이와 관련되서 어느부분 api를 참고하면 될까요??

seogi1004 commented 6 years ago

@Bziaco api 문서를 제대로 못쓴 다 제탓입니다. ㅠㅠ 가장 좋은건 브러쉬 코드를 보는게 좋습니다. 코드 하단에 .setup 메소드가 있는데, 거기에 정의된 값들이 옵션입니다.

만약에 옵션에도 없다면 http://chartplay.jui.io에서 테마 탭을 열어서 확인해보시면 있을겁니다!

Bziaco commented 6 years ago

아닙니다 ㅜ.ㅜ 만드신다고 정말 고생하셨을텐데 ㅠㅠ
답변도 너무 감사합니다!!

Bziaco commented 6 years ago

저 하나만 더 여쭤보겠습니다 ㅠㅠ

style : { backgroundColor : null, pieOuterLineRate : 1.5, pieOuterLineSize : 60, pieOuterFontSize : 13, pieOuterFontColors :["#BA5C1D","#BC7527","#F8E199","#EBC15C","#DC902B"], pieOuterLineColors :["#BA5C1D","#BC7527","#F8E199","#EBC15C","#DC902B"], pieOuterLineWidth : 2.0 }

위와 같이 brush value값을 구분마다 색깔을 다르게 주고 싶은데 위와 같이 하니 안되네요 ㅠㅠ 다른 방법이 있을까요? pieOuterFontColors 와 pieOuterLineColors 을 사용하니 안되네요..

easylogic commented 6 years ago

@Bziaco
style 은 고정 영역에 대한 지정이고 value 마다 색을 다르게 주는건 브러쉬의 colors 속성을 주셔야 합니다.

http://chartplay.jui.io/?p=brush_colors_callback

여기 참고하시면 됩니다.

colors 를 callback 형태로 지정할 수 있어요.

Bziaco commented 6 years ago

제가 질문을 좀 잘못 한 것같네요 ㅠㅠ 아래 그림과 같이 showText : "outer" 로 나타난 선과 텍스트 색깔을 브러쉬의 colors와 매칭되게 하려고 합니다

image

seogi1004 commented 6 years ago

왠지 저건 안될것 같은 불길한 예감이 드는데요? ㅋㅋ

seogi1004 commented 6 years ago

@Bziaco https://github.com/juijs/jui-chart/issues/178

커스터마이징 해야할 것 같아요. 테마 값으로 고정되어있어요. ㅠㅠ

Bziaco commented 6 years ago

아 그렇군요 ㅠㅠ 답변감사합니다!!

easylogic commented 6 years ago

저런 패턴이면 색상의 우선순위를 정해서 colors 만 받아들이면 될 수 있도록 포맷을 맞추면 되겠네요

easylogic commented 6 years ago

@seogi1004

connectedColor: true 옵션 하나 주면

colors 기준으로 색 쓰는 것으로

하나 만들어주시면 소원이 없겠습니다.

seogi1004 commented 6 years ago

흑흑 별거 아니니 한번 만들어보겠습니다. ㅠ