vue3(composition API) 에서 chart.js 실시간 차트(chartjs-plugin-streaming) 사용하기

 

기존에 진행했던 프로젝트를 vue3로 변경하게 되면서 굉장히 많은 난관에 부딪혔다.

그 중 하나가 chart.js 이다.

 

내가 필요한건 실시간차트 라인 차트였고 기존 프로젝트에서도 chart.js를 사용했었으니 그리 어려운게 아니라 생각했는데,,,, 나의 오산이었고. 바로 시작해보겠슴다.

 

일단 vue3 최신버전 사용 (composition API / vite 기반) 에서 사용할때 이야기입니다.

(글 작성하는 현재 vue3 버전은 v.3.4.21 에서 진행하였습니다.)

 

vue3에서 chart.js를 사용할 경우 필요한 라이브러리는 아래와같다.

1. chart.js (당연함)

2. vue-chartjs (vue에서chart.js를 보다 간단하게 사용하도록 도와준다.)

추가로 실시간차트를 사용할 경우엔.

3. chartjs-plugin-streaming (chart.js의 플러그인) 이 필요하다.

추추가로 위 플러그인은 시간 데이터를 처리하기 위해 시간 어댑터가 필요하다.

사용가능한 시간 어댑터는 여러가지 있지만, luxon(보다 가볍고 현대적이라 함 chat GPT 왈) 사용을 추천하므로,

3-1. chartjs-adapter-luxon

3-2  luxon

까지 설치해준다.

여기서 가장 큰 문제가 발생하는데! 바로 라이브러리간의 호환성 문제였다.

현재 chart.js 의 가장 최신 버전은 v.4.4.2 이다 (글 작성 기준)

다행히도 vue-chartjs 의 최신버전 v5.3.1 은 chart.js v4.x 까지 지원해줌.

그러나. chartjs-plugin-streaming 은 업데이트를 멈춘 것 같았다. 해당 깃헙에는 

chartjs-plugin-streaming 2.x requires Chart.js 3.0.0 or later. If you need Chart.js 2.x support, use the following versions. 

라고 나와있다.

그러나 chart.js v.4.4.2 와 같이 설치할 경우 에러가 발생한다

물론 무시하고 --force로 설치는 가능 (동작이 제대로 하는지는 모르겠다.)

 

열심히 서치 결과.

 chartjs-plugin-streaming issue탭에 해당 내용이 있어 공유한다.

(https://github.com/nagix/chartjs-plugin-streaming/issues/189)

Plans to update for ChartJS 4.x? · Issue #189 · nagix/chartjs-plugin-streaming

 

https://socket.dev/npm/package/@robloche/chartjs-plugin-streaming

@robloche/chartjs-plugin-streaming - npm Package Security Analysis - Socket

 

고맙게도... 
@robloche/chartjs-plugin-streaming@3
로 설치하면 충돌없고, 잘 호환되며, 역시 잘 구동된다.

 

---

 

실시간차트로 사용시 또 발생하는 오류가 하나 있는데,

Uncaught (in promise) RangeError: Maximum call stack size listed
라는 오류이다.

 

해당 오류에 관한건 나중에 자세히 올리겠음 하지만 아래 사이트들을 참고바람

https://stackoverflow.com/questions/68602389/maximum-call-stack-error-when-attempting-to-update-chart-in-vue-js?answertab=scoredesc#tab-top

Maximum call stack error when attempting to update Chart in Vue js

 

https://stackoverflow.com/questions/45103379/got-maximum-call-stack-size-exceeded-with-vue-using-chartjs?rq=3

Got "Maximum call stack size exceeded" with Vue using ChartJS