vue에서 chart.js로 차트 그린 후기

chart.js는 canvas를 사용하여 그림을 그리는 것이다. 

따라서 mounted에 차트를 그리는 메서드를 넣었는데 문제는 차트에 들어가는 데이터를 서버의 api를 통해 props로 전달 받는 형식으로 개발되어서 처음에 페이지를 로드하면 props에 아직 데이터가 할당이 되지 않아 null로 넘어오는 문제가 있었다.

그래서 해결 방법으로 props에 들어갈 데이터가 아직 없다면이라는 v-if조건으로 chart컴포넌트에 걸어주어 props데이터가 생성되면 차트를 그리도록 만들었다.

이번 프로젝트에서는 chart.js에서 도넛모양 차트를 사용했는데, 지난번에 사용했던 amchart(유료 버전이 따로 있어서 무료버전은 워터마크가 생긴다ㅡ)에 비하면 상당히 복잡했다. 다음 포스트에서는 chart.js 사용법에 대해 자세히 정리해 놓아야겠다.