기타 주석 content 위치 변경 후 확대 축소 시 위치값 변하는 현상 수정 방법 문의
페이지 정보
작성자 nxdev1 작성일 2024-01-26 11:56 조회 63회 댓글 1건본문
첨부파일
관련링크
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();
}
});