이번 포스트에서는 Chart.js의 min/max 설정을 활용하여 차트에서 Zoom In/Out 기능을 구현하는 방법을 자세히 다룰 것입니다.
이 기능은 사용자가 차트의 특정 부분을 더 자세히 보거나, 전체적인 관점에서 데이터를 확인할 수 있게 해줍니다.
X축과 Y축에 Min/Max 적용하기
차트의 options에 있는 scales 설정을 통해, 우리는 차트의 X축과 Y축 각각에 대해 초기 확대 범위를 설정할 수 있습니다.
이는 차트가 로드될 때 사용자에게 보여질 데이터의 구간을 세밀하게 조정하는 데 사용됩니다.
options: {
scales: {
y: {
min: 10, // Y축의 최소값 설정
max: 50, // Y축의 최대값 설정
},
x: {
min: 2, // X축의 최소값 설정
max: 3, // X축의 최대값 설정
}
}
}
이로써, 우리는 사용자가 데이터의 특정 구간을 세밀하게 조중하고 탐색할 수 있도록, min과 max 값을 적절히 조정하는 방법을 통해 차트의 Zoom 기능을 구현할 계획입니다. 이 기능은 사용자에게 차트 내에서 원하는 데이터 포인트나 범위에 더 가까이 다가갈 수 있는 유연성을 제공함으로써, 데이터의 이해도를 극대화할 것입니다. 따라서, 사용자가 차트의 특정 부분에 대해 더 집중할 수 있게 하여, 데이터 분석 과정에서의 통찰력을 높이는 데 큰 도움이 될 것입니다.
예시 데이터
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Zoom In Out</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<div style="width: 800px; height: 400px;">
<!-- chart가 그려질 canvas를 생성 -->
<canvas id="myChart" width="800" height="400"></canvas>
</div>
<script>
// 차트 생성
const canvas = document.getElementById('myChart'); // canvas를 ID로 가져오기
const ctx = canvas.getContext('2d'); // canvas 요소의 2차원 그래픽 컨텍스트를 가져오는 메서드
// 긴 예시를 만들기 위한 배열
let labels = [];
for (let i = 0; i < 60; i++) {
labels = [ `1.${i+1}`,...labels]
}
// 캔버스에 선 그래프를 그리기 위해 Chart 객체를 생성합니다.
const myChart = new Chart(ctx, {
// 차트 유형 설정: 선 그래프
type: 'line',
// 데이터 설정
data: {
// x 축 레이블
labels,
// 데이터셋 설정
datasets: [{
// 데이터셋 제목
label: '# of Votes',
// 데이터 포인트 배열
data: [12, 19, 3, 5, 1, 3, 5,3,5,2000,3,5,2,4,5,6,79,23,1,3,45,5,7,8,5,67,5,3,800,3,2,5,6,3,2,1,7,8,1,4,3,6,46,3,7,4,2,8,9,4,2,1,2,3,4,52,1,1,3],
// 데이터 색상
// 데이터 색상
backgroundColor: 'rgba(255, 99, 132, 0.2)',
// 선 색상
borderColor: 'rgba(255, 99, 132, 1)',
// 선 두께
borderWidth: 1
}]
},
// 차트 옵션 설정
options: {
// y 축 시작 값 0으로 설정
scales: {
y: {
min : 0, // 시작은 0 부터
max : 2000 // 제일 큰 데이터 2000
},
x: {
min : 0, // 시작은 0부터
max : 60 // 데이터의 총 길이인 60
}
}
}
});
</script>
</body>
</html>
데이터를 한눈에 살펴보는 것만으로도 숨이 턱 막히는 순간이 있습니다. 값이 많고, 일정하지 않게 뛰는 데이터 포인트들 사이에서, 특히 아래 1의 자리 수와 같은 미세한 데이터들을 눈으로 직접 확인하기란 여간 어려운 일이 아닙니다. 마우스를 갖다 대어 확인하는 방법도 있지만, 사용자들은 대체로 원하는 데이터를 한눈에, 즉시 파악할 수 있기를 선호합니다. 이러한 사용자의 니즈를 충족시키기 위해, 우리는 차트 내에서 사용자가 특정 위치의 데이터를 보다 쉽게 볼 수 있도록 하는 Zoom 기능을 추가할 예정입니다. 이 기능은 데이터의 세밀한 부분까지 명확하게 탐색할 수 있게 함으로써, 전반적인 데이터 분석 경험을 한층 향상시키는 데 기여할 것입니다.
먼저, 우리가 조정할 수 있도록 Y축과 X축 값을 변경할 사용자 인터페이스(UI)를 마련해야 합니다.
더 직관적이고 유연한 조작을 위해 슬라이더 컨트롤을 사용하는 것도 좋은 방법이지만,
여기서는 빠른 예시 제공을 목적으로 input:number 타입을 활용하여 설명드리겠습니다.
이 방식을 선택한 이유는, 사용자가 데이터를 보다 세밀하게 탐색할 수 있도록 최소값과 최대값을 직접 입력할 수 있게 함으로써,
차트의 특정 부분을 확대하거나 축소하는 과정을 간소화하기 위함입니다.
이렇게 하면, 원하는 데이터 세그먼트에 대한 분석이 훨씬 용이해지며, 차트의 가독성을 크게 향상시킬 수 있습니다.
<!-- X축 Min Max 값을 변경 -->
<div>
<p>X축:</p>
<input type="number" name="" value="0" id="x-min"><label for="x-min">Min</label>
<input type="number" name="" value="60" id="x-max"><label for="x-max">Max</label>
</div>
<!-- Y축 Min Max 값을 변경 -->
<div>
<p>Y축:</p>
<input type="number" name="" value="0" id="y-min"><label for="y-min">Min</label>
<input type="number" name="" value="2000" id="y-max"><label for="y-max">Max</label>
</div>
이제 우리는 사용자가 입력한 값에 따라 차트를 동적으로 변경하는 기능을 구현할 것입니다.
사용자가 제공한 input:number 값의 변화를 감지하고, 이를 차트의 X축 및 Y축 범위에 적용하는 스크림트를 추가합니다
// X축 최소값 변경을 위한 이벤트 리스너를 추가합니다.
document.querySelector("#x-min").addEventListener("change", (e) => {
const minValue = parseInt(e.target.value, 10); // 입력된 값을 정수로 변환합니다.
const axis = myChart.options.scales.x; // X축 설정에 접근합니다.
axis.min = minValue; // X축의 최소값을 사용자가 입력한 값으로 설정합니다.
myChart.update(); // 차트를 업데이트하여 변경사항을 적용합니다.
});
// X축 최대값 변경을 위한 이벤트 리스너를 추가합니다.
document.querySelector("#x-max").addEventListener("change", (e) => {
const maxValue = parseInt(e.target.value, 10); // 입력된 값을 정수로 변환합니다.
const axis = myChart.options.scales.x; // X축 설정에 접근합니다.
axis.max = maxValue; // X축의 최대값을 사용자가 입력한 값으로 설정합니다.
myChart.update(); // 차트를 업데이트하여 변경사항을 적용합니다.
});
// Y축 최소값 변경을 위한 이벤트 리스너를 추가합니다.
document.querySelector("#y-min").addEventListener("change", (e) => {
const minValue = parseInt(e.target.value, 10); // 입력된 값을 정수로 변환합니다.
const axis = myChart.options.scales.y; // Y축 설정에 접근합니다.
axis.min = minValue; // Y축의 최소값을 사용자가 입력한 값으로 설정합니다.
myChart.update(); // 차트를 업데이트하여 변경사항을 적용합니다.
});
// Y축 최대값 변경을 위한 이벤트 리스너를 추가합니다.
document.querySelector("#y-max").addEventListener("change", (e) => {
const maxValue = parseInt(e.target.value, 10); // 입력된 값을 정수로 변환합니다.
const axis = myChart.options.scales.y; // Y축 설정에 접근합니다.
axis.max = maxValue; // Y축의 최대값을 사용자가 입력한 값으로 설정합니다.
myChart.update(); // 차트를 업데이트하여 변경사항을 적용합니다.
});
위 값을 추가하고 나면 사용자가 필요한 데이터를 한번에 볼 수 있도록 수정을 할 수 있습니다.
주의사항
1. 차트의 성능과 사용자 경험을 위해 적절한 최대/최소 zoom 레벨을 설정하는 것이 중요합니다.
너무 많이 확대하거나 축소하게 되면, 차트가 의미하는 바를 잃어버리거나, 사용자가 데이터를 올바르게 해석하지 못할 수 있습니다.
2. 모바일 디바이스에서의 사용성도 고려하여, 터치 기반의 확대/축소가 원활하게 작동하는지 확인해야 합니다.
이번 포스트에서는 Chart.js를 활용하여 데이터를 확대 및 축소할 수 있는 기능을 소개했습니다. 하지만 우리의 여정은 여기서 멈추지 않습니다. 다음 포스트에서는 Chart.js의 플러그인 시스템을 활용하여 차트에서의 zoom in, zoom out뿐만 아니라 차트의 이동 기능을 구현하는 방법을 탐구할 예정입니다. 이를 통해 사용자들은 차트를 더욱 자유롭게 탐색하며, 데이터의 세세한 부분까지 면밀히 분석할 수 있는 능력을 갖추게 될 것입니다. 기대해주세요!
'개발 > chart.js' 카테고리의 다른 글
| Chart.js로 다양한 데이터를 동적으로 제어하기 (0) | 2024.02.18 |
|---|---|
| Chart.js로 시작하는 데이터 시각화 시작하기 (0) | 2024.02.15 |
