Vue.js 에서 사용할 차트 추천

Chart.js가 1위, Google Chart가 2위

Vue.js 프로젝트에 쓸만한 차트들 검토해보았다, 4개 정도로 추려지는데 그중에서Chart.js와 Google Charts 를 조심스레 추천해본다. 순위를 매기는 (주관적인)우선순위 항목은 아래와 같다.

• 필요한 모듈만 사용할 수 있으면 좋다 : 좋은 차트 라이브러리 일수록 라이브러리의 무게는 무거워진다. 그래서 무게를 잘 봐야하는데 쪼개서 사용할 수 있으면 전체가 무거워도 괜찮을 수 있다. 특히나 SPA 프로젝트는 규모가 커지면 무게가 늘어나는데에 민감해진다. 그러므로 특정화면에서 필요한 모듈만 불러와서 사용할 수 있으면 좋다.
• 지원하는 차트 형태가 많지 않아도 된다 : 이것은 프로젝트마다 다르겠지만 라인/바 이외의 차트는 거의 사용되지 않기 때문에 차트 형태가 많은것이 장점은 아니다. 오히려 차트의 설정과 옵션을 섬세하게 조정할 수 있도록 여지를 많이 둔것이 더 중요하다.
• 저렴하면 좋고 무료이면 더 좋겠다 : 이건 설명이 필요없다.
• 사용자 생태계가 크면 좋겠다 : 차트를 좀 더 커스텀해서 깊이있게 사용할 수록 개발 이슈가 많아질 것이고, 오픈소스에서는 이런경우 생태계를 통해 도움을 많이 받을 수 있다. 생각보다 중요한 이슈이다. 아무래도 겨우 몇 백명 정도가 사용하는 것은 팀에서 채택하기 힘들다.
• 쉬우면 좋겠다 : 이건 좀 부차적인 항목이긴 하지만 그래도 쉬우면 좋다. 유지보수 비용이 줄어들기 때문이다.
• Vue.js 래핑 라이브러리가 있으면 좋겠다 : 이것도 부착적인 항목이다.

출처: npmchart.com

지원하는 차트 형태 갯수로 보자면 많지는 않지만, 우리가 사용하는 형태는 모두 지원하면서, 성능에 문제없고, 무료이며, 필요한 모듈만 가져다 사용할 수 있는 Chart.js와 Google Charts 중에 고민을 했다.

결국 1위는 Chart.js. 이 둘 중에 Chart.js를 선택한 이유는 직접 샘플을 만들어보았을때 훨씬 제어하기 쉬운것이 Chart.js 였기 때문이다.

1. Chart.js http://www.chartjs.org

• 무료/완전 오픈소스.
• JS/HTML5/Canvas 기반.
• 캔버스 기반이라 빅데이터 처리굿, 애니메이션굿.
• 적당히 다양한 타입과 옵션.
• 사용하기 매우 쉽다.
• 필요한 모듈만 가져다 사용할 수 있음.
• 반응형지원
• vue.js wrapper 있음 : https://github.com/apertureless/vue-chartjs

2. Google Charts https://developers.google.com/chart/interactive/docs/

• 무료.
• JS/HTML5/SVG 기반.
• 필요한 모듈만 가져다 사용할 수 있음.
• 타입과 옵션이 가장 디테일한듯.
• Vue-google charts 에서 반응형지원.
• vue.js wrapper : https://github.com/devstark-com/vue-google-charts

3. Plotly https://plot.ly/javascript/

• 무료/완전 오픈소스.
• 스칼라/R/Python/JS 등 다양한 언어지원.
• 매우 다양한 타입, 옵션.
• 차트생성 웹에디터 제공-> 옵션 및 더미 세팅하여 소스나 이미지로 다운받거나 저장할 수 있음.
• 단점은 용량이 무려 2.8M, 필요한 모듈만 가져다 쓰기 어려움.

4. HighChart https://www.highcharts.com

• 상업용도는 유료, 돈낸다면 HighFive 상품이 적절해보임. 연 50달러.
• 다양한 플랫폼 지원(+iOS, and).
• 매우 다양한 유형과 옵션들.
• 반응형지원.
• 단점은 유료/무거움.
• 차트생성 웹에디터 제공.

사실 정답은 없다. 다만 샘플을 반드시 만들어보고 도입하는것이 필요하다. 확실히 원하는 화면을 만들 수 있는지, 사용하기는 얼마나 좋은지, 데이터를 많이 부었을때 성능에 문제는 없는지 등등은 직접 사용해봐야 감을 잡을 수 있을 것이다.

이글이 마음에 드셨다면 👏🏽👏🏽, 커피한잔 후원하기 (카카오페이), 이메일 구독