[JavaScript] Chart 라이브러리 정리

웹 개발을 하면서 사용해 본 Chart를 정리하였다. 무료인 것도 있고 조건부 무료인 차트도 있다.
대부분 사용하기에 편리하여 적용하기도 쉽고 심플하고 이쁜 디자인도 많고 예제와 설명이 잘 되어있어 좋았다.

AmCharts

• 링크 : ​https://www.amcharts.com/
• 예제 : http://www.amcharts.com/demos/
• 유료 라이선스 이지만 조건부 무료이다. 사용해 본 라이브러리 중에 기능이 엄청 많고 디자인이 제일 깔끔하다. 라이선스 비용은 개인이 사용하기에는 부담이 될 수 있지만, 차트에 개발사 링크가 출력되는 조건만 지키면 무료로 사용 가능하다.

HighCharts

• 링크 : https://www.highcharts.com/
• amCharts와 같이 조건부 무료입니다. Angular에서도 쓸 수 있고, 차트 종류도 다양하고, 사용법이 편리하며 커스터마이징도 쉽게 할 수 있다. 현재 가장 많이 사용하는 차트이다.

D3 Data-Driven Documents

• 링크 : https://d3js.org/
• 무료입니다. 데이터 시각화 프레임워크로 잘 알려져 있고, 자바스크립트로 개발한다. HTML5의 SVG(Scalable Vector Graphic)을 통해 다양한 화면 해상도에서 깨짐 없는 가시화가 가능하다. D3 차트에서는 버블차트와 OpenLayers3에 파이차트를 올려 사용하였다. D3는 기본적인 개념과 사용법을 익혀야 사용이 가능하므로 공부를 많이 해야 한다.

Chart.js

• 링크 : http://www.chartjs.org/
• 예제 : http://www.chartjs.org/docs/latest/
• 오픈소스이며, 전체적으로 깔끔하고 문서도 정리가 잘 되어 있다. 인기가 많고, 사용법이 편리하고 이쁘다.

Google Chart

• 링크 : https://developers.google.com/chart/
• 구글 차트는 많이 사용해보지 못하였지만, 기능은 많습니다. 하지만 디자인이 다른 차트에 비해 이쁘지 않은 것 같아 많이 사용하지 않았다. 그렇지만 사용하기는 편리하다.

Morris.js

• 링크 : http://morrisjs.github.io/morris.js/
• 무료이며 사용이 정말 간단합니다. 그리고 디자인도 심플한 편이라 간단하게 테스트 용으로 많이 사용하였다.

Chartist.js

• 링크 : http://gionkunz.github.io/chartist-js/
• Chartist 또한 인기있는 Chart Javascript 라이브러리 중의 하나로 SVG를 사용하며, CSS를 통해 모양을 다듬을 수 있다.

위의 차트들이 자주 사용하는 차트들이다.