2017-09-21

필자는 개인적으로 C3 차트를 매우 자주 이용 하는 편이다.
하지만, 이 블로그에 C3 차트 관련 글을 1개 뿐이라는걸 최근 발견했다.
아마.. 자주 이용하는 만큼 잘 안 잊어버리는 데다가, C3는 예제도 잘 되어 있어서 딱히 이곳에 적어 놓을 필요가 없었던 것 같다.
그래도, 언젠간 잊어버릴지 모를 내용들이니, 이곳에 간단하면서 자주 쓰는 예제를 적어놓을 생각이다.

우선 C3는 D3기반이기 때문에, C3를 사용하기 위해서는 D3도 필요하다.
아래는 C3를 사용하기 위한 파일 3개이다.
C3 CSS파일 - c3.css
D3 JS파일 - d3.js
C3 JS파일 - c3.js


//----- 2017.09.21 기본차트

<div id="chart1"></div>

<script>
bar_chart1 = c3.generate({
	bindto: '#chart1'
	,data: {
		x: 'x'
		,columns: [
			['x', '2017-09-20', '2017-09-21', '2017-09-22', '2017-09-23', '2017-09-24']
			,['데이터', 1233, 243, 364, 675, 736]
		]
		,type:'line'
		,colors: {
			'데이터': '#F39C12'
		}
	}
	,axis : {
	x : {
			type : 'timeseries',
			tick: {
					format: '%Y-%m-%d %H:%M:%S'
			}
		}
	}

});
</script>

//----- 2017.09.21 복합차트

<div id="chart2"></div>

<script>
bar_chart1 = c3.generate({
	bindto: '#chart2'
	,data: {
		x: 'x'
		,columns: [
			['x', '2017-09-20', '2017-09-21', '2017-09-22', '2017-09-23', '2017-09-24']
			,['데이터1', 1233000, 243000, 364000, 675000, 736000]
			,['데이터2', 133000, 2143000, 564000, 275000, 1736000]
			,['확률1', 34, 23, 64, 75, 36]
		]
		,axes: {
			'확률1': 'y2'
		}
		,types: {
			'데이터1': 'bar'
			,'데이터2': 'bar'
			,'확률1': 'line'
		}
		,colors: {
			'데이터1': '#F39C12'
			,'데이터2': '#008D4D'
			,'확률1': '#0000ff'
		}
	}
	,axis : {
		x : {
			type : 'timeseries',
			tick: {
					format: '%Y-%m-%d'
			}
		}
		,y: {
			label: {
				text: '데이터(원)',
				position: 'outer-middle'
			}
			,tick: {
				format: d3.format(",")
			}
		}
		,y2: {
		show: true,
			label: {
				text: '확률(%)',
				position: 'outer-middle'
			}
		}
	}

});
</script>