[jquery] 무료차트(chart) 추천 - billboard

괜찮은 API 가 있어서 소개합니다. 

이전부터 차트를 쓸 때마다 무료차트를 찾아다녔는데 마땅한걸 찾지 못해서 매번 구글 Chart를 썼는데요, 
네이버에서 새로운 Chart를 오픈소스로 내놓아 써봤는데 좋네요.

billboard.js  

깃 주소: https://github.com/naver/billboard.js 

차트종류 및 적용방법 등을 보실때는 여기를 참조하세요. 
차트 샘플: https://naver.github.io/billboard.js/demo/#Axis.AdditionalYAxis 

색상, 라벨을 변경할 때에는 아래 도큐멘트를 참조하세요. 
차트 옵션: https://naver.github.io/billboard.js/release/latest/doc/index.html

특이하게 샘플을 바로 확인할 수 있는 페이지도 오픈되어 있습니다. 
아래 사이트가서 옵션들을 클릭하거나 데이터를 넣고 빼면서 연습을 할 수 있습니다. 
https://naver.github.io/billboard.js/playground/ 

차트 종류는 다음처럼 있습니다

# 플러그인 로드

총 3개를 참조시켜야 합니다 
이중에 billboard.css 와 billboard.js 은 다운받아서 경로에 넣어주면 됩니다.

# 적용하기

마우스를 올리면 레이블로 설명이 나옵니다.

# 간단한 옵션 변경하기.

var chart = bb.generate({
    bindto: "#chart",
    data: {
        columns: [
            ["data1", 30, 200, 100, 400, 150, 250]
        ],
        type: "bar",            // 차트 종류를 변경
        colors:{
            "data1": "red"      // data1 의 색상을 변경
        }
    }
});

아래 이미지는 실제 서비스에 적용한 것들 입니다.

사용하기도 간단하고 옵션을 주는것도 직관적이고 좋아서 쓰게 되었네요.

차트 플러그인 찾고 계신다면 이것한번 써보시는 걸 추천합니다.