이번 블로그 포스트에서는 자바스크립트를 사용하여 JSON 데이터를 활용하여 차트를 생성하는 방법에 대해 알아보겠습니다.

1. 필요한 라이브러리 추가하기

먼저, 차트를 생성하기 위해 필요한 라이브러리를 추가해야 합니다. 가장 인기있는 차트 라이브러리 중 하나인 Chart.js를 사용하도록 하겠습니다. 다음은 Chart.js를 사용하기 위해 HTML 파일에 스크립트를 추가하는 코드입니다.

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

2. JSON 데이터 가져오기

차트를 생성하기 위해 먼저 JSON 데이터를 가져와야 합니다. 이 예제에서는 AJAX를 사용하여 서버에서 JSON 데이터를 가져오도록 하겠습니다. fetch 함수를 사용하여 서버에서 JSON 데이터를 가져오는 코드는 다음과 같습니다.

fetch('data.json')
  .then(response => response.json())
  .then(data => createChart(data))
  .catch(error => console.error('Error:', error));

위 코드에서 data.json은 서버에서 제공되는 JSON 데이터의 URL입니다. JSON 데이터를 성공적으로 가져온 후에는 createChart 함수를 호출하여 차트를 생성합니다.

3. 차트 생성하기

JSON 데이터를 성공적으로 가져온 후에는 이 데이터를 활용하여 차트를 생성할 수 있습니다. Chart.js에서는 다양한 유형의 차트를 지원하며, 이 예제에서는 막대 차트를 생성하는 방법을 알아보겠습니다. 다음은 JSON 데이터를 기반으로 막대 차트를 생성하는 코드입니다.

function createChart(data) {
  var ctx = document.getElementById('myChart').getContext('2d');
  var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
      labels: data.labels,
      datasets: [{
        label: 'Sales',
        data: data.sales,
        backgroundColor: 'rgba(54, 162, 235, 0.5)',
        borderColor: 'rgba(54, 162, 235, 1)',
        borderWidth: 1
      }]
    },
    options: {
      scales: {
        y: {
          beginAtZero: true
        }
      }
    }
  });
}

위 코드에서 data.labels는 막대 차트의 레이블을, data.sales는 막대 차트의 데이터를 나타냅니다. 이 예제에서는 Sales라는 라벨을 사용하며, 막대의 배경색과 테두리 색상도 지정하였습니다.

결론

이제 자바스크립트를 사용하여 JSON 데이터를 기반으로 차트를 생성하는 방법을 살펴보았습니다. 이를 응용하여 다양한 유형의 차트를 생성할 수 있으며, Chart.js의 다양한 기능을 활용해 원하는 대시보드나 데이터 시각화를 구현할 수 있습니다.

#javascript #JSON #차트