Chart.js 기반 동적 데이터 연동 구현

핵심 요약 불필요한 페이지 새로고침이나 API 재호출 없이 카테고리별 세부 데이터를 즉각적으로 렌더링하도록 컴포넌트 간 단방향 데이터 흐름을 설계했습니다.

구현 배경, 목표 전체 업종을 보여주는 도넛 차트와 세부 업종을 보여주는 바 차트가 유기적으로 상호작용하는 UI가 필요했습니다. 사용자가 도넛 차트의 특정 영역을 클릭하면, 화면 전환 없이 해당 업종의 세부 지표가 바 차트에 즉시 반영되어야 했습니다.

상세 구현 로직

1. 이벤트 캡처 및 데이터 발신 도넛 차트 컴포넌트(doughnut.vue)에서 Chart.js의 onClick 이벤트를 활용해 사용자가 클릭한 데이터의 인덱스와 라벨명(식당, 카페 등)을 추출했습니다. 이후 Vue.js의 $emit을 통해 해당 라벨명을 상위 컴포넌트로 전달했습니다.
2. 부모-자식 간 데이터 흐름 제어 상위 컴포넌트에서는 자식(도넛 차트)으로부터 전달받은 업종 라벨명을 변수에 저장하고, 이를 또 다른 자식 컴포넌트인 바 차트(bar.vue)의 Props(receivedData)로 바인딩하여 데이터가 단방향으로 흐르도록 구조화했습니다.
3. 실시간 렌더링 및 UI 업데이트 바 차트 컴포넌트에서는 전달받은 Props 값을 기반으로 조건문을 실행합니다. 식당, 카페, 병원 등 카테고리 값에 따라 하위 라벨 배열(dynamiclabels)을 분기 처리하여, 사용자 클릭에 맞춰 세부 업종 지표가 실시간으로 화면에 렌더링되도록 구현했습니다.

아래는 그 시연영상 및 데이터가 들어가는 것을 확인한 내용입니다.

KakaoTalk_20260309_155435791.mp4