쇼핑몰 관리자를 작업중인데, 대시보드에 매출이나 회원 등의 수치 변화를 나타내는 그래프를 표시해주어야 했다.
예전 작업에서 사용했던 c3.js가 생각나서 사용해보기로 했다.
시작하기
일단 아래 깃허브 링크에서 c3.js를 다운받는다.
https://github.com/c3js/c3/releases/tag/v0.7.20
Release v0.7.20 · c3js/c3
Changes Fix config subchart_axis_x_show (#2806) Fix pan of y-axis when zoomed and rotated=true #2799 (#2805)
github.com
서버에 올리고, 아래처럼 <head></head>사이에 추가해준다.
|
1
2
3
4
5
6
|
<!-- Load c3.css -->
<link rel="stylesheet" type="text/css" href="./css/c3.min.css">
<!-- Load d3.js and c3.js -->
<script type="text/javascript" src="./js/d3.v5.min.js"></script>
<script type="text/javascript" src="./js/c3.min.js"></script>
|
cs |
c3는 d3기반으로 이루어져 있다. d3.js도 함께 불러와야한다.
다운로드 받는게 싫다면, 아래처럼 cdn으로 불러와도 된다.
|
1
2
3
4
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.min.css"/>
<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>
|
cs |
HTML
차트를 불러올 영역을 작성한다. id나 class만 등록해주면된다.
Javascript
1. 기본 그래프
가장 기본적인 그래프를 만들기 위해 아래와 같은 방식으로 작성한다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<script>
var chart = c3.generate({
bindto: '#Chart',
data: {
columns: [
['Data1', 45, 42, 44, 150, 32, 10], //제목, 데이터
['데이터2', 10, 20, 35, 25, 60, 55],
],
colors: {
'Data1': '#ff8888', // 각 차트 색상
'데이터2': '#165783'
}
},
size: { height: 280 } // 차트 크기
});
</script>
|
cs |
bindTo에 html에서 만든 div의 id를 등록하고, data에 그래프로 노출시킬 값들을 넣어준다.
columns의 각 배열에서 첫번째 값은 각 그래프의 제목이 된다.
그래프 종류를 설정하지 않으면 선그래프로 나온다.
2. 막대 그래프
data안 type에 차트 종류를 지정한다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<script>
var chart = c3.generate({
bindto: '#Chart',
data: {
columns: [
['Data1', 45, 42, 44, 150, 32, 10], //제목, 데이터
['데이터2', 10, 20, 35, 25, 60, 55],
],
type: 'bar', // 차트 종류
colors: {
'Data1': '#ff8888', // 각 차트 색상
'데이터2': '#165783'
}
},
size: { height: 280 } // 차트 크기
});
</script>
|
cs |
3. 그래프 혼용
각 데이터를 다른 형태로 보여주고 싶을땐 types로 각각 지정해준다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<script>
var chart = c3.generate({
bindto: '#Chart',
data: {
columns: [
['Data1', 45, 42, 44, 150, 32, 10], //제목, 데이터
['데이터2', 10, 20, 35, 25, 60, 55],
],
types:{ // 차트 종류
"Data1": 'spline',
"데이터2": 'bar'
}
colors: {
'Data1': '#ff8888', // 각 차트 색상
'데이터2': '#165783'
}
},
size: { height: 280 } // 차트 크기
});
</script>
|
cs |
4. 눈금 표시
눈금이 필요할 경우, grid에 필요한 x축 y축을 추가하여 표기한다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<script>
var chart = c3.generate({
bindto: '#Chart',
data: {
columns: [
['Data1', 45, 42, 44, 150, 32, 10], //제목, 데이터
['데이터2', 10, 20, 35, 25, 60, 55],
],
types:{ // 차트 종류
"Data1": 'spline',
"데이터2": 'bar'
},
colors: {
'Data1': '#ff8888', // 각 차트 색상
'데이터2': '#165783'
}
},
size: { height: 280 }, // 차트 크기,
grid: {
x:{ show: !0 },
y: { show: !0 }
}
});
</script>
|
cs |
기타 차트 옵션 사용하기
이 외에 원형, 도넛형 등의 다른 차트와 기타 옵션은 아래 c3.js의 공식 사이트를 참고하면 된다.
https://c3js.org/examples.html
C3.js | D3-based reusable chart library
Number Format Localization Number format localization using D3 locale settings. View details »
c3js.org
c3.js 차트에 DB 연동
그리고 아래는 ajax이용해서 c3라이브러리에 디비 테이블 연결한 내용..
보통 차트는 값을 DB에서 받아와서 쓰니까 기록해 봄.
https://vivacolor96.tistory.com/70
javascript ) c3.js 차트에 데이터 연동하기 (ajax + php + mysql)
c3.js 설치 및 기본 사용법은 아래 링크 참고 https://vivacolor96.tistory.com/68 javascript ) c3.js를 이용한 차트 표시 쇼핑몰 관리자를 작업중인데, 대시보드에 매출이나 회원 등의 수치 변화를 나타내는 그
vivacolor96.tistory.com
'개발 > Javascript' 카테고리의 다른 글
| javascript ) c3.js 차트에 데이터 연동하기 (ajax + php + mysql) (0) | 2023.12.11 |
|---|---|
| javascript ) 스와이퍼 라이브러리 다음 페이지로 이동 (0) | 2022.05.20 |
| Javascript) 정규식 모음 (0) | 2022.04.01 |