Promise를 이용한 데이터 시각화 예시

13 Sep 2023

Promise

이 예시에서는 JavaScript의 Promise를 사용하여 데이터 시각화를 수행하는 방법을 안내합니다.

데이터 가져오기

데이터 시각화를 시작하기 전에, 데이터를 먼저 가져와야 합니다. 이 예시에서는 AJAX를 사용하여 데이터를 비동기적으로 가져오는 방법을 보여줍니다.

function fetchData(url) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    
    xhr.onreadystatechange = () => {
      if (xhr.readyState === 4) {
        if (xhr.status === 200) {
          const data = JSON.parse(xhr.responseText);
          resolve(data);
        } else {
          reject(xhr.statusText);
        }
      }
    };
    
    xhr.open('GET', url, true);
    xhr.send();
  });
}

fetchData('https://api.example.com/data')
  .then(data => {
    visualizeData(data);
  })
  .catch(error => {
    console.error('Error fetching data:', error);
  });

위 코드에서 fetchData 함수는 주어진 URL에서 데이터를 가져오는 Promise를 반환합니다. Promise는 비동기 작업의 완료 여부를 나타내는 객체로, 데이터를 성공적으로 가져오면 resolve 함수를 호출하여 해당 데이터를 전달합니다. 그렇지 않은 경우에는 reject 함수를 호출하여 오류 메시지를 전달합니다.

데이터 시각화

데이터를 가져온 후에는 시각화를 수행해야 합니다. 이 예시에서는 Chart.js를 사용하여 데이터를 시각화하는 방법을 보여줍니다.

function visualizeData(data) {
  const labels = data.map(item => item.label);
  const values = data.map(item => item.value);

  const ctx = document.getElementById('chart').getContext('2d');
  new Chart(ctx, {
    type: 'bar',
    data: {
      labels: labels,
      datasets: [{
        label: 'Value',
        data: values,
        backgroundColor: 'rgba(75, 192, 192, 0.5)'
      }]
    },
    options: {
      responsive: true,
      scales: {
        y: {
          beginAtZero: true
        }
      }
    }
  });
}

위 코드에서 visualizeData 함수는 data 배열을 사용하여 차트를 생성합니다. labels와 values 변수는 각각 데이터의 라벨과 값으로 구성된 배열을 생성합니다. 그 후, Chart.js 라이브러리를 사용하여 #chart 요소에 바 차트를 생성합니다. 차트의 데이터는 labels와 values 배열을 사용하고, 추가적인 설정은 options 객체에서 구성할 수 있습니다.

위의 코드를 실행하면 데이터가 성공적으로 가져오고 시각화됩니다.

이 예시는 Promise를 사용하여 데이터를 가져와 시각화하는 기초적인 방법을 보여줍니다. 데이터를 가져오는 부분과 시각화하는 부분을 각각 함수로 분리하여 유연성과 재사용성을 높일 수 있습니다. 애플리케이션의 요구사항에 맞게 데이터 가져오기 및 시각화 로직을 수정하여 사용해 보세요.

데이터 가져오기

데이터 시각화

#Promise #데이터시각화