billboard.js 를 이용한 차트 그리기

billboard.js

---

네이버에서 제공해주는 차트 라이브러리이다. 네이버에서 billboard.js외에 egjs도 제공해주기에 한번 사용해보면 좋을거같다.

billboard.js는 D3 v4+ 를 기반으로 만들어진 라이브러리이다.

본문 : https://naver.github.io/billboard.js/

사용법

---

1. billboard.js와 D3.js를 로딩한다.

<!-- Load D3.js -->
<script src="https://d3js.org/d3.v4.min.js"></script>
 
<!-- Load billboard.js with style -->
<script src="billboard.js"></script>
<link rel="stylesheet" href="billboard.css">

2. 차트를 넣을 영역을 셋팅한다.

<div id="chart"></div>

3. 차트의 옵션을 작성한다.

var chart = bb.generate({
    bindto: "#chart",
    data: {
        type: "bar",
        columns: [
            ["data1", 30, 200, 100, 170, 150, 250],
            ["data2", 130, 100, 140, 35, 110, 50]
        ]
    }
});

4. 끝

위와 같이 따라하면 이런 그림이 나온다고 한다.

위에는 billboard.js에서 제공해주는 문서를 그대로 가져온것인데 매우 간단하다.

오픈소스가 성장하면서 빠르게 개발할 수 있는 다양한 라이브러리를 활용하는 것도 좋을거같다.

추가로 더많은 API를 활용하여 다양한 그래프를 그릴 수도 있다.  ( https://naver.github.io/billboard.js/release/latest/doc/ )