서울시 유치원 정보 사이트 프로젝트 개발의 디테일 페이지에서 학급수와 유아수 데이터를 그래프화하는 작업을 진행하였다. 구글로 서치해본 결과 chart.js라는 것을 쓰면 효과적으로 구현할 수 있을 것 같아서 그걸 이용해서 제작해 보았다.
홈페이지 가보면 매우 다양한 그래프 타입을 사용 가능한 것, 그리고 생각보다 굉장히 디테일한 설정까지 가능한 것을 확인할 수 있었다.
일단 html 쪽에 스크립트 태그안에 소스를 cdn 방식으로 불러와서 chart.js 사용할 준비.
그리고 그래프를 넣어줄 html쪽에 캔버스라는 태그를 만들어주었다. 여기서 전체 크기도 설정하는데 나는 가로 세로 100%로 설정했다.
<div class="data-contents">
<div class="data-title">
학급수
</div>
<canvas id="class-chart" width="100%" height="100%"></canvas>
</div>
그러고나서 api데이터가 들어오는 fetch 안쪽에 chart.js에서 제공하는 New Chart로 시작하는 폼을 넣어주면 된다.
속성 데이터가 너무 다양해서 gpt에게 물어가면서 내가 필요한 옵션들만 잘 추려나가면서 만들어보았다.
new Chart(document.getElementById('class-chart'), {
type: 'doughnut',
data: {
labels: [
`만 3세 반`,
`만 4세 반`,
`만 5세 반`,
`혼합반`,
`특수학급`
],
datasets: [
{
data: [3, 4, 5, 6, 7],
backgroundColor: [
'#00C7E2', // 만 3세 반 색상
'#FF5733', // 만 4세 반 색상
'#FFC300', // 만 5세 반 색상
'#DAF7A6', // 혼합반 색상
'#C70039' // 특수학급 색상
], // 그래프 각각의 색상 지정
borderWidth: 0 // 흰색 보더를 없애는 설정
}
]
},
학급수는 도넛형 파이그래프, 유아수는 가로형 바 그래프로 그리면 좋을 것 같아서 그렇게 설정해보았고 그러한 그래프의 타입은 type으로 설정 가능했다.
라벨은 주요 항목을 넣는 곳이고 이번 프로젝트는 만 3세반, 4세반 과 같은 정보들이 들어왔다.
데이터셋은 실질 그래프 데이터이며 이번 경우는 라벨에 매칭되는 밸류 값들이 들어왔다. (api 데이터 값)
데이터셋 안쪽도 여러 속성들이 들어오는데 그래프의 컬러를 설정할 수 있는 백그라운드컬러를 설정해주었고 그 외에도 borderWidth나 maxBarThickness 등을 통해서 그래프의 스타일을 커스터마이즈 할 수 있었다.
데이터쪽이 잘 세팅되면 옵션에서 세부 설정이 가능하다.
options: {
responsive: true,
plugins: {
legend: {
display: true,
position: 'bottom',
labels: {
font: {
size: 14 // 범례텍스트 사이즈
},
boxWidth: 10, // 범례크기
boxHeight: 10 // 범례크기
},
}
},
scales: { // x축과 y축에 대한 설정
x: {
grid: { // 축에 대한 격자선
display: false, // grid 활성화 (기본값 true)
},
ticks: {
display: false // x축 데이터
},
border: {
display: false // x축의 축선 숨김
}
},
y: {
grid: { // y축에 대한 격자선
display: false, // grid 활성화 (기본값 true)
},
ticks: {
display: false, // y축 눈금 텍스트 표시
},
border: {
display: false // y축의 축선 숨김
}
}
}
}
리스폰시브 : 반응형 여부
플러그인 : 주로 범례 등을 다룸
스케일 : 그래프의 세부적인 부분 설정 가능
그리드 : 그래프에 연하게 그려져있는 그리드 선들 제어
틱 : 그래프의 x축이나 y축의 데이터 텍스트를 컨트롤 가능. 중요한 속성
보더 : 그래프 x축 y축 선을 제어
이 많은 옵션들을 잘 컨트롤하면 멋진 그래프 만들 수 있다.
같은 방식으로 유아수 부분은 가로형 바 그래프를 만들어주었다.
new Chart(document.getElementById('kidnum-chart'), {
type: 'bar',
data: {
labels: [
`만 3세 반 ${kinderInfoPick[0].ppcnt3 !== null ? kinderInfoPick[0].ppcnt3 : '-'}`,
`만 4세 반 ${kinderInfoPick[0].ppcnt4 !== null ? kinderInfoPick[0].ppcnt4 : '-'}`,
`만 5세 반 ${kinderInfoPick[0].ppcnt5 !== null ? kinderInfoPick[0].ppcnt5 : '-'}`,
`혼합반 ${kinderInfoPick[0].mixppcnt !== null ? kinderInfoPick[0].mixppcnt : '-'}`,
`특수학급 ${kinderInfoPick[0].shppcnt !== null ? kinderInfoPick[0].shppcnt : '-'}`
], // y축 값
datasets: [
{
data: [
kinderInfoPick[0].ppcnt3 !== null ? kinderInfoPick[0].ppcnt3 : '0',
kinderInfoPick[0].ppcnt4 !== null ? kinderInfoPick[0].ppcnt4 : '0',
kinderInfoPick[0].ppcnt5 !== null ? kinderInfoPick[0].ppcnt5 : '0',
kinderInfoPick[0].mixppcnt !== null ? kinderInfoPick[0].mixppcnt : '0',
kinderInfoPick[0].shppcnt !== null ? kinderInfoPick[0].shppcnt : '0'
], // x축 값
backgroundColor: [
'#00C7E2', // 만 3세 반 색상
'#FF5733', // 만 4세 반 색상
'#FFC300', // 만 5세 반 색상
'#DAF7A6', // 혼합반 색상
'#C70039' // 특수학급 색상
], // 그래프 각각의 색상 지정
maxBarThickness: 20 // 그래프 최대 두께
}
]
},
options: {
indexAxis: 'y',
responsive: true,
plugins: {
legend: {
display: false // 범례 표시 여부 (false로 설정하여 범례 숨김)
}
},
scales: { // x축과 y축에 대한 설정
x: {
grid: { // 축에 대한 격자선
display: false, // grid 활성화 (기본값 true)
},
ticks: {
display: false // x축 데이터
},
border: {
display: false // x축의 축선 숨김
}
},
y: {
grid: { // 축에 대한 격자선
display: false, // grid 활성화 (기본값 true)
},
ticks: {
display: true, // y축 눈금 텍스트 표시
color: '#FF5733',
font: {
size: 16,
family: 'pretendard',
weight: '400'
}
},
border: {
display: false // y축의 축선 숨김
}
}
}
}
이번에 추가적으로 배운 부분은 특정 값으로 들어오는 값을 원하는 값으로 바꿔주는 것이었다. 이번경우 학급수나 유아수에서 null 값으로 들어오는 데이터가 종종 있었는데 이를 - 혹은 0으로 바꿔주는 작업이 필요했다.
이를위해 이리저리 서치해본 결과 !== 그리고 ? 를 사용해서 해결할 수 있었다.
kinderInfoPick[0].ppcnt3 !== null ? kinderInfoPick[0].ppcnt3 : '-'
aaa !== null 은 aaa 중 null이 아닌 값들을 true로 반환시킨다.
?는 if-else의 축약형 같은 의미이며 이 외의 값들을 의미한다.
즉 null이 아닌 값은 원래 자기 값대로 나오게하며 그 외의 값(즉 null 값)은 - 라는 기호로 반환시키는 구문이다.
그렇게 구현 해본 유치원 학급수와 유아수 그래프 데이터
Chart.js를 접해본 소감은 처음엔 좀 어려웠는데 사용하면 사용할수록 정말 잘만들어진 툴로 느껴졌다. gpt에게 잘 물어가면서 사용하면 방법도 많이 까다롭진 않았다. 그래프 만들 때 잘 이용하면 좋을 듯.