📅 날짜: 2025-02-21
📌 개념 정리
Chart.js를 활용하여 JSON 데이터를 기반으로 차트를 동적으로 생성하는 방법을 학습했다.
- 외부 JSON 파일(
중구맛집.js)을 가져와 데이터를 가공 후 차트에 반영 가능. - extractDataSet() 함수를 사용하여 JSON 데이터를 카테고리별 개수로 변환.
- drawChart() 함수를 사용하여 다양한 유형의 차트(bar, pie, line)를 동적으로 생성.
onClick이벤트를 추가하여 차트 요소를 클릭하면 로그를 출력하도록 설정.
📌 코드 원본 (전체 코드 포함)
📝 HTML 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic Chart</title>
<!-- Chart.js CDN -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="./js/중구맛집.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="dynamicChart"></canvas>
</div>
<script>
console.log('중구맛집', 중구맛집); // JSON 데이터 로드 확인
// ✅ 1. JSON 데이터를 기반으로 카테고리별 개수 추출
function extractDataSet(param) {
const total = param.total;
console.log('total', total);
const data = param.data;
const cat = data.map((item) => item.FD_CS) // 음식 카테고리 추출
.sort((a, b) => a.localeCompare(b)) // 문자열 정렬
.reduce((acc, item) => { // 카테고리별 개수 집계
acc[item] = (acc[item] || 0) + 1;
return acc;
}, {});
console.log('cat', cat);
return {
"keys": Object.keys(cat), // 카테고리 리스트
"values": Object.values(cat) // 카테고리별 개수 리스트
};
}
// ✅ 2. 차트 그리기 함수
function drawChart(title, obj, tag, type) {
const ctx = document.getElementById(tag);
let data = {
labels: obj.keys,
datasets: [{
label: title,
data: obj.values,
borderWidth: 1,
backgroundColor: ['red', 'orange', 'yellow', 'green', 'blue', 'navy', 'gray', 'black'],
}],
};
let options = {
responsive: true,
scales: {
y: {
beginAtZero: true,
ticks: { stepSize: 2 }
}
},
onClick: (event, chartEl) => {
console.log('clicked..', chartEl);
}
};
new Chart(ctx, {
type: type, // 'bar', 'pie', 'line' 등 다양한 차트 유형 지원
data: data,
options: options
});
}
// ✅ 3. JSON 데이터를 가공하여 차트 생성
const result = extractDataSet(중구맛집);
console.log('result', result);
drawChart('중구맛집', result, 'dynamicChart', 'pie'); // 기본 차트 유형: 원형 그래프
</script>
</body>
</html>📌 설명
1. JSON 데이터 로드 (중구맛집.js)
console.log('중구맛집', 중구맛집);→ JSON 데이터가 정상적으로 로드되었는지 확인.
extractDataSet()함수로 JSON 데이터 가공map()을 사용하여 카테고리(FD_CS)만 추출.sort()로 가나다 순 정렬.reduce()를 사용하여 카테고리별 개수 집계.Object.keys()와Object.values()를 사용하여 X축 라벨과 데이터 분리.
drawChart()함수로 동적 차트 생성type매개변수를 받아서 바(bar), 파이(pie), 선(line) 차트 등 다양하게 활용 가능.backgroundColor를 배열로 지정하여 다양한 색상 적용.onClick이벤트 추가 → 차트 요소 클릭 시 로그 출력.
drawChart()함수 호출하여 차트 생성extractDataSet()으로 가공한 데이터를drawChart()에 전달하여 차트 생성.- 차트 유형을
'pie'로 설정하여 원형 차트 기본 출력.
📌 코드 실행 흐름 분석
1️⃣ JSON 데이터 로드 및 확인
console.log('중구맛집', 중구맛집);✅ JSON 데이터를 콘솔에서 확인하여 정상적으로 불러와졌는지 검증.
2️⃣ extractDataSet() 함수로 데이터 가공
function extractDataSet(param) {
const data = param.data;
const cat = data.map((item) => item.FD_CS)
.sort((a, b) => a.localeCompare(b))
.reduce((acc, item) => {
acc[item] = (acc[item] || 0) + 1;
return acc;
}, {});
return {
"keys": Object.keys(cat),
"values": Object.values(cat)
};
}✅ reduce()를 사용하여 카테고리별 개수를 집계하여 차트 데이터로 변환.
✅ Object.keys()와 Object.values()를 사용하여 차트 데이터(labels, data)로 정리.
3️⃣ drawChart() 함수로 차트 생성
function drawChart(title, obj, tag, type) {
const ctx = document.getElementById(tag);
let data = {
labels: obj.keys,
datasets: [{
label: title,
data: obj.values,
backgroundColor: ['red', 'orange', 'yellow', 'green', 'blue', 'navy', 'gray', 'black'],
}],
};
new Chart(ctx, {
type: type,
data: data,
options: {
onClick: (event, chartEl) => {
console.log('clicked..', chartEl);
}
}
});
}✅ type 매개변수를 사용하여 차트 유형을 동적으로 변경 가능.
✅ onClick 이벤트를 추가하여 차트 클릭 시 로그 출력 기능 추가.
📌 최종 요약
| 학습 내용 | 주요 개념 |
|---|---|
| JSON 데이터 활용 | 외부 JSON 파일을 로드하여 차트 생성 |
| 데이터 변환 | extractDataSet()을 사용하여 JSON 데이터 가공 |
| drawChart() 함수 | 동적으로 차트 생성 (bar, pie, line 지원) |
| 차트 클릭 이벤트 | onClick 이벤트를 추가하여 차트 요소 클릭 감지 |
Here, My Pale Blue.🌏