ChartJS 소개 및 기본 예제

(과거 메모, 언제적인지 기억안남)

 

주변에서 ChartJS를 사용을 많이 추천해서 한번 사용해봤습니다.

또한 회사 내부에서 간혹 사용하는 팀을 발견했습니다.

한번 사용해보니까 기능이 정말 강력하고 매력적이라서 소개하고자 글 올립니다.

 

소개

ChartJS는 JavaScript를 통해 대시보드를 형성해주는 오픈소스 라이브러리입니다. Github Start지수는 46K 정도로 꽤!! 높습니다.

해당 오픈소스는 MIT 라이센스로 많은 곳에서 활용할 수 있으며(상용에서도^^), 무엇보다도 막강한 것은 아래와 같습니다.

1. 커뮤니티의 형성

 - 국제적으로 인지도 있는 오픈소스

 - 때문에, Smpale, Example, Stackoverflow 질문을 쉽게 찾을 수 있다.

 - 내가 고민해본 것은 이미 다른사람이 고민한 것이다.

 - 정말 친절한 doc

 

2. 커스텀의 편리

 - ChartJS에서는 커스텀을 위한 플러그인을 제공

 - 해당 플러그인은 ChartJS 개발자 뿐만아니라, 다른 개발자들이 많이 참여

 - 해당 플러그인을 우리가 직접 수정해서 편리하게 쓸 수 있음

 - 즉, 고객의 니즈를 충분히 수용할 수 있음(차트의 경우, 시각적이기 떄문에 요구사항이 까다로움)

 

생성 가능 Chart

ChartJS를 통해 구현할 수 있는 차트는 다양합니다.

 - pie chart(+half pie chart)

 - bar chart

 - line chart

 - mixed chart(bar + line)

 - radar chart 

 - 등등등: https://www.chartjs.org/samples/latest/

 

소개는 각설하고 ChartJS를 통한 구현은 다음과 같습니다.

 

예는 JS피들에서 확인할 수 있다.

 

jsfiddle.net/ehdvudee/wcvk98nj/8/