자바스크립트로 올라가는 막대 그래프 애니메이션 구현하기

18 Oct 2023

javascript

막대 그래프는 데이터 시각화에 자주 사용되는 요소 중 하나입니다. 이번 튜토리얼에서는 자바스크립트를 사용하여 올라가는 막대 그래프 애니메이션을 구현하는 방법을 알아보겠습니다. 이를 통해 사용자에게 데이터의 변화를 시각적으로 전달할 수 있습니다.

필요한 기술과 도구

이 튜토리얼에서는 다음과 같은 기술과 도구를 사용합니다:

HTML/CSS: 그래프를 표시하기 위한 요소들을 구현할 때 사용됩니다.
자바스크립트: 애니메이션을 제어하고 데이터를 처리하기 위해 사용됩니다.

구현 과정

HTML 구조 작성하기

아래와 같이 HTML 파일을 작성합니다.

<!DOCTYPE html>
<html>
<head>
  <title>막대 그래프 애니메이션</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <div class="chart">
    <div class="bar">
      <div class="progress" style="width: 0;"></div>
    </div>
  </div>

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

CSS 스타일 작성하기

아래와 같이 CSS 파일을 작성합니다. 이 스타일은 막대 그래프를 구현하기 위한 스타일입니다.

.chart {
  width: 200px;
  height: 200px;
  background-color: #f1f1f1;
  position: relative;
}

.bar {
  width: 100px;
  height: 200px;
  background-color: #4caf50;
  position: relative;
}

.progress {
  width: 100%;
  height: 0;
  background-color: #92ed99;
  position: absolute;
  bottom: 0;
}

자바스크립트 코드 작성하기

아래와 같이 자바스크립트 파일을 작성합니다. 이 코드는 애니메이션을 제어하고 데이터를 처리합니다.

window.addEventListener('load', function() {
  // 막대 그래프의 진행 상태를 나타내는 변수
  let progress = 0;

  // 애니메이션을 시작하는 함수
  function startAnimation() {
    // 0부터 100까지 10씩 증가하면서 애니메이션을 실행합니다.
    let interval = setInterval(function() {
      if (progress >= 100) {
        clearInterval(interval);
      } else {
        progress += 10;
        updateProgress();
      }
    }, 100);
  }

  // 막대 그래프의 진행 상태를 업데이트하는 함수
  function updateProgress() {
    let progressBar = document.querySelector('.progress');
    progressBar.style.height = progress + '%';
  }

  // 애니메이션을 시작합니다.
  startAnimation();
});

실행하기

위의 코드를 포함하는 HTML, CSS, 자바스크립트 파일을 각각 index.html, style.css, script.js라는 파일명으로 저장합니다. 저장한 파일들을 웹 브라우저에서 실행하면 올라가는 막대 그래프 애니메이션을 확인할 수 있습니다.

결론

자바스크립트를 사용하여 올라가는 막대 그래프 애니메이션을 구현하는 방법에 대해 알아보았습니다. 이를 통해 데이터 시각화를 통해 사용자에게 정보를 전달할 때 보다 흥미롭고 시각적으로 전달할 수 있습니다. 이 코드를 확장하여 데이터를 동적으로 로드하거나 다른 요소들과 함께 사용하는 등 더욱 복잡한 그래프 애니메이션을 구현해볼 수도 있습니다.

해시태그: #자바스크립트 #막대그래프