ReactJS FlexChartSeries 렌더링 문제 외
페이지 정보
작성자 gmpark 작성일 2023-11-16 10:41 조회 145회 댓글 1건본문
관련링크
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의 뷰포트 영역 문제였습니다. 감사합니다.