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

주석 content 위치 변경 후 확대 축소 시 위치값 변하는 현상 수정 방법 문의 > Q&A | 토론

본문 바로가기

Wijmo

Q&A | 토론

기타 주석 content 위치 변경 후 확대 축소 시 위치값 변하는 현상 수정 방법 문의

페이지 정보

작성자 nxdev1 작성일 2024-01-26 11:56 조회 62회 댓글 1건
제품 버전 : 5.20221.842
컨트롤 이름 : wijmo.chart.annotation.Line

본문

첨부파일

https://dev.mescius.co.kr/bbs/board.php?bo_table=wijmo_qna&wr_id=3228 

위 링크처럼 질문해서 주석 content 위치를 변경했습니다

변경한 후 차트에 확대, 축소 기능을 넣으니 확대 축소 할 때 주석의 위치가 바뀌었다 돌아왔다 합니다 이 현상을 고칠수 있는 방법이 있을까요? 

아래 코드 처럼 렌더링을 통해 주석 content 위치를 수정했습니다

그밑 코드는 튜토리얼 보고 따라 한 마우스 휠을 돌렸을때 확대 축소되는 기능 추가한 코드구요

해당 현상 동영상 첨부해 드립니다.


rendered: function (s,e){
setTimeout(function(){
let elText= document.querySelectorAll('.gcchart-anno-line text'); // 여러 주석 컨텐츠가 있을 경우,
var area = document.querySelectorAll('.wj-plot-area');
for(var i=0; i<elText.length;i++){
elText[i].x.baseVal[0].value = 0
}
for(var i=3; i<elText.length;i+=5){
elText[i].x.baseVal[0].value = area[0].children[0].width.animVal.value-75
}
for(var i=4; i<elText.length;i+=5){
elText[i].x.baseVal[0].value = area[0].children[0].width.animVal.value-75
}
},200)
}
ctc_charts.forEach((chart) => {
chart.hostElement.addEventListener('wheel', e => {
if (e.ctrlKey) {
let center = chart.pointToData(e.clientX, e.clientY);
applyZoom(chart, e.deltaY > 0 ? 1.1 : .9, center);
e.preventDefault();
}
});
  • 페이스북으로 공유
  • 트위터로  공유
  • 링크 복사
  • 카카오톡으로 보내기

댓글목록

MESCIUS루시님의 댓글

MESCIUS루시 작성일

안녕하세요 메시어스입니다.

문의하신 현상이 저희 쪽에서 재현이 되어 확인 중에 있습니다. 관련하여 업데이트가 되는대로 안내드리겠습니다. 

감사합니다.
메시어스 드림

1 답변

기타 Re: 주석 content 위치 변경 후 확대 축소 시 위치값 변하는 현상 수정 방법 문의

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

페이지 정보

작성자 MESCIUS루시 작성일 2024-01-30 11:21 댓글 0건

본문

안녕하세요 메시어스입니다.


문의하신 현상을 수정하기 위해 "Text" 요소에 대해 사용자 지정 class를 설정하여 원래 위치에서는 텍스트 숨기고 이동됐을 때 다시 보여주도록 처리하면 됩니다. 더불어 차트 주석이 렌더링될 때 "refreshed" 이벤트가 트리거되므로 "rendered" 이벤트 대신 "refreshed" 이벤트를 사용해주시면 setTimeout 없이 설정할 수 있습니다. 해당 이벤트에서 사용자 정의 class를 설정하면 세 텍스트 위치에 대한 깜박임은 사라지고 숨김/표시 처리로 인한 깜박임도 최소화됩니다.


자세한 코드는 아래 샘플에서 확인할 수 있으며 샘플에서는 'wj-custom-anno' 클래스를 주석 텍스트에 추가하였습니다.

.wj-flexchart .anno-text:not(.wj-custom-anno){
  display: none;
}



- refreshed API 문서


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


감사합니다.

메시어스 드림

댓글목록

등록된 댓글이 없습니다.

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