웹개발을 할 때 그래프나 차트가 필요한 경우가 많습니다.
간단한 것부터 복잡한 것까지 필요한 내용에 따라 라이브러리를 잘 골라 써야합니다.
라이브러리는 무료, 유료, 부분유료 등 다양한 종류가 있으니 사용 환경이나 취향에 맞게 골라쓰면 될 것 같습니다.
HighCharts
라이센스 : 무료, 유료
가격 : 무료~$750
링크 : https://www.highcharts.com
예제 : https://www.highcharts.com/demo
디펜던시 : 없음
SVG 베이스 자바스크립트 차트 라이브러리입니다. 의존성 없이 독립적으로 실행이 가능하고 자바스크립트나 CSS를 사용하여 스타일링을 할 수 있는 장점이 있습니다.
일반, 주식, 지도, 일정 차트를 만들 수 있습니다.
특징
- 빅 데이터 사용 가능
- NPM 유형 설치시 TYPESCRIPT 사용가능
- 반응형 디자인 모바일 최적화 설계
- 초보자를 위한 에디터 제공
- 이미지 파일 등으로 EXPORT 기능 제공
- 다양한 테마 제공
AmCharts
라이센스 : 무료, 유료
가격 : 무료~$8,925
링크 : https://www.amcharts.com
예제 : https://www.amcharts.com/demos
디펜던시 : 없음
CANVAS 베이스 자바스크립트 차트 라이브러리로 amcharts 도 의존성 없이 독립적으로 실행이 가능합니다.
일반, 주식, 지도 차트를 만들 수 있습니다. 특히 히트맵 등 차트는 독창적으로 구현되어 있습니다.
특징
- CANVAS 베이스로 빠른 렌더링
- 각 엘리먼트 캔버스의 분리로 섹션 구분
- 고속 데이터 처리 속도
- 작은 라이브러리 용량 (400kb)
- 적은 메모리 사용
- webpack 사용시 tree-shaking 가능
- 전용 에디터 제공
Chart.js
라이센스 : 오픈소스
가격 : 무료
링크 : https://www.chartjs.org
예제 : https://www.chartjs.org/docs/latest/samples
디펜던시 : 없음
CANVAS 베이스 차트 라이브러리입니다. HTML5를 기반하여 제작되며 타 차트 라이브러리에 비해 사용이 비교적 간단합니다.
일반적인 선, 바 차트만 제공되며 주식차트나 지도 등 부가적인 차트 기능은 제공되지 않습니다.
특징
- CANVAS 베이스로 빠른 렌더링
- 오픈소스 무료 제공이지만 지속적인 유지보수와 새로운 버전 출시
- 초보자도 쉽게 사용할 수 있을정도로 잘 정리된 문서
- 정말 작은 라이브러리 용량 (713 byte)
- 매우 적은 메모리 사용
C3.js
라이센스 : 오픈소스
가격 : 무료
링크 : https://c3js.org
예제 : https://c3js.org/examples.html
디펜던시 : d3.js
SVG 베이스 차트 라이브러리입니다. D3(Data-Driven Documents)에 기반하는 차트 라이브러리 특성으로 빅데이터의 매우 빠른 처리가 가능합니다.
일반차트만 제공되며 역시 주식차트나 기타 차트는 제공되지 않습니다.
대규모 데이터나 데이터의 가공이 많이 필요한 경우 적합합니다.
특징
- D3 베이스로 빅데이터 처리 가능
- SVG 베이스 차트로 손쉬운 커스터마이징 가능
- 매우 빠른 렌더링 속도 및 응답속도
- 아주 높은 브라우저 호환성
morris.js
라이센스 : 오픈소스
가격 : 무료
링크 : https://morrisjs.github.io/morris.js/
예제 : https://morrisjs.github.io/morris.js/
디펜던시 : jquery
morris.js 차트 또한 SVG 베이스 차트입니다. jquery를 기반으로 하는 차트 라이브러리로 비교적 빠른 속도를 가지고 있으며 특징으로는 수많은 부트스트랩 대시보드 테마 들에서 사용되는 경향이 있습니다.
이는 대시보드에 적합한 유형의 차트를 빠르게 구축할 수 있기 때문으로 확인됩니다.
일반 차트만 제공되며 무료로 제공됩니다.
특징
- jquery 기반 손쉬운 커스터마이징 가능
- 빠르고 간편한 차트 생성
- 손댈 것 없이 기본적으로 다양한 구성 제공
Google Charts
라이센스 : 오픈소스
가격 : 무료
링크 : https://developers.google.com/chart/
예제 : https://developers.google.com/chart/interactive/docs/gallery
SVG 베이스의 구글차트입니다. 구글답게 다양한 기능을 제공합니다.
일반 차트는 물론 조직도, 지도, 워드트리 등 다양한 차트를 생성할 수 있습니다. 차트 라이브러리이지만 왜인지 모르게 표도 생성할 수 있습니다.
다양한 종류를 제공한다는 점은 좋지만 사용방법이 다소 어려운 점이 조금 아쉽습니다.
특징
- 만들고 싶은 차트는 모두 만들 수 있음
- 입맛대로 다양한 종류의 커스터마이징이 가능
- 빅데이터 처리에 용이
- 완벽한 브라우저 호환성
이상으로 차트 라이브러리들을 알아봤습니다.
제가 주로 사용하는 것들이기도 하고 사용하면서 느낀점을 토대로 정리해보았으니 많은 참고가 되었으면 좋겠습니다.