react-native-chart-kit LineChart Data 동적 변경

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

indiespirit/react-native-chart-kit

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

 

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

 

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

[state내 선언된 LineChart 관련 변수]

[LineChart data 동적 변경 코드]