[javascript] Parcel에서 Chart.js를 사용하는 방법은?

22 Nov 2023

javascript

Chart.js는 많은 개발자들이 데이터 시각화를 위해 자주 사용하는 JavaScript 라이브러리입니다. Parcel은 간단하고 빠른 자바스크립트 번들러로, 이를 사용하여 Chart.js를 쉽게 프로젝트에 통합할 수 있습니다.

Chart.js와 Parcel을 함께 사용하는 방법은 다음과 같습니다:

프로젝트 디렉토리에서 터미널을 열고, 다음 명령어를 사용하여 필요한 종속성을 설치합니다:

npm install chart.js

프로젝트 디렉토리에 index.html 파일을 생성합니다. 이 파일은 Chart.js를 사용하여 그래프를 보여줄 HTML 페이지입니다.
index.html 파일을 열고, 다음과 같이 스크립트 태그를 추가하여 Chart.js와 그래프를 생성하는 JavaScript 코드를 작성합니다:

<!DOCTYPE html>
<html>
  <head>
    <title>Chart.js Example</title>
  </head>
  <body>
    <canvas id="myChart"></canvas>

    <script src="node_modules/chart.js/dist/Chart.min.js"></script>
    <script>
      var ctx = document.getElementById('myChart').getContext('2d');
      var myChart = new Chart(ctx, {
        type: 'bar',
        data: {
          labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
          datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: 'rgba(255, 99, 132, 0.2)',
            borderColor: 'rgba(255, 99, 132, 1)',
            borderWidth: 1
          }]
        },
        options: {
          scales: {
            y: {
              beginAtZero: true
            }
          }
        }
      });
    </script>
  </body>
</html>

위 코드에서는 myChart라는 ID를 가진 캔버스 요소를 생성하고, Chart.js의 Chart 객체를 생성하여 그래프를 그립니다.

터미널에서 프로젝트 디렉토리로 이동한 후, 다음 명령어를 사용하여 Parcel을 실행합니다:

npx parcel index.html

Parcel은 index.html 파일을 번들링하고 로컬 개발 서버를 실행합니다.

웹 브라우저에서 http://localhost:1234에 접속하여 그래프가 잘 표시되는지 확인할 수 있습니다.

이제 Parcel을 사용하여 Chart.js를 프로젝트에 쉽게 통합할 수 있습니다. Chart.js의 도큐먼트와 Parcel의 도큐먼트를 참조하여 필요한 기능을 추가하고 세부적인 설정을 수행할 수 있습니다.

참고 자료:

Chart.js 공식 문서: https://www.chartjs.org/docs/latest/
Parcel 공식 문서: https://parceljs.org/getting_started.html