[D3.js] C3.js로 쉽게 차트 만들기
- C3.js 홈페이지 : https://c3js.org/
- 다운로드 : https://github.com/c3js/c3/releases/tag/v0.6.8
지난 시간에 C3.js 라이브러리를 소개했었는데 잠깐 잠깐 공부해 봤는데 무지 간단하네요. 오늘은 C3.js을 이용하여 다양한 차트를 쉽게 만들어보는 실험을 하겠습니다. C3.js 공부를 하는 것은 아니고 이렇게 쉽게 차트가 만들어진다는 것만 보여드리려고 합니다. 하나의 기준 코딩에서 각 차트가 얼마나 쉽게 만들어지는지 이제 살펴 봅시다.
1. 기본 베이스 차트
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="c3.min.js"></script>
<link href="c3.css" rel="stylesheet">
위 링크 c3.min.js와 c3.css 파일은 다운로드 받으셔서 차트가 보여질 위치에 맞게 배치하시면 됩니다.
[기본차트]
<body>
<div id="chart"></div>
<script>
var chart = c3.generate({
data: {
columns: [
['data1', 100, 300, 200, 400, 500],
['data2', 10, 30, 20, 40, 50]
]
}
});
</script>
</body>
차트는 기본 메인함수가 c3.generate()함수이고 이 안에 차트의 속성을 지정하거나 데이터를 삽입하면 지정된 속성과 데이터값에 따라 자동으로 차트가 만들어 집니다.
[결과]
디폴드 차트가 라인차트네요.
다양한 기교을 넣어 차트를 만드는 것이 목적이 아니라 차트가 얼마나 간단히 만들어지는지 보여주기 위하기 때문에 위 기본 차트 코딩을 기준으로 여러개의 차트를 만드어 보겠습니다.
2. 다양한 차트
차트 지정은 data 속성에서 지정합니다.
[ data.type ] : type 속성 값을 출력하고자 하는 차트는 지정만 해주면 됩니다.
- line
- spline
- step
- area
- area-spline
- area-step
- bar
- scatter
- pie
- donut
- gauge
위의 차트 종류를 나열했는데 type 속성값을 해당 차트 네임을 지정하면 입력데이터 값을 해당 차트형태로 출력하게 됩니다. 무지 간단하죠.
그러면 어떻게 출력되는지 볼까요.
var chart = c3.generate({
data: {
columns: [
['data1', 100, 300, 200, 400, 500],
['data2', 10, 30, 20, 40, 50]
],
type: '차트명'
}
});
위 코딩을 보시는 것처럼 type 코딩을 하고 차트 이름만 지정하면 됩니다. 전부 다 할 수 없으니 몇개만 출력 해볼께요.
1) bar Chart
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="c3.min.js"></script>
<link href="c3.css" rel="stylesheet">
<body>
<div id="chart"></div>
<script>
var chart = c3.generate({
data: {
columns: [
['data1', 100, 300, 200, 400, 500],
['data2', 10, 30, 20, 40, 50]
],
type: 'bar'
}
});
</script>
</body>
[결과]
2) area-spline Chart
<script>
var chart = c3.generate({
data: {
columns: [
['data1', 100, 300, 200, 400, 500],
['data2', 10, 30, 20, 40, 50]
],
type: 'area-spline'
}
});
</script>
[결과]
3) step Chart
<script>
var chart = c3.generate({
data: {
columns: [
['data1', 100, 300, 200, 400, 500],
['data2', 10, 30, 20, 40, 50]
],
type: 'step'
}
});
</script>
[결과]
4) pie Chart
<script>
var chart = c3.generate({
data: {
columns: [
['data1', 100, 300, 200, 400, 500],
['data2', 10, 30, 20, 40, 50]
],
type: 'pie'
}
});
</script>
[결과]
5) donut Chart
<script>
var chart = c3.generate({
data: {
columns: [
['data1', 100, 300, 200, 400, 500],
['data2', 10, 30, 20, 40, 50]
],
type: 'donut'
}
});
</script>
[결과]
6) gauge Chart
<script>
var chart = c3.generate({
data: {
columns: [
['data1', 100, 300, 200, 400, 500],
['data2', 10, 30, 20, 40, 50]
],
type: 'gauge'
}
});
</script>
[결과]
7) scatter Chart
<script>
var chart = c3.generate({
data: {
columns: [
['data1', 100, 300, 200, 400, 500],
['data2', 10, 30, 20, 40, 50]
],
type: 'scatter'
}
});
</script>
[결과]
마무리
type을 기준으로 입력된 데이터값을 다양한 차트로 만들어지죠. 실험한 차트 외에도 차트 목록에 있는 종류들이 더 있지만 이정도만 post로 올렸네요. 전부하면 너무 길어지니깐 최대한 기본 종류들은 다 나열 했네요.
이렇게 간단히 다양한 차트를 표현 할 수 있고요. 여기에 각 속성들을 더 지정하면 축이나 데이터 표시나 차트의 각각을 디테일적으로 변경 할 수 있는데 이부분은 래퍼런스를 보고 하시거나 C3.js 홈페이지에 나와 있는 예제를 전부 돌려보면서 예제 속 함수들이 있는데 예제 코딩을 보면서 공부하셔도 될 듯 싶네요.
딱 한줄 type: '차트명'만 코딩하면 원하는 차트로 출력이 되니 엄청 편리하죠. 한번 C3.js로 공부하셔서 차트를 실전에 적용해보셔도 좋을 듯 싶네요.