[API] Chart.js

차트생성기능을 만들기위해

여러 무료 api를 찾던중

디자인과 기능이

젤 맘에들어서 사용해본

chart.js를 소개하도록 하겠다.

 

http://www.chartjs.org

 

 

오픈소스이고 8가지의 타입이 있고 html5의 canvas를 사용하고 반응형이다.

 

시작해보자.

일단 chart.js를 사용하려면 GitHub에서 다운받거나 CDN을 이용한다.

나는 걍 CDN을 이용한다.

 

 

차트를 만들자.

먼저 canvas를 만들고 너비와 높이를 정한뒤

꼭 id를 넣자.

 

 

기본 사용틀이다.

 

 

기본 폰트 셋팅이다.

 

 

공통으로 사용되는 구성이다.

 

 

차트 제목에 관련된 구성요소들인데

일단 저런 옵션 안주면 안나오고

나오게 하고 싶으면 저 도표에 있는 옵션들로 구성하면 될거 같다.

 

 

배경에 패턴을 넣을 수 있는데

나는 아직 해보진 않음.

 

 

 

차트타입 몇가지만 소개 하도록 하겠다.

내가 사용해본 타입만 설명 하도록 하겠음.

 

 

바 차트는 익숙한 형태

사용법도 쉬움.

 

기본틀에서 벗어나지 않음

 

안에 들어가는 데이터도 크게 복잡하지 않음.

 

 

Line타입도 만만찮게 쉬움.

 

bar차트와 다르지 않은 사용법이다.

 

 

 

라인 타입에는 각 데이터 마다 포인터가 있어서

거기에 대한 옵션도 추가 할 수 있다.

 

파이 & 도넛 타입은 같은 사용법으로

타입만 다르게 써주면 된다.

 

폴라타입도 비슷하다.

 

레이더 타입은 조금 다르게

각각의 라벨별로 데이터 배열이 있어야된다.

출처: https://yeahvely.tistory.com/6 [나홀로 쿠킹]

출처: https://yeahvely.tistory.com/6 [나홀로 쿠킹]

출처: https://yeahvely.tistory.com/6 [나홀로 쿠킹]