[javascript] Chart.js에서의 월 별 데이터 시각화

27 Nov 2023

javascript

웹 개발에서 데이터 시각화는 매우 중요한 요소입니다. 사용자들에게 데이터를 효과적으로 전달하고 시각화된 정보를 통해 더 나은 결정을 내릴 수 있도록 도와줍니다. Chart.js는 웹 개발자들에게 쉽고 강력한 데이터 시각화 도구를 제공합니다.

이번에는 Chart.js를 사용하여 월 별 데이터를 시각화하는 방법에 대해 알아보겠습니다. 예를 들어, 매월 수집한 판매 데이터를 월별로 시각화하려고 합니다.

1. Chart.js 설치

Chart.js를 사용하기 위해 먼저 해당 라이브러리를 설치해야 합니다. 다음의 명령어를 사용하여 npm을 통해 Chart.js를 설치하세요:

npm install chart.js

2. HTML 파일 설정

Chart.js를 사용하기 위해 HTML 파일을 설정해야 합니다. 다음의 코드를 HTML 파일에 추가하세요:

<!DOCTYPE html>
<html>

<head>
  <title>월 별 데이터 시각화</title>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>

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

  <script src="script.js"></script>
</body>

</html>

3. JavaScript 파일 설정

이제 월 별 데이터를 시각화하는 JavaScript 파일을 생성하세요. script.js라는 파일을 생성하고 다음의 코드를 추가하세요:

// 월 별 데이터
const monthlyData = [500, 700, 600, 800, 900, 1000, 1200, 1100, 900, 1000, 800, 700];

// 월 별 라벨
const monthlyLabels = ["1월", "2월", "3월", "4월", "5월", "6월", "7월", "8월", "9월", "10월", "11월", "12월"];

// Chart.js를 통한 월 별 데이터 시각화
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: monthlyLabels,
    datasets: [{
      label: '월별 판매량',
      data: monthlyData,
      backgroundColor: 'rgba(54, 162, 235, 0.5)',
      borderColor: 'rgba(54, 162, 235, 1)',
      borderWidth: 1
    }]
  },
  options: {
    scales: {
      y: {
        beginAtZero: true
      }
    }
  }
});

위의 코드에서 monthlyData와 monthlyLabels는 월 별 데이터와 라벨을 의미합니다. myChart 변수를 통해 Chart.js 객체를 생성하고, type을 “bar”로 지정하여 막대 그래프로 데이터를 시각화합니다.

4. 결과 확인

이제 웹 브라우저에서 HTML 파일을 열어 월 별 데이터 시각화 결과를 확인할 수 있습니다. 막대 그래프를 통해 각 월의 판매량을 시각적으로 비교할 수 있습니다.

월 별 데이터 시각화

결론

Chart.js를 사용하여 월 별 데이터를 시각화하는 방법에 대해 알아보았습니다. 웹 개발에서 데이터 시각화는 매우 유용하며 사용자에게 정보를 전달하기 위한 강력한 도구입니다. Chart.js를 사용하면 쉽게 다양한 유형의 그래프를 생성할 수 있으며, 월 별 데이터 시각화 외에도 다양한 데이터 시각화 작업에 활용할 수 있습니다.

더 자세한 내용은 Chart.js 공식 문서를 참고하세요.