Chart.js에서 Zoom 플러그인을 활용한 효과적인 데이터 시각화

이전 값에 따라 줌을 하는 방법도 있습니다.

사용자에게 값에 따라 추가하는 기능과 마우스로 할 수 있는 방법을 선택해 제공을 한다면 더욱 사용자 친화적인 기능일 수 있어요 

https://nickdeveloper.co.kr/entry/Chartjs에서-MinMax를-활용한-Zoom-InOut-기능-구현하기

Chart.js에서 Min/Max를 활용한 Zoom In/Out 기능 구현하기

 

 

데이터 시각화에 있어 사용자 상호작용은 매우 중요한 요소입니다.

특히 대량의 데이터를 다룰 때,

사용자가 원하는 부분을 확대하여 자세히 볼 수 있는 기능은 필수적입니다.

 

이번 포스트에서는 Chart.js 라이브러리와 Zoom 플러그인을 사용하여

인터랙티브한 차트를 만드는 방법을 상세히 알아보겠습니다.

 

chart.js 이미지

 

1. 필요한 라이브러리 설정

먼저, Chart.js와 Zoom 플러그인, 그리고 터치 이벤트 지원을 위한 Hammer.js를 프로젝트에 포함시켜야 합니다.

CDN을 통해 이를 쉽게 구현할 수 있습니다.

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/hammerjs@2.0.8"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom"></script>

주의: 공식 문서에서 제공하는 로컬 경로 방식(path/to/...)은

404 오류를 발생시킬 수 있으므로, CDN 링크를 사용하는 것이 안전합니다.

 

2. 차트 구성

HTML에 차트를 그릴 캔버스 요소를 추가합니다.

<canvas id="myChart"></canvas>

 

3. 차트 초기화 및 Zoom 설정

JavaScript를 사용하여 차트를 초기화하고 Zoom 옵션을 구성합니다.

onst ctx = document.getElementById('myChart').getContext('2d');
const config = {
    type: 'line',
    data: {
        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
        datasets: [{
            label: 'My First Dataset',
            data: [65, 59, 80, 81, 56, 55, 40],
            fill: false,
            borderColor: 'rgb(75, 192, 192)',
            tension: 0.1
        }]
    },
    options: {
        plugins: {
            zoom: {
                zoom: {
                    wheel: {
                        enabled: true,
                    },
                    pinch: {
                        enabled: true
                    },
                    mode: 'xy',
                }
            }
        }
    }
};
let myChart = new Chart(ctx, config);

 

4. Zoom 옵션 설명

• wheel.enabled: 마우스 휠을 사용한 줌 기능을 활성화합니다.
• pinch.enabled: 터치 디바이스에서 핀치 줌 기능을 활성화합니다.
• mode: 줌 방향을 설정합니다. 'xy'는 가로세로 모두, 'x'는 가로만, 'y'는 세로만 줌이 가능합니다.

줌 확대 된 내용

 

5. 추가 고려사항

• 성능 최적화: 대량의 데이터를 다룰 때는 성능 최적화를 고려해야 합니다. 데이터 샘플링이나 지연 로딩 기법을 활용할 수 있습니다.
• 반응형 디자인: Chart.js는 기본적으로 반응형을 지원하지만, 컨테이너 크기 변경 시 차트가 올바르게 조정되는지 확인해야 합니다.
• 사용자 경험(UX) 개선: 줌 기능 사용법을 사용자에게 안내하는 툴팁이나 도움말을 추가하면 좋습니다.

6. Pan 기능 추가

줌 외에도 Pan(이동) 기능을 추가하여 사용자 경험을 더욱 향상시킬 수 있습니다. 옵션에 다음과 같이 추가합니다:

options: {
	plugins: {
		zoom: {
			zoom: {
				wheel: {
					enabled: true,
				},
				pinch: {
					enabled: true
				},
				mode: 'xy',
            },
			pan: {
				enabled: true,
				mode: 'xy',
			}
		}
	}
}

 

7.리셋 버튼 구현

줌 기능을 추가하여 사용자 경험을 더욱 향상시킬 수 있습니다. 옵션에 다음과 같이 추가합니다:

<button onclick="resetZoom()">Reset Zoom</button>
<script>
function resetZoom() {
    myChart.resetZoom();
}
</script>

 

결론

Chart.js와 Zoom 플러그인을 활용하면 사용자 친화적이고 인터랙티브한 데이터 시각화를 쉽게 구현할 수 있습니다.

이 기능은 특히 시계열 데이터나 대량의 데이터 포인트를 가진 차트에서 유용합니다.

 

사용자의 요구사항과 데이터의 특성에 맞게 줌과 팬 옵션을 조정하고, 필요에 따라 추가 기능을 구현하면 더욱 강력한 데이터 시각화 도구를 만들 수 있습니다. 또한, 성능 최적화와 사용자 경험 개선에 지속적인 관심을 기울이는 것이 중요합니다.

 

Chart.js의 Zoom 플러그인은 지속적으로 업데이트되고 있으므로, 최신 버전의 문서를 참조하여 새로운 기능이나 변경사항을 확인하는 것이 좋습니다. 데이터 시각화의 세계는 끊임없이 발전하고 있으며, 이러한 도