자바스크립트에서 JSON 데이터를 그래프로 시각화하는 방법

10 Sep 2023

javascript

JSON(JavaScript Object Notation)은 자바스크립트에서 데이터 교환을 위해 사용되는 일반적인 형식입니다. JSON 데이터를 그래프로 시각화하면 데이터를 쉽게 이해하고 분석할 수 있습니다. 이 글에서는 자바스크립트를 사용하여 JSON 데이터를 그래프로 시각화하는 방법을 알아보겠습니다.

라이브러리 선택

자바스크립트에서는 여러 라이브러리를 사용하여 그래프를 시각화할 수 있습니다. 대표적인 라이브러리로는 Chart.js와 D3.js 등이 있습니다. 이 중에서 Chart.js를 사용하여 예제를 작성하겠습니다.

Chart.js 설치

Chart.js를 사용하기 위해서는 먼저 라이브러리를 설치해야 합니다. 아래 명령어를 사용하여 npm을 통해 Chart.js를 설치합니다.

npm install chart.js

HTML 설정

먼저, 그래프를 표시할 HTML 파일을 만들어야 합니다. 다음과 같은 구조로 HTML 파일을 작성합니다.

<!DOCTYPE html>
<html>
<head>
  <title>JSON 데이터 시각화</title>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
  <canvas id="myChart"></canvas>
  <script src="script.js"></script>
</body>
</html>

자바스크립트 코드 작성

이제 자바스크립트 코드를 작성하여 JSON 데이터를 그래프로 시각화해보겠습니다. 아래는 예제 코드입니다.

fetch('data.json')
  .then(response => response.json())
  .then(data => {
    const labels = data.map(item => item.label);
    const values = data.map(item => item.value);

    var ctx = document.getElementById('myChart').getContext('2d');
    var chart = new Chart(ctx, {
      type: 'bar',
      data: {
        labels: labels,
        datasets: [{
          label: 'Data',
          backgroundColor: 'rgba(75, 192, 192, 0.2)',
          borderColor: 'rgba(75, 192, 192, 1)',
          borderWidth: 1,
          data: values
        }]
      },
      options: {
        scales: {
          y: {
            beginAtZero: true
          }
        }
      }
    });
  });

위 코드에서 data.json은 JSON 형식의 데이터 파일의 경로입니다. fetch 함수를 사용하여 데이터를 가져온 후, labels와 values 배열에 데이터를 매핑합니다. 그리고 Chart 클래스를 사용하여 그래프를 생성하고, 데이터를 전달합니다.

실행 결과

위 코드를 실행하면 설정한 그래프가 HTML 파일에 표시됩니다. 이때, 그래프의 종류(type)나 스타일을 자유롭게 변경할 수 있습니다. Chart.js의 공식 문서에서 다양한 그래프 유형과 옵션에 대해 더 자세히 알아볼 수 있습니다.

결론

자바스크립트에서 JSON 데이터를 그래프로 시각화하는 방법에 대해 알아보았습니다. Chart.js를 사용하여 간단한 코드로 JSON 데이터를 그래프로 변환할 수 있습니다. 이를 통해 데이터를 시각적으로 표현하고 분석할 수 있으며, 다양한 그래프 유형과 스타일을 적용하여 원하는 시각화 결과를 얻을 수 있습니다.