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

chart tooltip 정보 오류 > Q&A | 토론

본문 바로가기

PureJS chart tooltip 정보 오류

페이지 정보

작성자 팬더곰 작성일 2023-07-05 14:09 조회 326회 댓글 1건
제품 버전 : 5.20231.888

본문


안녕하세요. 위 그림처럼 막대 차트 2개를 생성한 후 
rendered 에서 width 와 x 를 수정하여 겹쳐 보이도록 했습니다.

      rendered:function(s,e){

let elements = e.engine.element;

let series = elements.querySelectorAll('.wj-series-group g');

var newWidth = 0;

series[0].querySelectorAll('rect').forEach((rect, index) => {

if(index == 0) {

newWidth = rect.getAttribute('width');

}

rect.setAttribute('x', Number(rect.getAttribute('x')) + Number(rect.getAttribute('width')/2));

});

//console.log(newWidth);

series[1].querySelectorAll('rect').forEach((rect) => {

rect.setAttribute('width', Number(newWidth)/2);

rect.setAttribute('x', Number(rect.getAttribute('x')) - Number(rect.getAttribute('width')/2));

});     

}

그런데, 문제는 주황핵 막대그래프에 마우스 포인터를 두면, 파란색 그래프의 툴팁 정보가 나오고 있습니다.


확인 부탁드립니다. 


감사합니다.
 

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

댓글목록

GCK루시님의 댓글

GCK루시 작성일

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

문의하신 내용에 대해 현재 확인 중에 있으며 업데이트되는대로 안내 드리도록 하겠습니다.

감사합니다.
그레이프시티 드림

1 답변

PureJS Re: chart tooltip 정보 오류

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

페이지 정보

작성자 GCK루시 작성일 2023-07-10 14:39 댓글 0건

본문

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


먼저 답변이 지연되어 죄송합니다.


해당 이슈를 해결하기 위해서는 'tooltip.content'를 빈 문자열로 설정하여 차트의 기본 툴팁을 숨겨줍니다. 그 다음 FlexChart의 호스트 요소에서 'mouseover' 이벤트를 처리하여 사용자 지정 툴팁을 표시해주시면 됩니다. 


아래 간단한 샘플을 참고하여 주시기 바랍니다.


* 참고 : 차트의 selection의 경우 기본 툴팁과 유사한 문제가 있으므로 샘플에서 차트 selection을 비활성화 처리 했습니다.




다른 궁금한 점이 생기면 문의주시기 바랍니다.


감사합니다.

그레이프시티 드림

댓글목록

등록된 댓글이 없습니다.

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