Chart.js Realtime 적용하기

1. 패키지 설치

• 호환성 문제로 다음에 지정된 버전의 라이브러리를 설치한다.

2. 코드 작성

• Chart.register 를 통해서 필요한 변수는 모두 불러와야 한다.

• 아래 코드에서는 data에 빈 배열을 넣고, onRefresh 함수 내에서 데이터를 추가해주었다.
• 이와 달리 state 값을 따로 할당하고, 특정 이벤트에 해당 값을 변경하도록 개발해도 괜찮다.

3. 결과물

 

• 참고
• https://nagix.github.io/chartjs-plugin-streaming/latest/tutorials/react/app.html
• https://react-chartjs-2.netlify.app/docs/chartjs-v3