Chart.js 로 쉽게 그래프 그리기 +예제

무료 그래프 API를 찾다가 발견한 Chart.js

오픈소스이며, 디자인이 깔끔하고 문서 정리가 잘 되어있다.

무엇보다 이벤트, 애니메이션 등 다양한 커스터마이징이 가능해서 바로 가져왔다!

 

Chart.js 공식 사이트 [https://www.chartjs.org/]

Chart.js | Open source HTML5 Charts for your website

Chart.js는 막대그래프, 꺾은선 그래프는 물론 레이더, 버블 등 특별한 그래프도 지원한다.

표 타이틀의 글씨체 속성도 변경할 수 있고, 그리드 컬러까지 지정할 수 있다.

애니메이션도 다양하다. (하나씩 보이기, 떨어지기, 점진적으로 표시하기 등.. )

모든 커스터마이징이 어렵지 않고 직관적이어서 사용에 부담이 없다.

 

Chart.js 그래프 예시

 

---

 

각 그래프별 사용법은 아래와 같다.

소스를 수정할 수 있게 설정해두었다. 속성을 바꾸며 탐구해보길....

 

1. 막대그래프

 

See the Pen Untitled by su815 (@su815) on CodePen.

 

 

2. 도넛그래프

 

See the Pen Chart.js doughnut graph by su815 (@su815) on CodePen.

 

 

3. 꺾은선그래프

 

See the Pen Untitled by su815 (@su815) on CodePen.

 

 

4. 여러 그래프를 한 캔퍼스에 그리기

See the Pen Chart.js bar graph by su815 (@su815) on CodePen.

하나의 canvas에 그래프 여러 개, 여러 종류를 사용하고 싶다면 datasets을 추가하면 된다.

 

+) 참고할 것들!

Chart.js는 datasets에 작성한 순서대로 z축 순서가 달라진다.

 

Chart.js 그래프 순서

막대그래프 속성을 꺾은선그래프 속성보다 우선 작성한다면

위 그림처럼 꺾은선이 가려지게 된다.

 

또 Chart.js의 기본 기능인데, label을 클릭하면 활성화 여부를 지정할 수 있다. 대박임..

Chart.js 활성화 / 비활성화

 

다른 그래프들은 문서 찾아보고, Git 뒤져보고 해야 원하는 기능을 붙일 수 있는데

Chart.js는 공식 문서가 워낙 잘 정리되어있어서 일반적인 요소는 금방 적용할 수 있었다.

그저 빛!

 

Chart.js 공식 사이트.. 정리 끝판왕