회사 프로젝트 특성상 데이터를 시각화하는 작업이 많다.
vue를 사용하게 되면서 어떤 차트 라이브러리를 쓰면 좋을 지 고민했었는데 이번 기회에 정리해본다.
1. Chart.js
가볍고 사용하기 쉬운 JavaScript 차트 라이브러리로, 다양한 차트 유형을 지원한다.
또한 Vue 컴포넌트로 래핑한 vue-chartjs도 있어 Vue에서 사용하기 간편하다.
하지만 일부 고급기능을 사용하기에는 제한적일 수 있다.
2. Echarts
Apache 소프트웨어 재단에서 개발된 강력한 JavaScript 차트 라이브러리이다.
Chart.js와 마찬가지로 Vue에서 사용하기 쉽게 Vue-ECharts 를 사용할 수 있다.
고급 사용자가 요구하는 특정 기능들이 라이브러리에 포함되어 있지 않을 수 있다.
3. ApexCharts
SVG기반의 라이브러리로 Vue-ApexChart로 쉽게 사용할 수 있다.
하지만 몇가지 고급기능은 유료이며, 문서화가 다소 부족할 수 있다.
4. D3.js
데이터를 기반으로 동적이고 인터랙티브한 데이터 시각화를 제공하는 JavaScript 라이브러리이다.
초기 학습 곡선이 높고, 복잡한 차트 구현에는 시간이 많이 소요될 수 있다.
5. Google Charts
Google에서 개발한 데이터 시각화 라이브러리로, 간단하게 사용할 수 있는 인터페이스를 제공한다.
일부 고급 사용자에게는 기능이 제한적일 수 있으며, 특정 차트 요구사항에 제한이 있을 수 있다.
6. Highchart
높은 품질의 인터랙티브 JavaScript 차트 라이브러리로, 다양한 차트 유형과 옵션을 제공한다.
예전 프로젝트 때 써봤는데 옵션이 많은 만큼 확실히 무겁다.
결정적으로 유료로 사용해야 하고 회사에서 사용하던 라이센스가 끝나서 후보에서 제외되었다.
내가 원하던 조건은
- vue에서 사용하기 쉬울 것
- 생태계가 커서 정보를 얻을 수 있는 레퍼런스가 많을 것
- 내가 필요로 하는 기능만 있다면 가벼웠으면 좋겠다.
+무료(?)
이정도 였는데, Chart.js와 Echarts가 가장 부합하는 것 같아 고민하다가 생태계가 쫌 더 크다고 생각되는 Chart.js로 결정해서 사용중이다. (사실 큰 차이는 없을 것 같다)
프로젝트의 규모와 특성에 따라 적절하게 골라서 사용하면 될 것 같다.
