[javascript] Chart.js를 활용한 테스트 결과 시각화

27 Nov 2023

javascript

테스트 결과를 시각화하여 쉽게 이해하고 분석할 수 있는 방법으로 Chart.js라는 JavaScript 라이브러리를 활용할 수 있습니다. Chart.js는 다양한 차트 유형을 지원하며, 간단하고 사용하기 쉬운 인터페이스를 제공합니다.

Chart.js 설치

먼저 Chart.js를 사용하기 위해 해당 라이브러리를 설치해야 합니다. 다음은 npm을 사용하여 Chart.js를 설치하는 방법입니다.

npm install chart.js

HTML에서 Chart.js 라이브러리 가져오기

<!DOCTYPE html>
<html>
<head>
  <title>테스트 결과 시각화</title>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
  <canvas id="myChart"></canvas>

  <script>
    // 차트 생성 코드 작성
  </script>
</body>
</html>

데이터 준비하기

차트에 표시할 데이터를 준비해야 합니다. 예를 들어, 테스트 결과에 대한 성능 지표를 바탕으로 시간에 따른 성능 변화를 보여주는 선 그래프를 그리려고 한다면, 시간과 대응하는 성능 지표 데이터를 가지고 있어야 합니다. 이 데이터를 JavaScript 객체 형태로 작성하면 됩니다.

var data = {
  labels: ['1시간', '2시간', '3시간', '4시간', '5시간'],
  datasets: [{
    label: '테스트 결과',
    data: [8, 12, 10, 15, 11],
    backgroundColor: 'rgba(54, 162, 235, 0.2)',
    borderColor: 'rgba(54, 162, 235, 1)',
    borderWidth: 1
  }]
};

차트 생성하기

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
  type: 'line',
  data: data,
  options: {
    scales: {
      y: {
        beginAtZero: true
      }
    }
  }
});

위 코드에서 new Chart(ctx, {...})를 통해 차트를 생성하고, type 속성에 원하는 차트 유형을 지정합니다. 여기서는 선 그래프를 보여주는 ‘line’을 선택했습니다. data 속성에는 앞서 준비한 데이터를 전달하고, options 속성에는 차트의 추가 설정을 지정할 수 있습니다.

그래프 화면으로 출력

위 코드를 작성하고 웹 브라우저에서 해당 HTML 파일을 열면, 테스트 결과에 대한 선 그래프가 출력됩니다.

Chart.js를 이용하면 다양한 시각적 효과와 상호작용을 추가로 설정할 수 있으며, 다양한 차트 유형을 사용할 수 있습니다. Chart.js의 공식 문서를 참조하여 더 많은 기능을 알아보세요.

참고자료

Chart.js 공식 문서: https://www.chartjs.org/
Chart.js GitHub 페이지: https://github.com/chartjs/Chart.js