안녕하세요 그레이프시티입니다.
문의 주신 드릴 다운이 있는 원형 차트를 구현하는 방법에 대해 답변 드립니다.
데이터를 특정 기준별로 그룹화 한 후, FlexPie 컨트롤의 selectionChanged 이벤트를 사용해 드릴 다운이 있는 원형 차트를 구현할 수 있습니다.
아래의 샘플을 참고해 보시기 바랍니다.
샘플은 다음과 같은 방법으로 구현되었습니다.
- selectionMode 속성이 Point 속성 값으로 지정된 FlexPie 컨트롤과 헤더를 나타낼 h4 태그를 생성합니다.
- 이때, FlexPie 컨트롤에 바인딩된 데이터는 사용자 정의 함수 getGroupData 를 이용해 특정 기준별로 그룹화된 데이터입니다.
- FlexPie 컨트롤의 selectionChanged 이벤트에 다음과 같은 코드를 구현합니다.
-1. 조건문을 통해 FlexPie 컨트롤의 selectedIndex 속성 값이 null인지 확인합니다.
-2. null이 아니라면, FlexPie 컨트롤의 currentItem 속성의 그룹화된 데이터를 변수 groupdata 에 저장합니다.
-3. 새로운 데이터를 FlexPie 컨트롤에 바인딩 하는 사용자 정의 함수 showGroup 을 통해 groupdata 변수 값을 바인딩합니다. - 이때, 함수 showGroup 호출 시 이전 차트로 돌아가는 링크를 헤더에 표기하는 사용자 정의 함수 updateChartHeader 를 호출하도록 구현합니다.
- 초기 로드 시 FlexPie 컨트롤의 특정 원형 조각이 선택되는 것을 방지하기 위해 setTimeout 메서드를 이용하여 FlexPie 컨트롤의 selectedIndex 속성을 -1 로 지정합니다.
- 헤더에 표기된 이전 차트로 돌아가는 링크 클릭 시, 이전 차트로 돌아가는 click 이벤트를 구현합니다.
- FlexChart 그룹화 & 드릴다운 도움말 문서
- selectedIndex API 문서
- selectionChanged API 문서
- currentItem API 문서
API 문서를 공유드리며 다른 궁금한 점이 생기면, 문의 주시기 바랍니다.
감사합니다.
그레이프시티 드림