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피들에서 확인할 수 있다.