Chart.js 적용하기

📢 Chart.js 소개

- 완전 오픈 소스 (무료)

- <canvas> 기반이라 SVG 렌더링 방식과 비교했을 때 DOM 트리의 비용을 줄여 성능이 높음

- 막대 차트, 선 차트, 원형 차트, 도넛 차트 등 다양한 차트 유형 지원

- 구글링 결과 현재 가장 널리 쓰이는 차트 플러그인으로 보임 (레퍼런스가 많다)

 

 

📌 사용방법

- 라이브러리 다운로드 혹은 CDN 이용

- 공식 문서 URL

Chart.js 공식문서

 

 

Chart.js CDN

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

 

 

📌 chart.js 에 대한 옵션

See the Pen chart.js by 조민혁 (@iqgzrljw-the-typescripter) on CodePen.

 

 

 

 

 

📌 Reference

1. 예제

https://eunyoe.tistory.com/60?category=767107

chart.js를 사용해 막대 그래프 그리는 법 (예제 多)

 

2. 파이 그래프에 데이터값 항상 표시하기

https://jsfiddle.net/kf9uLf3x/

Edit fiddle - JSFiddle - Code Playground