[javascript] jQuery를 이용한 데이터 시각화 방법

01 Dec 2023

javascript

데이터 시각화는 웹 개발에서 중요한 부분이며, 사용자에게 데이터를 보다 쉽게 이해할 수 있도록 시각적으로 표현해주는 역할을 합니다. 이번 포스트에서는 jQuery를 이용한 데이터 시각화 방법에 대해 알아보겠습니다.

1. Chart.js 라이브러리

데이터 시각화를 위해 많은 라이브러리들이 있지만, 여기서는 Chart.js라는 라이브러리를 소개하겠습니다. Chart.js는 HTML5의 canvas를 이용하여 다양한 유형의 차트를 생성할 수 있는 간단하고 유연한 라이브러리입니다.

먼저, Chart.js 공식 사이트에서 최신 버전의 라이브러리 파일을 다운로드하여 프로젝트에 추가합니다. 다음으로, jQuery도 프로젝트에 추가합니다.

html 파일의 <head> 태그 안에 아래의 <script> 태그를 추가하여 Chart.js와 jQuery를 로드합니다.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

2. 데이터 가져오기

데이터 시각화를 위해 먼저 데이터를 가져와야 합니다. jQuery의 $.ajax() 메서드를 사용하여 서버에서 데이터를 비동기적으로 가져올 수 있습니다. 예를 들어, 서버에서 JSON 형식의 데이터를 가져오는 예제를 살펴보겠습니다.

$.ajax({
    url: 'data.json',
    dataType: 'json',
    success: function(data) {
        // 데이터 가져오기 성공 시 필요한 처리를 진행합니다.
        // 여기서는 차트를 생성하는 함수를 호출하는 예제를 보여줍니다.
        createChart(data);
    },
    error: function() {
        // 데이터 가져오기 실패 시 처리할 내용을 작성합니다.
    }
});

3. 차트 생성하기

데이터를 가져온 후에는 Chart.js를 사용하여 원하는 차트를 생성할 수 있습니다. Chart.js는 Canvas 요소를 사용하기 때문에, 차트를 표시할 공간이 필요합니다. HTML 파일에 아래와 같이 <canvas> 태그를 추가합니다.

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

그리고 아래의 예제 코드를 사용해서 데이터를 기반으로 차트를 생성합니다.

function createChart(data) {
    var ctx = document.getElementById('myChart').getContext('2d');
    
    var chart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: data.labels,
            datasets: [{
                label: '데이터 시각화',
                data: data.values,
                backgroundColor: 'rgba(75, 192, 192, 0.2)',
                borderColor: 'rgba(75, 192, 192, 1)',
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });
}

위의 예제에서는 ‘bar’ 타입의 차트를 생성하고 데이터를 바탕으로 차트를 그립니다. 필요에 따라 다른 차트 유형 및 옵션을 사용할 수 있습니다.

4. 결과 확인하기

위의 코드를 모두 작성하고 HTML 파일을 실행하면, 데이터 시각화된 차트를 확인할 수 있습니다.

jQuery를 이용하여 데이터를 가져와서 Chart.js를 사용하여 데이터를 시각화하는 간단한 예제를 통해 데이터 시각화 방법을 알아보았습니다. Chart.js 라이브러리는 다양한 차트 유형과 옵션을 제공하기 때문에 필요에 따라 유연하게 적용할 수 있습니다.

더 자세한 내용은 Chart.js 공식 문서를 참고하시기 바랍니다.