[javascript] jQuery를 사용한 파이 차트 구현 방법

01 Dec 2023

javascript

파이 차트는 데이터를 시각적으로 표현하기 위해 많이 사용되는 차트 중 하나입니다. 이번 글에서는 jQuery 라이브러리를 사용하여 간단하게 파이 차트를 구현하는 방법을 알아보겠습니다.

1. HTML 구조 만들기

먼저, 파이 차트를 표현할 HTML 구조를 만들어야 합니다. 다음과 같은 코드를 HTML 파일에 작성해주세요.

<div id="chart"></div>

2. jQuery 및 Chart.js 라이브러리 추가하기

jQuery를 사용하기 위해 해당 라이브러리를 HTML 파일에 추가해야 합니다. 또한, 파이 차트를 그리기 위해 Chart.js 라이브러리도 함께 추가해줍니다.

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

3. JavaScript 코드 작성하기

파이 차트를 그리기 위해 JavaScript 코드를 작성해야 합니다. 다음과 같이 코드를 작성해주세요.

$(document).ready(function() {
  var ctx = document.getElementById("chart");
  var myChart = new Chart(ctx, {
    type: 'pie',
    data: {
      labels: ['Apple', 'Banana', 'Orange'],
      datasets: [{
        label: '# of Votes',
        data: [12, 19, 9],
        backgroundColor: [
          'rgba(255, 99, 132, 0.7)',
          'rgba(54, 162, 235, 0.7)',
          'rgba(255, 206, 86, 0.7)'
        ],
        borderColor: [
          'rgba(255, 99, 132, 1)',
          'rgba(54, 162, 235, 1)',
          'rgba(255, 206, 86, 1)'
        ],
        borderWidth: 1
      }]
    }
  });
});

위 코드에서는 Chart.js의 Chart 객체를 사용하여 파이 차트를 그리고 있습니다. 필요한 데이터와 스타일을 설정하여 원하는 파이 차트를 만들 수 있습니다.

4. 결과 확인하기

모든 코드 작성이 완료되었다면, 웹 브라우저에서 HTML 파일을 열어 파이 차트가 제대로 표시되는지 확인해보세요.

1. HTML 구조 만들기

2. jQuery 및 Chart.js 라이브러리 추가하기

3. JavaScript 코드 작성하기

4. 결과 확인하기

참고 자료