[차트 플러그인] c3.js 시작하기 사용법 및 옵션

차트를 그릴 때 좋은 c3.js의 사용법과 옵션 등에 대해 알려드리겠습니다.

d3를 기반의 플러그인입니다.

chart의 font-family color 등 여러가지 항목들을 css로 커스텀이 가능해서

무료 차트중에서는 확장성이 높은편입니다.

 

 

01. c3 설치

https://github.com/c3js/c3/releases/tag/v0.7.20

Release v0.7.20 · c3js/c3

C3의 깃허브에서 c3를 설치해줍니다.

 

 

02. JS/CSS 추가

아래의 코드는 c3 css와 js파일 cdn입니다.

다운받아서 사용하거나 cdn링크를 추가시켜줍니다.

 

[css]

<!-- C3 css 추가 -->     
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.min.css"/>

[js]

<!--d3 c3 js추가 -->
<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>

js를 추가할때 주의사항은 d3도 꼭 함께 추가해주어야 합니다.

 

 

 

03. HTML

<div class="tn_chrat">
</div>

차트를 담을 div에 class를 지정해줍니다.

 

 

04. js

var chart = c3.generate({
			bindto: '.tn_chrat',
			data: {
				columns: [
					['이용자 평균점수', 30, 90, 30, 40, 10, 15], //차트명, 차트별 value
					['진단결과', 50, 100, 40, 50, 20, 45],
				],
				type: 'bar', //차트타입
				colors: {
					'이용자 평균점수': '#9a9a9a', //차트의 color
					'진단결과': '#f73718'
				}
			},
			grid: {
				y: {
					show: true // 선여부
				},
			},
			bar: {
				width: {
					ratio: 0.3
				}
			},
			axis: {
				x: {
					type: 'category', //그룹 막대일 때 지정
					categories: ['종합', '필요성', '태도', '신념', '심리상태', '기술'],
				},
				y: {
					max: 100, //최대값
					min: 0, //최소값
					padding: {
						top: 0,
						bottom: 0
					},
					tick: {
						count: 6
					}
				},

			},
			tooltip: { // 툴팁 여부
				show: false
			},
			legend: { //범례여부
				show: false
			},
			padding: {
				bottom: 20,
				top: 20
			}


		});

 

 

05. CSS

.tn_chart .c3-axis-y .domain {stroke-width: 0px;}
.tn_chart  text{font-family: 's-core_dream4_regular';font-size: 1.6rem;fill: #666;}
.tn_chart .c3 path, .tn_chart_wrap .c3 line{stroke:#c7cee1}
.tn_chart .c3-axis-y line{stroke:#fff}

sgv형태로 그래프가 만들어지기때문에,

개발자모드로 class명을 확인하면서 css로 간단하게 수정이 가능합니다. :)

 

컬러는 fill, line의 컬러는 보통 stroke로 css를 지정해줍니다.

 

 

05. 결과

위의 예제는 그룹 막대차트입니다.