작성일 2023-04-26 11:23 조회 788회
댓글 0건
데이터 참고
- https://wijmo-js-demo.web.app/03-Chart/06-PieSunburstCharts/02-DonutChartwithLabels
위 사진과 같이 brand 데이터와 sales 데이터가 legend에 동시 출력을 희망합니다.
범례를 수정하는 기능 알려주시면 감사하겠습니다.
등록된 댓글이 없습니다.
2 답변
작성일 2023-04-28 08:27 댓글 1건
안녕하세요 그레이프시티입니다.
문의하신 내용의 경우, 차트 렌더링이 끝난 후 발생하는 rendered 이벤트 내에서 범례 요소를 설정하여 구현할 수 있습니다. 다만 범례의 svg 요소가 해당 영역 내에서 이미 렌더링되었기 때문에 범례의 텍스트가 올바르게 표시되지 않을 수 있으며 이를 해결하기 위해 추가적인 작업이 필요합니다.
IRenderEngine을 사용하여 rect 및 text 요소를 수동적으로 생성하거나 rect 및 text 요소를 범례 영역 밖으로 이동시켜 해당 요소가 범례 svg 요소 위로 렌더링되게끔 설정하는 방법이 있습니다.
관련하여 아래 샘플을 공유드리오니 참고 부탁드립니다.
API 문서를 공유드리오니 다른 궁금한 점이 생기면 문의 주시기 바랍니다.
감사합니다.
그레이프시티 드림
작성일
감사합니다. 약간의 하드코딩이 가미되었지만 우선 해결되었습니다.
기존에는 flexPie가 있는 창의 너비를 줄였을 때 동적으로 그래프 크기가 맞춰졌는데
이 경우 기존 정해진 svg 위치에 legend를 덧붙이는 형식으로 원그래프가 줄어들지 않고 legend랑 겹치는 현상이 생깁니다.
기존 legend width 가 84px
이후 legend width 가 (100% 표출 기준) 130px 일때
렌더링 전에 (기존 legend width 산정방식에서 50px만 더 들어가게 끔 설정만 해준다면) or (기존 legend 값에 ' 100.0%'을 넣어주고 새로 만드는 svg에는 정상적인 수치가 들어 갈 수 있도록) 한다면 해결해줄 수 있을 것 같은데
legend width를 조작할 수 있는 방법이 있는지 여쭤보고 싶습니다.
감사합니다.
작성일 2023-05-03 10:53 댓글 0건
안녕하세요 그레이프시티입니다.
문의주신 내용의 경우, 직접적으로 legend의 너비를 조절하는 것보다 FlexChart의 plotMargin 속성을 사용하여 그래프 요소와 범례가 중복되지 않도록 플롯 영역의 오른쪽에 여백을 제공하여 구현할 수 있습니다. 아래 코드를 참고하여 주시기 바랍니다.
donut.plotMargin = 'null 90 null null';
등록된 댓글이 없습니다.
