Chart.js는 가벼우면서도 강력한 JavaScript 기반 차트 라이브러리입니다. 이 라이브러리를 사용하여 웹 애플리케이션에서 다양한 차트를 그릴 수 있습니다. 하지만 대부분의 경우에는 서버에서 동적으로 데이터를 가져와서 차트를 그리는 경우가 많습니다. 이번 블로그에서는 Chart.js와 서버 데이터를 연동하는 방법에 대해 알아보겠습니다.
1. 서버에서 데이터 가져오기
먼저, 서버에서 차트에 표시할 데이터를 가져와야 합니다. 서버는 웹 API나 데이터베이스와 같은 방식으로 데이터를 제공할 수 있습니다. 예를 들어, RESTful API를 통해 JSON 형식으로 데이터를 가져올 수 있습니다. 아래는 간단한 예제 코드입니다.
fetch('/api/data')
.then(response => response.json())
.then(data => {
// 데이터 처리
})
.catch(error => {
console.error('데이터 가져오기 실패:', error);
});
위 코드에서는 fetch 함수를 사용하여 데이터를 가져옵니다. fetch 함수는 AJAX 요청을 보내고, then 메서드를 사용하여 응답을 처리합니다. 데이터를 가져오기 위해서는 서버의 API 엔드포인트에 맞게 URL을 수정해야 합니다.
2. 데이터 가공하기
서버로부터 받은 데이터를 Chart.js가 인식할 수 있는 형식으로 가공해야 합니다. Chart.js는 데이터를 배열 형태로 받아서 차트를 그립니다. 예를 들어, 아래와 같은 형식으로 가공할 수 있습니다.
const labels = data.map(item => item.label);
const values = data.map(item => item.value);
const chartData = {
labels: labels,
datasets: [{
label: '데이터',
data: values,
}]
};
위 코드에서는 받은 데이터를 labels와 values 배열로 가공한 후, chartData 객체에 형식에 맞게 저장합니다. 각각의 데이터는 labels 배열에 라벨로, values 배열에 값으로 저장되며, chartData 객체에는 해당 데이터들이 저장됩니다.
3. 차트 그리기
서버에서 가져온 데이터를 가공한 뒤, Chart.js를 사용하여 차트를 그릴 수 있습니다. HTML에서 차트를 그릴 컨테이너 엘리먼트를 미리 준비한 후, JavaScript에서 해당 엘리먼트를 선택하여 차트를 초기화하고 데이터를 넘겨줍니다. 아래는 예제 코드입니다.
<canvas id="chart"></canvas>
const ctx = document.getElementById('chart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'line',
data: chartData,
});
위 코드에서는 <canvas> 엘리먼트에 차트를 그리기 위해 Chart 객체를 생성합니다. Chart 객체의 생성자는 첫 번째 인자로 컨텍스트를 받으며, type과 data 속성을 사용하여 차트의 종류와 데이터를 설정합니다.
4. 결과 확인하기
위의 단계를 수행한 뒤, 웹 애플리케이션을 실행하여 차트가 제대로 그려지는지 확인해야 합니다. 서버로부터 데이터를 가져오고, 가공한 데이터를 사용하여 차트를 그리는 과정을 모두 진행한 뒤, 애플리케이션을 열어서 차트가 올바르게 표시되는지 확인해보세요.
결론
Chart.js와 서버 데이터를 연동하는 방법을 알아보았습니다. 서버에서 데이터를 가져와서 Chart.js가 인식할 수 있는 형식으로 가공한 다음, 그릴 차트를 초기화하고 데이터를 넘겨줍니다. 이를 통해 동적인 데이터를 사용하여 보다 풍부한 차트를 그릴 수 있습니다. Chart.js의 다양한 옵션을 활용하면 웹 애플리케이션에서 다양한 종류의 차트를 제작할 수 있습니다.