0. 시작하기 / 기본 구조 / 라인 차트 Line chart
우선 소스 파일을 추가해주어야 한다. 우선 c3가 기본으로 제공하는 디자인 형식인 c3.min.css 파일을 <head> 부분에 추가한다. 그리고 c3.js는 d3.js 기반에서 돌아가므로 d3.min.js를 먼저 자바스크립트 파트에 추가해 준 뒤에 c3.min.js를 추가하면 될 것이다. CDN을 이용해서 간편하게 사용하겠다면 다음과 같이 추가하면 될 것이다.
<head>
<!-- stylesheet -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.min.css"/>
</head>
<body>
<!-- javascript -->
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.min.js"></script>
</body>유의할 점은, 현재 c3가 d3 버젼 v3에서 잘 작동한다는 점. 현재 d3는 v4 버젼이 업데이트 되어있으나 c3는 아직 최신 버젼을 지원하지 못하는 듯 하다.
그럼 이제 가장 간단한 c3 라인 차트부터 시작해보자.
c3의 모든 차트는 c3.generate 함수로 생성된다. bindto를 통해서 꼭 내가 차트를 넣고자 하는 DOM 요소의 선택자 (예를 들어 id 라던가, class 라던가, id 라던가)를 꼭 입력해주어야 한다. 우리가 시각화하고자 하는 자료를 c3가 원하는 형식에 맞게 data 요소에 입력해주면 되는데, columns, rows, json 등의 데이터 입력 형식을 지원한다. 하지만 당신의 정신 건강을 위해서 columns 양식에 맞게 데이터를 입력해 줄 것을 강력히 권한다. c3.js의 예제가 모두 columns 데이터 만을 다루고, 그 외 데이터 형식에 대한 자료는 쉽게 익히기 어렵기 때문이다.
아무런 추가 옵션이 없으면 c3는 라인 차트를 그려준다. 이제 다른 종류의 그래프를 그려보자.
1. 영역 차트 Area chart
참 쉽게도 data 구조 안의 types 라는 옵션을 적어주면 된다. 이것을 응용해서 조금 더 어려운 영역 차트를 다음과 같이 만들 수 있다.
lower의 아래 영역 색깔을 배경색과 일치시키면 상한선과 하한선 사이의 영역을 칠해주는 그래프로 변모하게 된다. CSS를 통해서 c3-area라는 클래스의 투명도를 반드시 1로 설정해주어야 영역 색깔이 서로를 덮어줄 수 있기 때문에 가능한 일이다. 또한 데이터의 순서가 매우 중요하다. 늦은 순서의 column이 빠른 순서의 column을 덮을 것이기 때문이다. 예를 들어 data가 첫 번째이고 upper가 두 번째라면, 그리고 c3-area의 투명도가 1이기 때문에, 검은색의 data 라인은 upper 영역에 가려져 보이지 않을 것이다.
legend와 point라는 상위 레벨의 옵션(bindto, data와 동급)이 있음을 알아두자. 여기서는 범주와 점을 보이지 않게 하는 간단한 show 옵션을 설정했다.
2. 파이/도넛 차트 Pie/Doughnut chart
파이 차트와 도넛 차트의 사용법은 똑같기 때문에, 여기서는 도넛 차트로만 설명을 하겠다.
여기서는 특별히 json 형식의 data를 주었다. 그리고 keys 요소에 라벨 리스트를 연결해주면 된다. 하지만 굳이 이럴 필요는 없고 columns 형식에 잘 맞춰서 사용하시길 다시 한 번 권한다. 우리가 원하는 그래프의 형식이 donut임을 알려주면 되는데, 위의 예제와는 다르게 data의 개수가 하나이므로 단수형인 type으로 설정한 것을 유의하길 바란다.
그래프가 잘 만들어진 이후에, c3 api를 이용해서 그 그래프에 연결된 많은 사항에 연결할 수 있다. 여기서는 색깔 정보를 가져와서 차트 바깥 영역에서 사용할 수 있음을 보였다.
3. 막대 차트 + 영역 차트 Bar + Area chart
막대 차트의 예시를 들려고 하는데, 내가 준비한 내용이 단순하기 때문에 다른 종류의 그래프와 섞어서 한 번에 보여주는 것을 해보겠다. c3에서는 이렇게 여러 종류의 차트를 섞는 것이 매우 쉽게 이뤄진다.
data 옵션의 types를 내가 원하는 종류에 맞게 설정해주기만 하면 하나의 차트에 여러 종류의 그래프를 넣을 수 있다. year 데이터를 x 축으로 설정하고 x 축의 종류를 범주형(category)으로 설정한 부분과 막대 그래프의 폭을 0.2 (20%)로 설정한 부분을 알아두자.
4. 산포도/버블차트 Scatterplot/Bubble chart
마지막으로 산포도, scatterplot을 정리하고, 그 응용으로 버블 차트를 그리겠다.
첫 번째 산포도는 c3 예제를 그대로 가져온 것이고, 이미 위에서 기본적인 사항은 소개했으니 설명을 생략하겠다. 이 산포도를 기반으로 버블 차트를 만드려면 버블의 크기를 조정하기만 하면 된다. 그리고 그 크기 조정은 point 옵션의 r 요소를 함수로 설정하면 되는데, 이 함수가 다루는 d라는 친구는 세 가지 정보에 접근할 수 있다: x 값 (d.x), y 값 (d.value), 순서 값 (d.index). 따라서 각 버블의 크기를 따로 조정하기 위해서 dataRadius라는 array에 내가 원하는 값을 집어넣고, 이를 d.index를 통해 접근하도록 하였다.
이 외에도 많은 옵션을 조정할 수 있으니 자신이 원하는 그래프를 만들기 위해서는 많은 검색이 필요할 것이다. 또한 load, unload를 통해서 입력 데이터를 바꿀 수 있으니 필요한 경우 아래 참조 링크를 보는 것을 추천한다.
참조 링크
c3.js 공식 페이지: 기초적인 사용법과 많은 예제, 많은 옵션과 api 사용법을 알려준다.
http://c3js.org/
파이 차트의 json 데이터 사용법
http://stackoverflow.com/questions/30886203/pie-chart-from-json-using-c3-js
버블 차트의 버블 크기 조절법
http://stackoverflow.com/questions/38991954/c3-js-changing-scatterplot-radius-via-another-data-source
데이터 바꿔치기
http://stackoverflow.com/questions/35248099/how-to-swap-out-data-via-unload-and-load-in-c3-js
'Programming > Front-end' 카테고리의 다른 글
| 효과적인 코드 시각화, highlight.js (0) | 2016.11.28 |
|---|---|
| MathJax: 웹에서 Latex 수식을 쓰자 (0) | 2016.09.03 |
| Bootstrap 기반 티스토리 스킨: 첫 작업 기록 (4) | 2016.08.21 |
| Bootstrap container 폭 넓이 조정 (0) | 2016.07.30 |
| Bootstrap modal 사이즈 및 위치 조절 (19) | 2016.03.22 |