[API]차트생성 - Chart.js

[API] Chart.js

 

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

여러 무료 api를 찾던중

디자인과 기능이

젤 맘에들어서 사용해본

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

http://www.chartjs.org

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

시작해보자.

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

나는 걍 CDN을 이용한다.

차트를 만들자.

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

꼭 id를 넣자.

기본 사용틀이다.

기본 폰트 셋팅이다.

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

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

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

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

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

나는 아직 해보진 않음.

 

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

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

바 차트는 익숙한 형태

사용법도 쉬움.

기본틀에서 벗어나지 않음

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

Line타입도 만만찮게 쉬움.

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

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

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

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

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

폴라타입도 비슷하다.

레이더 타입은 조금 다르게

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

생각보다 설명을 자세히 쓸수가 없구먼...

데이터 한두개 정도로 만드는건 쉽지만

여러개일 때 좀 손이 많이간다.

그리고 프로그램을 짜다보면

같은 데이터로 다른 타입의 차트를 생성하고싶을 때가 있는데

Bar,Line 타입

Pie,Douhnut,Polar타입

Radar타입

이렇게 3가지로 분류해서 데이터를 조물딱 거리면 된다.

나는 배열을 가지고 놀기엔 하수라 고생좀 했지만....

첨엔 이런걸 시키다니 욕나왔지만

하다보니 재밌기도 하고

소스 손봐서 다시 만들고 싶다. 

소스 넘 더럽.....ㅠㅠ