📅 날짜: 2025-02-21
📌 개념 정리
Chart.js를 활용하여 스택형 막대 그래프(Stacked Bar Chart) 를 생성하는 방법을 학습했다.
- 여러 개의
datasets을 사용하여 각 카테고리에 여러 데이터 항목을 배치 가능. scales.x.stacked: true옵션을 추가하여 여러 데이터를 하나의 막대에 누적 표시 가능.- Y축(
scales.y)의 최소값과 최대값을 조정하여 그래프를 최적화할 수 있다.
📌 코드 원본 (전체 코드 포함)
📝 HTML 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Stacked Bar Chart</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="stackedChart"></canvas>
</div>
<script>
// ✅ 1. 차트를 그릴 캔버스 요소 선택
const ctx = document.getElementById('stackedChart');
// ✅ 2. 차트 데이터 설정
let data = {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [
{
label: 'Category 1',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: 'red',
borderColor: 'black',
borderWidth: 1
},
{
label: 'Category 2',
data: [10, 15, 8, 3, 7, 6],
backgroundColor: 'blue',
borderColor: 'black',
borderWidth: 1
},
{
label: 'Category 3',
data: [5, 8, 13, 9, 4, 7],
backgroundColor: 'green',
borderColor: 'black',
borderWidth: 1
}
]
};
// ✅ 3. 차트 옵션 설정
let options = {
responsive: true,
scales: {
x: {
stacked: true // X축을 스택형으로 설정
},
y: {
stacked: true, // Y축을 스택형으로 설정
beginAtZero: true, // Y축을 0부터 시작
max: 50 // Y축 최대값 설정
}
}
};
// ✅ 4. 차트 생성
new Chart(ctx, {
type: 'bar', // 'bar': 막대 그래프
data: data,
options: options
});
</script>
</body>
</html>📌 설명
1. 캔버스 요소 선택 (document.getElementById('stackedChart'))
Chart.js는<canvas>요소를 사용하여 차트를 그린다.
- 데이터(
datasets) 설정labels: X축의 각 항목(데이터 이름)datasets: 여러 개의 데이터를 포함하여 누적형 그래프 생성backgroundColor: 각 막대 그래프의 색상borderColor: 각 막대 그래프의 테두리 색상
- 차트 옵션 설정 (
scales.x.stacked: true, scales.y.stacked: true)stacked: true→ X축과 Y축을 스택형으로 설정하여 데이터를 누적 표시beginAtZero: true→ Y축을 0부터 시작하도록 설정max: 50→ Y축 최대값을 50으로 설정
- 차트 생성 (
new Chart())type: 'bar'→ 막대 그래프를 생성data와options를 설정하여 차트를 완성
📌 코드 실행 흐름 분석
1️⃣ Chart.js를 적용할 캔버스 요소 선택
const ctx = document.getElementById('stackedChart');✅ <canvas id="stackedChart"> 요소를 선택하여 차트가 그려질 대상 설정.
2️⃣ 차트 데이터 설정
let data = {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [
{
label: 'Category 1',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: 'red',
borderColor: 'black',
borderWidth: 1
},
{
label: 'Category 2',
data: [10, 15, 8, 3, 7, 6],
backgroundColor: 'blue',
borderColor: 'black',
borderWidth: 1
},
{
label: 'Category 3',
data: [5, 8, 13, 9, 4, 7],
backgroundColor: 'green',
borderColor: 'black',
borderWidth: 1
}
]
};✅ datasets을 여러 개 추가하여 데이터를 그룹별로 표시할 수 있도록 설정.
✅ backgroundColor와 borderColor를 개별 설정하여 시각적으로 구분 가능하도록 함.
3️⃣ 차트 옵션 설정
let options = {
responsive: true,
scales: {
x: { stacked: true },
y: {
stacked: true,
beginAtZero: true,
max: 50
}
}
};✅ scales.x.stacked: true → X축을 스택형으로 설정하여 데이터가 하나의 막대에 누적 표시되도록 함.
✅ scales.y.stacked: true → Y축도 스택형으로 설정하여 데이터를 누적하여 표시하도록 설정.
✅ max: 50 → Y축 최대값을 50으로 설정하여 차트가 깔끔하게 보이도록 조정.
4️⃣ 차트 생성
new Chart(ctx, {
type: 'bar',
data: data,
options: options
});✅ new Chart(ctx, { type: 'bar' })를 사용하여 차트를 생성.
✅ stacked: true 설정으로 여러 데이터가 하나의 막대에 누적 표시됨.
📌 최종 요약
| 학습 내용 | 주요 개념 |
|---|---|
| Chart.js 적용 | 캔버스(canvas) 요소를 활용하여 차트 생성 |
| labels | X축의 데이터 항목 정의 |
| datasets | 여러 개의 데이터를 포함하여 누적형 그래프 생성 |
| stacked | true 설정 시 데이터를 하나의 막대에 누적 |
| scales.y | Y축 범위 및 눈금 설정 (max: 50) |
Here, My Pale Blue.🌏