[javascript] Chart.js를 활용한 엑셀 데이터 시각화

27 Nov 2023

javascript

1. 개요

이번 포스트에서는 Chart.js를 사용하여 엑셀 데이터를 시각화하는 방법에 대해 알아보겠습니다. Chart.js는 HTML5 Canvas를 사용하여 다양한 차트를 생성할 수 있는 자바스크립트 라이브러리입니다. 엑셀 데이터를 시각화하여 직관적으로 분석하고 전달할 수 있다면 효과적인 정보 전달이 가능해집니다.

2. Chart.js 설치 및 설정

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

npm install chart.js

설치가 완료되면 HTML 파일의 <head> 태그 내에 다음과 같이 스크립트를 추가합니다.

<script src="node_modules/chart.js/dist/chart.min.js"></script>

3. 데이터 준비

엑셀 시트에서 사용할 데이터를 준비합니다. 엑셀 시트의 데이터를 JavaScript 객체 형태로 변환합니다. 예를 들어, 아래와 같은 데이터를 가지는 엑셀 시트가 있다고 가정해봅시다.

이름	국어	영어	수학
A	90	85	95
B	80	70	75
C	95	90	100

이 데이터를 JavaScript 객체로 변환하면 다음과 같습니다.

const data = [
  { name: "A", korean: 90, english: 85, math: 95 },
  { name: "B", korean: 80, english: 70, math: 75 },
  { name: "C", korean: 95, english: 90, math: 100 }
];

4. 차트 생성 및 설정

Chart.js를 사용하여 차트를 생성하고 설정합니다. 아래의 코드를 사용하여 막대그래프를 생성해보겠습니다.

const ctx = document.getElementById("myChart").getContext("2d");

const myChart = new Chart(ctx, {
  type: "bar",
  data: {
    labels: data.map(item => item.name), // X축 레이블 설정
    datasets: [
      {
        label: "국어",
        data: data.map(item => item.korean), // 데이터 설정
        backgroundColor: "rgba(255, 99, 132, 0.2)" // 막대 색상 설정
      },
      {
        label: "영어",
        data: data.map(item => item.english),
        backgroundColor: "rgba(54, 162, 235, 0.2)"
      },
      {
        label: "수학",
        data: data.map(item => item.math),
        backgroundColor: "rgba(255, 206, 86, 0.2)"
      }
    ]
  },
  options: {
    scales: {
      y: {
        beginAtZero: true
      }
    }
  }
});

위의 코드에서 myChart는 생성된 차트 인스턴스입니다. type 속성을 통해 원하는 차트 종류를 선택하고, data 속성을 통해 데이터를 설정합니다. options 속성을 사용하여 추가적인 설정을 할 수 있습니다.

5. HTML에 차트 영역 추가

마지막으로, 생성한 차트를 HTML 파일에 추가합니다. 아래의 코드는 Chart.js의 차트를 표시할 영역을 설정하는 예입니다.

<canvas id="myChart"></canvas>

위의 코드에서 myChart는 앞에서 JavaScript에서 차트를 생성할 때 사용한 canvas의 ID입니다.

6. 실행 결과 확인

위의 과정을 모두 완료한 후 HTML 파일을 실행하면 엑셀 데이터가 Chart.js를 통해 시각화된 결과를 확인할 수 있습니다.

7. 결론

이 포스트에서는 Chart.js를 사용하여 엑셀 데이터를 시각화하는 방법을 알아보았습니다. Chart.js를 활용하면 직관적인 차트를 통해 데이터를 분석하고 시각화할 수 있습니다. 다양한 차트 종류와 설정 옵션을 활용하여 필요한 시각화 결과를 도출할 수 있습니다. Chart.js의 공식 문서를 참고하여 더 다양한 활용 방법을 익혀보세요.

8. 참고자료

Chart.js 공식 문서: https://www.chartjs.org/docs/latest/