[JS] c3.js 차트 라이브러리 사용법

* c3 차트 라이브러리 : d3.js를 베이스로한 차트 생성 라이브러리

- D3.js는 데이터를 기반으로 문서를 조작하기 위한 자바스크립트 라이브러리다.

 

- c3 차트 라이브러리 사용법

1. 설치

- c3 차트 라이브러리를 관련 사이트(https://github.com/c3js/c3/releases/latest)에서 다운로드 후, 스크립트 및 css 로딩

<!-- Load c3.css -->

<link href="/path/to/c3.css" rel="stylesheet">

 

<!-- Load d3.js and c3.js -->

<script src="/path/to/d3.v5.min.js" charset="utf-8"></script>

<script src="/path/to/c3.min.js"></script>

 

* c3 차트 라이브러리는 d3 라이브러리에 의존적이므로 d3 라이브러리도 같이 로딩할 수 있도록 한다.

 

2. 차트 생성방법

c3 차트는 generate() 라는 함수로 생성 가능

차트를 표시하기 위한 div 생성 후 generate 함수 호출 (div에 chart 바인딩)

 

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

And, call generate() with arguments:

 

var chart = c3.generate({

    bindto: '#chart',

    data: {

      columns: [

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

        ['data2', 50, 20, 10, 40, 15, 25]

      ]

    }

});

 

여기서 chart라고 선언된 변수에 다양한 api를 입혀서 사용할 수 있다.

c3.js 홈페이지에 적혀있는 api들은 모두 사용할 수 있으므로 홈페이지를 참조하여 사용하면 누구나 쉽게 차트 라이브러리를 사용할 수 있다.