! 제품 버전을 정확하게 입력해 주세요.
제품 버전이 정확하게 기재되어 있지 않은 경우,
최신 버전을 기준으로 안내 드리므로
더욱 빠르고 명확한 안내를 위해
제품 버전을 정확하게 입력해 주세요!

파이차트 드릴다운 문의 > Q&A | 토론

본문 바로가기

PureJS 파이차트 드릴다운 문의

페이지 정보

작성자 Nexus 작성일 2022-09-20 16:18 조회 1,095회 댓글 0건
제품 버전 : 2022V1
컨트롤 이름 : Chart

본문

안녕하세요


원형차트 드릴다운을 만들어보는중인데 

튜토리얼에는 세로막대형 차트의 드릴다운만 존재하는것같아 원형차트에 대한 드릴다운 예제 문의드립니다.


https://wijmo-js-demo.web.app/03-Chart/03-BarCharts/09-ColumnWithDrill-down 


해당 튜토리얼처럼 각 슬라이스 클릭 시 세부 Data의 원형차트로 들어가고 상단에 이전 차트로 돌아가는 기능이 있는 예제 부탁드립니다.


감사합니다.

  • 페이스북으로 공유
  • 트위터로  공유
  • 링크 복사
  • 카카오톡으로 보내기

댓글목록

등록된 댓글이 없습니다.

1 답변

PureJS Re: 파이차트 드릴다운 문의

추천1 이 글을 추천하셨습니다 비추천0 채택채택

페이지 정보

작성자 GCK다이애나 작성일 2022-09-21 11:45 댓글 0건

본문

안녕하세요 그레이프시티입니다.


문의 주신 드릴 다운이 있는 원형 차트를 구현하는 방법에 대해 답변 드립니다.

데이터를 특정 기준별로 그룹화 한 후, FlexPie 컨트롤의 selectionChanged 이벤트를 사용해 드릴 다운이 있는 원형 차트를 구현할 수 있습니다.

아래의 샘플을 참고해 보시기 바랍니다.

샘플은 다음과 같은 방법으로 구현되었습니다.

  1. selectionMode 속성이 Point 속성 값으로 지정된 FlexPie 컨트롤과 헤더를 나타낼 h4 태그를 생성합니다.
  2. 이때, FlexPie 컨트롤에 바인딩된 데이터는 사용자 정의 함수 getGroupData 를 이용해 특정 기준별로 그룹화된 데이터입니다.
  3. FlexPie 컨트롤의 selectionChanged 이벤트에 다음과 같은 코드를 구현합니다.
    -1. 조건문을 통해 FlexPie 컨트롤의 selectedIndex 속성 값이 null인지 확인합니다.
    -2. null이 아니라면, FlexPie 컨트롤의 currentItem 속성의 그룹화된 데이터를 변수 groupdata 에 저장합니다.
    -3. 새로운 데이터를 FlexPie 컨트롤에 바인딩 하는 사용자 정의 함수 showGroup 을 통해 groupdata 변수 값을 바인딩합니다.
  4. 이때, 함수 showGroup 호출 시 이전 차트로 돌아가는 링크를 헤더에 표기하는 사용자 정의 함수 updateChartHeader 를 호출하도록 구현합니다.
  5. 초기 로드 시 FlexPie 컨트롤의 특정 원형 조각이 선택되는 것을 방지하기 위해 setTimeout 메서드를 이용하여 FlexPie 컨트롤의 selectedIndex 속성을 -1 로 지정합니다.
  6. 헤더에 표기된 이전 차트로 돌아가는 링크 클릭 시, 이전 차트로 돌아가는 click 이벤트를 구현합니다.


- FlexChart 그룹화 & 드릴다운 도움말 문서

- selectedIndex API 문서

- selectionChanged API 문서

- currentItem API 문서


API 문서를 공유드리며 다른 궁금한 점이 생기면, 문의 주시기 바랍니다.


감사합니다.


그레이프시티 드림

댓글목록

등록된 댓글이 없습니다.

메시어스 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기
메시어스 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기
이메일 : sales-kor@mescius.com | 전화 : 1670-0583 | 경기도 과천시 과천대로 7길 33, 디테크타워 B동 1107호 메시어스(주) 대표자 : 허경명 | 사업자등록번호 : 123-84-00981 | 통신판매업신고번호 : 2013-경기안양-00331 ⓒ 2024 MESCIUS inc. All rights reserved.