📅 날짜: 2025-02-21
📌 개념 정리
Chart.js는 JavaScript로 인터랙티브한 차트를 생성하는 라이브러리이다.
- 다양한 차트 유형 지원 (
bar,line,pie,doughnut등). datasets을 활용하여 그래프의 색상, 데이터 값을 지정할 수 있음.scales옵션을 사용하여 Y축의 최소값과 최대값을 조정 가능.- 막대 그래프 (Bar Chart) 를 생성하여 데이터를 효과적으로 시각화할 수 있음.
📌 코드 원본 (전체 코드 포함)
📝 HTML 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chart.js Example</title>
<!-- Chart.js CDN -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
.chart-container {
width: 800px;
height: 500px;
margin: 0 auto;
border: 1px solid;
}
</style>
</head>
<body>
<!-- Chart.js를 적용할 캔버스 요소 -->
<div class="chart-container">
<canvas id="myChart"></canvas>
</div>
<script>
// ✅ 1. 차트를 그릴 캔버스 요소 선택
const ctx = document.getElementById('myChart');
// ✅ 2. 차트 데이터 설정
let data = {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: 'TEST_LABEL', // 데이터 설명 라벨
data: [12, 19, 3, 5, 2, 3], // 각 항목의 데이터 값
borderWidth: 1, // 테두리 두께
backgroundColor: [ // 막대 그래프 색상
'red', 'orange', 'yellow', 'green', 'blue', 'navy'
],
borderColor: [ // 막대 테두리 색상
'black', 'black', 'black', 'black', 'black', 'black'
],
}]
};
// ✅ 3. 차트 옵션 설정
let options = {
scales: {
y: {
beginAtZero: true, // Y축을 0부터 시작하도록 설정
max: 100, // Y축 최대값 설정
min: 0, // Y축 최소값 설정
ticks: {
stepSize: 10 // 눈금 간격 설정
}
}
}
};
// ✅ 4. 차트 생성
new Chart(ctx, {
type: 'bar', // 'bar': 막대 그래프, 'line': 선 그래프, 'pie': 원형 그래프 등
data: data,
options: options
});
</script>
</body>
</html>📌 설명
1. 캔버스 요소 선택 (document.getElementById('myChart'))
Chart.js는<canvas>요소를 사용하여 차트를 그린다.
- 데이터(
datasets) 설정labels: X축의 각 항목(데이터 이름)data: 각 항목의 수치 값backgroundColor: 각 막대 그래프의 색상borderColor: 각 막대 그래프의 테두리 색상
- 차트 옵션 설정 (
scales.y)beginAtZero: true→ Y축을 0부터 시작하도록 설정max: 100→ Y축 최대값을 100으로 설정stepSize: 10→ 눈금 간격을 10으로 설정
- 차트 생성 (
new Chart())type: 'bar'→ 막대 그래프를 생성data와options를 설정하여 차트를 완성
📌 코드 실행 흐름 분석
1️⃣ Chart.js를 적용할 캔버스 요소 선택
const ctx = document.getElementById('myChart');✅ <canvas id="myChart"> 요소를 선택하여 차트가 그려질 대상 설정.
2️⃣ 차트 데이터 설정
let data = {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: 'TEST_LABEL',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: ['red', 'orange', 'yellow', 'green', 'blue', 'navy'],
borderColor: ['black', 'black', 'black', 'black', 'black', 'black'],
borderWidth: 1
}]
};✅ labels에 X축 항목을 지정하고, datasets에 데이터와 색상을 설정하여 막대 그래프 데이터 정의.
3️⃣ 차트 옵션 설정
let options = {
scales: {
y: {
beginAtZero: true,
max: 100,
min: 0,
ticks: {
stepSize: 10
}
}
}
};✅ beginAtZero: true → Y축을 0부터 시작하도록 설정.
✅ max: 100, min: 0 → Y축 최소/최대값을 설정하여 데이터가 효과적으로 표시되도록 조정.
✅ stepSize: 10 → 눈금 간격을 10 단위로 설정하여 가독성 향상.
4️⃣ 차트 생성
new Chart(ctx, {
type: 'bar',
data: data,
options: options
});✅ new Chart(ctx, { type: 'bar' })를 사용하여 차트를 생성.
✅ type: 'bar'을 설정하여 막대 그래프를 그림.
✅ data와 options를 설정하여 차트의 데이터와 스타일을 지정.
📌 최종 요약
| 학습 내용 | 주요 개념 |
|---|---|
| Chart.js 적용 | 캔버스(canvas) 요소를 활용하여 차트 생성 |
| labels | X축의 데이터 항목 정의 |
| datasets | 차트의 데이터 값 및 색상 설정 |
| scales.y | Y축 범위 및 눈금 설정 (stepSize: 10) |
| 차트 타입 | 'bar' (막대 그래프), 'line', 'pie' 등 지원 |
Here, My Pale Blue.🌏