github.com/indiespirit/react-native-chart-kit

 

indiespirit/react-native-chart-kit

📊React Native Chart Kit: Line Chart, Bezier Line Chart, Progress Ring, Bar chart, Pie chart, Contribution graph (heatmap) - indiespirit/react-native-chart-kit

github.com

프로젝트 진행 중 그래프 출력을 해야하는 로직이 있어 react-native-chart-kit 을 사용함. 

 

여러가지 그래프 출력 함수를 제공하지만 가장 기본인 LineChart를 사용하였으며, 그래프 작성시 필요한 값은  datasets->data 배열에 저장해둠.

 

이 data 배열을 동적으로 변경해야하는 경우 아래 코드와 같이 이전 값을 복사 한 뒤 data 배열 값 업데이트 후 setState 함수를 통해 변경된 값을 적용하면 화면이 랜더링 되면서 변경된 값으로 새로운 그래프를 출력함. 

[state내 선언된 LineChart 관련 변수]
[LineChart data 동적 변경 코드]

'0x001 Programming > 03. React-Native' 카테고리의 다른 글

android:usesCleartextTraffic 관련  (0) 2020.06.25
LifeCycle API  (0) 2019.04.29
props | state  (0) 2019.04.29
React Native UI 학습  (0) 2019.03.25

+ Recent posts