상세 컨텐츠

본문 제목

jQuery에서 Chart.js를 활용한 그래프 구현 방법

Javascript, jQuery

by Coop 2025. 3. 16. 19:22

본문

1. Chart.js란?

Chart.js는 HTML5의 Canvas API를 활용해 반응형 차트를 생성하는 JavaScript 라이브러리입니다.
jQuery와 함께 사용하면 더욱 손쉽게 데이터 시각화를 구현할 수 있습니다.

✅ 특징

  • 가볍고 빠른 성능
  • 8가지 차트 유형 지원 (라인, 바, 파이 등)
  • 반응형 디자인(Responsive)
  • 애니메이션 효과 제공

2. Chart.js와 jQuery 설정 방법

1) Chart.js & jQuery CDN 추가

HTML 파일에서 Chart.js와 jQuery를 CDN을 이용해 불러옵니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery + Chart.js 예제</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
    <canvas id="myChart"></canvas>
    <script>
        $(document).ready(function () {
            var ctx = $("#myChart");
            var myChart = new Chart(ctx, {
                type: 'bar', // 차트 유형 (bar, line, pie 등)
                data: {
                    labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
                    datasets: [{
                        label: 'Votes',
                        data: [12, 19, 3, 5, 2, 3],
                        backgroundColor: ['red', 'blue', 'yellow', 'green', 'purple', 'orange']
                    }]
                }
            });
        });
    </script>
</body>
</html>

✅ 코드 설명

  • jQuery와 Chart.js를 CDN을 통해 불러옵니다.
  • <canvas> 요소를 만들어 차트를 삽입할 준비를 합니다.
  • $(document).ready(function () { ... }); → jQuery를 사용해 DOM이 로드된 후 차트를 초기화합니다.
  • new Chart(ctx, {...}) → Chart.js를 활용해 막대(bar) 차트를 생성합니다.

3. Chart.js에서 지원하는 주요 차트 유형

Chart.js는 다양한 차트를 지원하며, jQuery와 함께 사용할 수 있습니다.

1) 라인 차트(Line Chart)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var ctx = $("#myChart");
var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ['January', 'February', 'March', 'April', 'May'],
        datasets: [{
            label: 'Sales',
            data: [30, 50, 40, 60, 80],
            borderColor: 'blue',
            backgroundColor: 'rgba(0, 0, 255, 0.1)',
            fill: true
        }]
    }
});
 
 cs

✅ 활용: 매출 변화, 시간에 따른 데이터 분석

 

2) 원형 차트(Pie Chart)

 

1
2
3
4
5
6
7
8
9
10
11
12
13
var ctx = $("#myChart");
var myChart = new Chart(ctx, {
    type: 'pie',
    data: {
        labels: ['Apple', 'Samsung', 'Google', 'Microsoft'],
        datasets: [{
            label: 'Market Share',
            data: [30, 25, 20, 25],
            backgroundColor: ['red', 'blue', 'yellow', 'green']
        }]
    }
});
 
 cs

✅ 활용: 시장 점유율, 구성 비율 분석

 

3) 혼합형 차트(Combo Chart)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
var ctx = $("#myChart");
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['2020', '2021', '2022', '2023'],
        datasets: [
            {
                type: 'bar',
                label: 'Revenue',
                data: [40, 60, 80, 100],
                backgroundColor: 'blue'
            },
            {
                type: 'line',
                label: 'Growth Rate',
                data: [5, 10, 15, 20],
                borderColor: 'red',
                fill: false
            }
        ]
    }
});
 
 cs

✅ 활용: 막대+라인 차트 조합을 통한 매출과 성장률 분석

 

4. Chart.js와 jQuery를 활용한 동적 데이터 업데이트

Chart.js는 jQuery를 활용하여 AJAX 데이터 로딩 및 실시간 업데이트가 가능합니다.

1) AJAX로 동적 데이터 불러오기

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
$(document).ready(function () {
    var ctx = $("#myChart");
    var myChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: [],
            datasets: [{
                label: 'Dynamic Data',
                data: [],
                backgroundColor: 'blue'
            }]
        }
    });
    function updateChart() {
        $.ajax({
            url: 'data.json', // 서버에서 데이터 가져오기
            dataType: 'json',
            success: function (response) {
                myChart.data.labels = response.labels;
                myChart.data.datasets[0].data = response.data;
                myChart.update();
            }
        });
    }
    setInterval(updateChart, 5000); // 5초마다 업데이트
});
 
 cs

✅ 활용: 실시간 데이터 업데이트 (예: 주식 차트, 대시보드)

 

5. Chart.js와 jQuery를 사용한 반응형 차트 만들기

1
2
3
4
5
6
7
8
9
10
var ctx = $("#myChart");
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {...}, 
    options: {
        responsive: true, // 반응형 활성화
        maintainAspectRatio: false // 가로세로 비율 자동 조정
    }
});
 
 cs

✅ 활용: 다양한 화면 크기에 맞게 자동 조정

6. Chart.js에서 jQuery와 함께 사용자 상호작용 추가

1
2
3
4
5
6
7
8
9
$("#myChart").click(function (evt) {
    var activePoints = myChart.getElementsAtEventForMode(evt, 'nearest', { intersect: true }, true);
    if (activePoints.length > 0) {
        var datasetIndex = activePoints[0].datasetIndex;
        var dataIndex = activePoints[0].index;
        alert("클릭한 데이터: " + myChart.data.labels[dataIndex]);
    }
});
 
 cs

✅ 활용: 데이터 클릭 이벤트, 툴팁 기능 확장

7. 결론 및 요약

✅ jQuery에서 Chart.js 활용 포인트

  1. CDN을 추가하여 간편하게 설치 가능
  2. **jQuery의 $(document).ready()**를 활용해 차트 생성
  3. 다양한 차트 유형 지원 (라인, 바, 원형 등)
  4. AJAX로 실시간 데이터 업데이트 가능
  5. 반응형 차트 설정 가능 (responsive: true)
  6. 사용자 상호작용 이벤트 추가 가능

🚀 추천 활용 사례

  • 웹 대시보드에서 실시간 데이터 시각화
  • 쇼핑몰 통계 분석
  • 매출 및 사용자 행동 데이터 차트

이제 jQuery와 함께 Chart.js를 활용해 멋진 차트를 만들어 보세요! 🎉

'Javascript, jQuery' 카테고리의 다른 글

How to Use jQuery Ajax to Send and Receive JSON Data (Complete Guide with Examples)  (0) 2025.03.17
jQuery foreach ($.each()) 사용법과 다양한 예제  (1) 2025.03.16
소스코드 정렬 사이트 js-beautify  (0) 2023.05.20
[차트] javascript, jQuery justGage refresh 버튼  (0) 2023.05.16
[차트] javascript, jQuery justGage 에니메이션 도넛 게이지 차트  (0) 2023.05.11

관련글 더보기

댓글 영역

티스토리툴바