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

FlexChartSeries 렌더링 문제 외 > Q&A | 토론

본문 바로가기

ReactJS FlexChartSeries 렌더링 문제 외

페이지 정보

작성자 gmpark 작성일 2023-11-16 10:41 조회 145회 댓글 1건
제품 버전 : 5.20211.794
컨트롤 이름 : FlexChartSeries, FlexChart

본문

1. 차트의 itemsSource를 변경하지 않고, FlexGridSeries의 조건부렌더링만 바꾸어 차트에 표시되는 데이터를 바꿀 수 있나요?


가령 다음과 같은 데이터의 유형이 있는데

interface Data {
    date: Date,
    A: 100,
    B: 200,
    C: 110
}

차트 렌더링 구간에서는,

const [items, setItems] = useState(['A', 'B', 'C'])

<wjChart.FlexChart>
{
      items.map(tag => (
        <wjChart.FlexChartSeries binding={tag} name={tag}/>
      ))
}
</wjChart.FlexChart>

이라고 표현을 해서, 위의 사례와 같이 B데이터는 배제하려고 했습니다만 items의 변화에 따른 렌더링이 전혀 되지 않습니다(화면에 아무것도 안뜸).


차트에 대해 series를 동적으로 변화시키고, 그에 따라 차트에 표시되는 데이터를 변경하려면 어떻게 해야 하나요?


2. 라인 차트상에 최대, 최소, 평균값의 수평선을 그으려면 어떻게 하나요?


3. 차트 위에서 좌클릭/우클릭시 (x, y)좌표, 데이터아이템 등을 조회할 수 있는 방법을 알려주세요


4. 필터 및 휠 확대/축소 예제(링크)에서, pointToData값이 정상적으로 나오는 것인지 궁금합니다.

let center = chartRef.current.control.pointToData(e.clientX, e.clientY);
console.log(`x: ${e.clientX} y:${e.clientY} px:${center.x} py:${center.y}`)

이렇게 코드를 작동시키니 


이런 식으로 출력되는데 이게 정상적인 데이터가 맞나 궁금합니다. 홈페이지의 데모처럼 작동하지도 않습니다.


5. https://demo.mescius.co.kr/wijmo/learn-wijmo/Chart/Features/ScrollingAndRangeSelectors/react 


차트 쪽 리액트/앵귤러/뷰 예제들이 전부 작동(좌측화면 렌더링)하지 않습니다. 현재 자바스크립트 예제만 정상작동하네요

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

댓글목록

gmpark님의 댓글

gmpark 작성일

4) 에 대해서는, 아래와 같이 하니까 정상적으로 작동하네요. clientX, clientY의 뷰포트 영역 문제였습니다. 감사합니다.

chart.hostElement.addEventListener('wheel', (e: WheelEvent) => {
      if (e.ctrlKey) {
        const rect = chart.hostElement.getBoundingClientRect();
        let center = chart.pointToData(e.clientX - rect.left, e.clientY - rect.top);
        applyZoom(e.deltaY > 0 ? 1.1 : 0.9, center);
        e.preventDefault();
      }
    });

3 답변

ReactJS Re: FlexChartSeries 렌더링 문제 외

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

페이지 정보

작성자 MESCIUS루시 작성일 2023-11-17 17:23 댓글 0건

본문

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


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


1. 차트 series 동적 설정 문의

=> 문의하신 기능의 경우, 차트 series의 visibility를 hidden 또는 visible 로 할당하는 방식으로 구현하실 수 있습니다. 아래 간단한 샘플을 공유드리며 샘플에서 동적 series 버튼 클릭 시, 랜덤으로 특정 series가 사라지거나 보여지게 됩니다. 



- visibility API 문서


2. 차트 최대, 최소, 평균값 수평선 문의

=> 해당 문의의 경우, 현재 추가로 확인 중에 있으며 업데이트가 되는대로 안내드리도록 하겠습니다.


3. 차트 클릭 시, 좌표 등 값 가져오는 방법

=> 해당 기능의 경우, click/contextmenu 이벤트를 추가하여 해당 이벤트 내에서 hitTest 메서드를 이용하여 차트 요소를 클릭한 정보를 가져올 수 있습니다.  더불어 좌표의 경우, 마우스 이벤트의 clientX 와 clientY를 이용하여 가져올 수 있으니 참고 부탁드립니다.

    chartInitialized(flex) {
        flex.hostElement.addEventListener("click", e=>{
            let ht = flex.hitTest(e);
            console.log(`name: ${ht.name} x축 값은:${ht.x} y축 값은:${ht.y} x좌표:${e.clientX}  y좌표:${e.clientY}`)
        })

     flex.hostElement.addEventListener("contextmenu", e=>{
	e.preventDefault()//기존 contextmenu 안보이게 처리
	//hitTest
        (...)
    }


4. pointToData 및 좌표 관련 문의

=> 먼저 pointToData의 경우, Point 컨트롤 좌표에서 차트의 데이터 좌표로 변환해주는 메서드이며, dataToPoint의 경우, 데이터 좌표로부터 컨트롤 좌표로 변환해주는 메서드입니다. 


마우스 휠 이벤트에서 결과 값은 아래와 같습니다.

  let point = flex.pointToData(e.clientX, e.clientY);
  let data = flex.dataToPoint(point.x, point.y);
  console.log(`x: ${e.clientX} y:${e.clientY} point.x:${point.x} point.y:${point.y} data.x:${data.x} data.y:${data.y}`)


6da47f239586bc88e8dc9114ef9ae78e_1700206671_7849.png 


말씀하신 내용(y 좌표 값이 마이너스)이 저희 쪽에서 재현이 되지 않아 정확한 원인 파악이 어려운 상황입니다. 관련하여 zoom in/out 샘플을 공유드리오니 해당 샘플을 바탕으로 재현 가능한 샘플 및 디테일한 내용을 공유해주신다면 재현 및 디버깅 후 답변드리도록 하겠습니다.



- pointToData API 문서

- dataToPoint API 문서


5. Wijmo 데모 현상 문의

=> 해당 현상과 관련하여 꾸준히 본사 팀과 확인 중에 있습니다. 관련하여 업데이트가 되는대로 안내드리도록 하겠습니다. 불편을 드려 죄송합니다.


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


감사합니다.

메시어스 드림


댓글목록

등록된 댓글이 없습니다.

ReactJS Re: FlexChartSeries 렌더링 문제 외

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

페이지 정보

작성자 MESCIUS루시 작성일 2023-11-21 10:10 댓글 0건

본문

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

현재 Wijmo 데모 사이트의 React 페이지가 정상 작동되는 것으로 확인됩니다. 아래 링크를 공유드리며 만일 결과 화면이 이전과 동일하게 로딩 중으로 나오신다면 강력 새로고침(ctrl+shift+r)을 시도해보시기 바랍니다.


불편을 드려 죄송드리며 오랜 시간 기다려주신 점 감사합니다.

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

댓글목록

등록된 댓글이 없습니다.

ReactJS Re: FlexChartSeries 렌더링 문제 외

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

페이지 정보

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

본문

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


이전에 안내드리지 못했던 문의 추가로 답변드립니다.


2. 차트 최대, 최소, 평균값 수평선 문의 

=> 문의하신 기능의 경우, FlexChart의 추세선을 이용하여 Y축의 min, max, average 값을 표시할 수 있습니다. 자세한 코드는 아래 샘플에서 확인하실 수 있습니다.



- TrendLine Class API 문서

fitType API 문서


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


감사합니다.

메시어스 드림

댓글목록

등록된 댓글이 없습니다.

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