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

Chart에서 클릭이벤트로 DataPoint/PointIndex를 구하는 방법 > Q&A | 토론

본문 바로가기

ReactJS Chart에서 클릭이벤트로 DataPoint/PointIndex를 구하는 방법

페이지 정보

작성자 gmpark 작성일 2023-11-23 09:53 조회 165회 댓글 0건
제품 버전 : 5.20211.794
컨트롤 이름 : FlexChart

본문

1) 마우스 이벤트로 Point가 아닌 DataPoint/PointIndex형 데이터 구하기

MouseEvent의 e.clientX, e.clientY는 pointToData메소드에 넣어 Point형 데이터를 구할 수 있는데, Annotation은 Point가 아닌 DataPoint형 혹은 PointIndex를 좌표로 요구하더군요. Point형 데이터를 넣으니 정상적으로 주석이 생성되지 않습니다. 


마우스 이벤트로 DataPoint/PointIndex를 구해 차트 상 주석을 놓을 수 있는 방법을 알려주세요. 차트의 줌을 사용하더라도 특정 지점에 주석이 있도록 하기 위해서입니다.


2) API문서에서 수동 검색이 안됨

DataPoint Class | GrapeCity (mescius.co.kr) 에서 우측상단 검색창에 뭘 넣고 검색하든 검색이 전혀 되지 않고 demo.mescius.co.kr/wijmo/api/classes/undefined 으로 이동합니다.

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

댓글목록

등록된 댓글이 없습니다.

1 답변

ReactJS Re: Chart에서 클릭이벤트로 DataPoint/PointIndex를 구하는 방법

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

페이지 정보

작성자 MESCIUS루시 작성일 2023-11-24 15:47 댓글 0건

본문

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


문의하신 내용에 대해 답변드립니다.


1) 마우스 이벤트로 Point가 아닌 DataPoint/PointIndex형 데이터 구하기

=> 말씀하신 특정 지점이 주석의 attachment 속성을 DataCoordinate로 설정하신 경우라면, DataPoint의 값 또는 hitTest를 통해 가져온 point(x,y)의 값으로 좌표를 설정할 수 있습니다. 자세한 코드는 아래 샘플에서 확인하실 수 있습니다.


 


더불어 PointIndex의 경우, 주석의 attachment 방법을 DataIndex로 설정한 경우, PointIndex 값을 설정해주셔야 하는데 해당 값도 hitTest 메서드를 통해 가져올 수 있습니다. 아래 간단한 코드를 참고하여주시기 바랍니다.


chart.hostElement.addEventListener("click",function(e){
  var ht = chart.hitTest(e)
   (....)    
    {
      "type": "Square",
      "length": 80,
      "offset": { "x": 0, "y": -15 },
      "seriesIndex": 0,
      "pointIndex": ht.pointIndex,
      "content": "DataIndex",
      "position": 0,
      "attachment": 0,
(....)


2) API문서에서 검색이 안되는 현상

=> 해당 현상은 API 검색창에 값을 입력 후, dropdown의 검색 결과를 기다리지 않고 엔터를 눌렀을 경우, 발생합니다. 아래 이미지와 같이 API 검색창에 입력 후, 기다리시면 dropdown 항목이 나타나게 되며 원하는 결과 항목을 클릭하시면 해당 값에 대한 API 문서를 확인할 수 있습니다. 더불어 API 검색창에 초기에 값 입력 시, dropdown 창이 나타날 때까지  시간이 소요될 수 있으니 조금만 기다려주시기 바랍니다.


1e4bbeb41b6285b8a037cfe0ef580e8c_1700808379_7223.png
 


- hitTest API 문서

- AnnotationAttachment Enumeration API 문서


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


감사합니다.

메시어스 드림

댓글목록

등록된 댓글이 없습니다.

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