차트(Chart) 라이브러리

항해99 파이널 프로젝트 때도 차트 너무 어려워 보여서 못해서 잊어 버리고 있었는 데

회사에서 만들고 있을 줄은 꿈에도 몰랐다... 어제, 오늘 열심히 구글링한 결과 Chart.js를 사용하여 원하는 차트를 만들 수 있었다. 이틀동안 여러 차트들을 만들면서 시행착오가 많았지만 많이 배울 수 있었다.

 

첫번째 도전에서는 라이브러리를 사용하는 것 보다는 직접 만들어 보는 게 공부가 된다고 하셔서 CSS와 JS를 사용하는 방법을 찾아 보았다. 아래 블로그를 참고하여 손쉽게 도넛 차트를 만들 수 있었다.

[CSS]그라디언트를 이용해 간단하게 원형차트/도넛차트 그리기(애니메이션으로 차트그리기 )

장점 : 라이브러리를 사용하지 않고 만들다 보니 필요한 기능만 구현하기 때문에 용량이 절약 되고, 로직을 이해하기 좋았던 것 같다.

단점 : 기능이 많이질 수록 하드코딩이 된다는 점 (예를 들어 tooltip 만들려고 하는 순간 하드코딩이 된다.)

 

두번째 도전에서는 tooltip을 사용하기 위해서 라이브러리를 찾아보기 시작했고, NIVO 라이브러리를 사용하였다.

Pie chart | nivo

장점 : 커스텀에 최적화된 느낌이라서 좋았다. 세세한 커스텀까지 신경 써주는 느낌

단점 : Next.js에서 적용이 안된다. Next.js는 SSR 방식을 사용하기 때문에 NIVO 라이브러리를 사용하기 위해서는 next/dynamic을 사용해서 import 받아와야 하는 데 온갖 방법을 다 동원해도 차트가 안나와서 포기했다. (다른 프레임워크에서는 잘되지 않을까 싶다.)

 

세번째 도전에서는 Chart.js를 사용했다.

[#. JavaScript] chart.js doughnut(donut) chart 원형 차트 생성, 사용하기

Pie | Chart.js

장점 : 안해본 사람은 쉽게 적용하지는 못하겠다는 느낌이 들 정도로 설명이 좀 약하다는 느낌이 들었다. (나만 그런 걸 수도 있지만) 하지만 다양한 커스텀 기능을 제공하고, SSR에서도 별도의 설정 없이도 쉽게 적용 할 수 있어 좋았다.

---

Chart.js에 대한 구현 설명을 다음 게시물에서😎

[Next.js] Chart.js