Chart.js는 웹에서 인터랙티브한 차트를 만들 수 있는 JavaScript 라이브러리입니다. 이 라이브러리를 사용하여 파이 차트를 생성하는 방법을 알아보겠습니다.

1. 필요한 파일 가져오기

먼저 Chart.js를 사용하기 위해 다음과 같이 HTML 파일에 스크립트를 추가해주세요.

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

2. 캔버스 요소 생성

다음으로 파이 차트를 그릴 캔버스 요소를 HTML 파일에 추가해주세요.

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

3. 스크립트 작성

아래와 같이 JavaScript 코드를 작성하여 파이 차트를 생성할 수 있습니다.

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'pie',
    data: {
        labels: ['Red', 'Blue', 'Yellow'],
        datasets: [{
            data: [10, 20, 30],
            backgroundColor: ['red', 'blue', 'yellow']
        }]
    }
});

• ctx 변수는 캔버스 요소의 2D 컨텍스트를 가져옵니다.
• myChart 변수에 Chart 객체 인스턴스를 생성합니다.
• type 속성을 'pie'로 설정하여 파이 차트를 생성합니다.
• data 속성을 사용하여 라벨과 데이터를 설정합니다.
• datasets 속성은 데이터셋을 나타내며, data 속성에는 파이 차트의 각 부분의 값을 배열로 설정합니다.
• backgroundColor 속성을 사용하여 파이 차트의 각 부분의 색상을 설정합니다.

4. 차트 스타일링

생성한 차트는 기본적으로 기본 스타일을 가지고 있지만, 필요에 따라 스타일을 수정할 수 있습니다. Chart.js는 다양한 스타일 옵션을 제공하므로 공식 문서를 참고하여 원하는 스타일을 적용해주세요.

위의 코드에서 backgroundColor 속성을 수정하여 차트의 색상을 변경할 수도 있습니다.

결론

Chart.js를 사용하면 간단하게 파이 차트를 생성할 수 있습니다. 위의 단계를 따라하면 웹 페이지에 파이 차트를 추가할 수 있습니다. 자세한 내용은 Chart.js 공식 문서를 참고하시기 바랍니다.