Express.js는 JavaScript 기반의 웹 어플리케이션 개발을 위한 유명한 프레임워크입니다. 이 프레임워크를 사용하여 데이터를 시각화하기 위해 그래프를 생성하고 표시하는 방법을 알아보겠습니다.

Chart.js

Chart.js는 HTML5 Canvas를 사용하여 동적인 그래프를 생성하는 오픈 소스 라이브러리입니다. Express.js와 함께 사용하기에 이상적이며, 다양한 유형의 그래프를 지원합니다.

Chart.js를 사용하려면 먼저 해당 라이브러리를 설치해야 합니다. 다음 명령어를 사용하여 설치합니다.

npm install chart.js

다음은 Express.js에서 Chart.js를 사용하여 그래프를 생성하는 단계입니다.

1. Express.js 애플리케이션에 Chart.js 라이브러리를 추가합니다.

const Chart = require('chart.js');

1. HTML 페이지에 Canvas 요소를 추가하고 그래프를 표시할 위치에 ID를 할당합니다.

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

1. Express.js 라우터에 그래프를 생성하는 코드를 추가합니다.

app.get('/chart', (req, res) => {
  // 데이터 가져오기
  const data = getDataFromDatabase();

  // Canvas 요소 가져오기
  const canvas = document.getElementById('myChart');

  // 그래프 생성하기
  const ctx = canvas.getContext('2d');
  new Chart(ctx, {
    type: 'bar',
    data: {
      labels: data.labels,
      datasets: [{
        label: '데이터',
        data: data.values,
        backgroundColor: 'rgba(75, 192, 192, 0.2)',
        borderColor: 'rgba(75, 192, 192, 1)',
        borderWidth: 1,
      }]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      scales: {
        y: {
          beginAtZero: true
        }
      }
    }
  });
});

1. 브라우저에서 /chart 경로에 접속하여 그래프를 확인합니다.

위의 코드에서 getDataFromDatabase 함수는 데이터베이스에서 필요한 데이터를 가져오는 사용자 정의 함수입니다. 데이터는 그래프의 레이블과 값으로 구성됩니다. type 속성을 조정하여 다양한 유형의 그래프를 생성할 수 있습니다.

Chart.js 외의 그래프 라이브러리

Chart.js 외에도 Express.js와 호환되는 다른 그래프 라이브러리도 있습니다. 이 중 일부는 다음과 같습니다.

• D3.js
• C3.js
• Plotly.js

각 라이브러리는 고유한 기능과 시각적인 스타일을 제공하므로 프로젝트 요구사항에 맞는 라이브러리를 선택할 수 있습니다.

결론

Express.js와 함께 그래프 시각화를 진행하기 위해서는 Chart.js와 같은 오픈 소스 라이브러리를 사용하면 됩니다. 위의 가이드를 따라서 손쉽게 Express.js 애플리케이션에서 그래프를 생성하고 표시할 수 있습니다.