가성비 차트 라이브러리 『billboard.js 2.0』

billboard.js는 D3기반의 자바스크립트& TypeScript 차트 라이브러리다.

최근 billboard.js는 typescript로 작성한 2.0버전을 출시했다. 2.0버전은 자바스크립트로 제작된 1.0의 리팩토링 버전이며, 속도면에서 향상된 성능을 기대할 수 있다. 

billboard.js 장점

---

현재 많이 사용되는 차트 & 테이블 라이브러리는 대략 11~12 정도이다. billboard.js의 경우 속도, 모바일, 학습곡선, 업데이트 등 모든 항목에서 상위권(3위 내)에 속한다. 가장 빠른 차트 라이브러리는 chartist라 할 수 있지만 학습곡선이 가파르고, 특정 분야(증권 데이터 분석)에 집중되어 있다. 

반면, billboard.js는 다양한 분야에 접목할 수 있으면서, 빠르고 가볍다. 한 분야에 특화되어 있지 않지만 무난하면서도 빠른 차트 라이브러리를 원한다면 billboard.js가 적합하다.

설치

---

billboard.js 설치는 npm, cdn, 직접설치 모두 가능하다. 

billboard.js 설치 : https://github.com/naver/billboard.js

CDN방식으로 설치할 때는 순서에 유의해야 하는데, D3.js → billboard.css → billboard.js순으로 코드를 입력한다. CDN관련 소스는 아래 CDN 사이트를 참고하자.

https://cdnjs.com/libraries/billboard.js

https://pagecdn.com/lib/billboardjs

<!-- 1) Load D3.js and billboard.js separately -->
    <!-- Load D3 -->
    <script src="https://d3js.org/d3.v5.min.js"></script>

    <!-- Load billboard.js with base(or theme) style -->
    <link rel="stylesheet" href="$YOUR_PATH/billboard.css">
    <script src="$YOUR_PATH/billboard.js"></script>

<!-- 2) or Load billboard.js packaged with D3.js -->
    <link rel="stylesheet" href="$YOUR_PATH/billboard.css">
    <script src="$YOUR_PATH/billboard.pkgd.js"></script>

실행

---

차트와 관련된 문서는 관련 API항목에서 알 수 있다.

https://naver.github.io/billboard.js/demo/#Chart.BarChart 

api문서를 토대로 간단한 막대바 차트를 만들어보자. 

먼저 HTML코드를 입력한다.

<div id="barChart"></div>

<script>부분은 정말 간단하다. 낮은 학습곡선을 갖는 라이브러리다운 흐름을 보여준다. 

<script>

var chart = bb.generate({

  data: {

    columns: [

    ["data1", 30, 200, 100, 400, 150, 250],

    ["data2", 130, 100, 140, 200, 150, 50]

    ],

    type: "bar"

  },

  bar: {

    width: {

      ratio: 0.5

    }

  },

  bindto: "#barChart"

});

setTimeout(function() {

    chart.load({

        columns: [

            ["data3", 130, -150, 200, 300, -200, 100]

        ]

    });

}, 1000);

</script>

bb.generate()메서드에 data값이 있는 객체를 넘김으로써 간단하게 차트를 생성할 수 있다. setTimeout()메서드를 통해 특정 칼럼의 데이터를 늦게 띄울 수 있다는 부분(위에서는 1초)이 특이하다. 그리고 기존의 <div>태그의 id값과 겹치는 경우, bindto속성을 통해 id값을 변경할 수 있다. 

[실행결과]

결론

---

billboard.js을 한단어로 표현하자면 '가성비'다. 

2~3mb 라이브러리 못치않은 '多 기능'과 '속도'가 필요할 때 요긴하게 사용할 수 있다. 분야를 막론하고 두루두루 사용할 수 있는 팔방미인같은 차트 라이브러리가 billboard.js이다.