728x90
안녕하세요. 이번 시간에는 C3.js라는 라이브러리를 활용해서 간단하게 차트를 그리는 방법에 대해 알아보겠습니다.
우선 C3.js 사용을 위해 head에 다음과 같은 CDN 코드를 추가해주세요.
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/c3@0.7.20/c3.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.min.css"/>
아래의 예제는 일주일간의 최저기온과 최고기온을 꺾은선을 통해 표시하는 차트를 그린 코드입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- c3.js을 위해 필요한 sciprt와 css (CDN 사용) -->
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/c3@0.7.20/c3.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.min.css"/>
</head>
<body>
<div id="chart"></div>
<script>
const data = { // 그래프를 그리기 위한 데이터 (여기서는 최저/최고 온도)
columns: [
['최저', 8, 12, 10, 7, 8, 11, 14],
['최고', 22, 19, 25, 18, 15, 18, 22]
]
};
const chart = c3.generate({
data: data,
bindto: '#chart', // 그래프를 렌더링할 DOM 요소
axis: { // X 축과 Y축에 대한 설정
x: {
label: 'Day', // X 축의 라벨
type: 'category', // 데이터의 종류 (서로 비교가 불가능한 범주형 데이터(category)인지 아니면 시간처럼 순서가 있는 연속적인 데이터인지. 여기서 요일은 범주형 데이터이므로 category)
categories: ['월', '화', '수', '목', '금', '토', '일'] // 데이터의 이름
},
y: {
label: '(℃)' // y 축의 라벨
}
},
size: { // 차트의 가로 및 세로 길이 지정
width: 800,
height: 400
}
});
</script>
</body>
</html>
결과 이미지입니다. 그림처럼 차트에 특정 위치에 마우스 커서를 갖다댈 경우 해당 데이터에 대한 정보가 표시됩니다.
꺾은선 외에도 다양한 모양의 차트를 지원하며 아래와 같이 서로 다른 모양의 두개 이상의 차트를 한번에 표시할 수도 있습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- c3.js을 위해 필요한 sciprt와 css (CDN 사용) -->
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/c3@0.7.20/c3.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.min.css"/>
</head>
<body>
<div id="chart"></div>
<script>
const data = { // 그래프를 그리기 위한 데이터 (여기서는 최저/최고/평균)
columns: [
['최저', 8, 12, 10, 7, 8, 11, 14],
['최고', 22, 19, 25, 18, 15, 18, 22],
["평균", 16, 18, 22, 12, 14, 19],
],
// 각 데이터의 type을 지정
types: {
// 최저, 최고의 경우 line 차트, 평균의 경우 bar 차트로 지정
최저 : "line",
최고 : "line",
평균 : "bar"}
};
const chart = c3.generate({
data: data,
bindto: '#chart', // 그래프를 렌더링할 DOM 요소
axis: { // X 축과 Y축에 대한 설정
x: {
label: 'Day', // X 축의 라벨
type: 'category', // 데이터의 종류 (서로 비교가 불가능한 범주형 데이터(category)인지 아니면 시간처럼 순서가 있는 연속적인 데이터인지. 여기서 요일은 범주형 데이터이므로 category)
categories: ['월', '화', '수', '목', '금', '토', '일'] // 데이터의 이름
},
y: {
label: '(℃)' // y 축의 라벨
}
},
size: { // 차트의 가로 및 세로 길이 지정
width: 800,
height: 400
}
});
</script>
</body>
</html>
위의 예제에서는 평균 기온을 추가한 뒤 평균 기온의 경우 bar 형태로 표시되게 처리하였습니다. 위 코드에서 보다시피 data의 types 에서 원하는 모양의 차트를 설정해 줄 수 있습니다.
s3.js에서는 그 외에도 원형, 산포도, 영역 차트등 다양한 형태의 차트를 지원합니다.
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
'JavaScript' 카테고리의 다른 글
| [JavaScript] 텍스트 더보기 및 줄이기 구현하기 (0) | 2023.07.14 |
|---|---|
| [javaScript] contenteditable 속성으로 row 수정,저장하기. (0) | 2023.07.09 |
| [Javascript] target 속성과 closest() 함수를 조합하여 ui 선택하기 (0) | 2023.06.14 |
| [javascript] keyup 사용하여 테이블 검색 기능 만들기 (0) | 2023.06.09 |
| [Javascript] BroadcastChannel 를 사용해서 탭 간 메세지 주고받기 (0) | 2023.06.07 |
